How to highlight selected TopMenu?

Hi nop team,

Do you have any idea to implement highlight color for selected menu?
Could you guide me here


Thanks
Mick,

modify in styles.css in Themes/yourtheme/content/ folder.

and add

.headermenu .topmenu li a:active
{
   color:your color;
...
}

That method does not work.
Any other method, please?

Thanks,
Mick

add a css class called topmenuactive and do the style there.

and add this script on the top.

<script type="text/javascript>
$(document).ready(function(){
   $("topmenu ul li a").click(function(){
$("topmenu ul li a").removeClass("topmenuactive");
this.addClass("topmenuactive");
});
});
</script>

check whether the jquery.js  included.

http://www.elaamart.com


or

use jquery ui menu. then it'll take care of everything.

I think that does not work...
When the page is refreshed, the javascript click event does not fired...

I have added this line...

Now it is working

class="@VeryCommonHelper.ActiveTopMenu(Url.RouteUrl("HomePage"))"



Thanks elaa for keeping helping,
Mick

good job. :)



http://www.elaamart.com

where is styles.css? do you need to be an admin to edit the colours and change the text, links etc?

the styles.css is located in Presentation/Nop.Web/Themes/yourthemename/content folder.

No. you dont need to be an admin of your site. but you need the ftp access for the site to edit the style.css file.

http://www.elaamart.com

Hi, there. There is another solution. The idea is to compare generated routes url with current url.

1. Add method IsUrlIsCurrent to \Nop.Web\Extensions\HtmlExtensions.cs

public static bool IsUrlIsCurrent(this HtmlHelper html, string url)
{
  return html.ViewContext.HttpContext.Request.Url.AbsolutePath.Equals(url);
}

2. Modify your view ~/Themes/[Your theme]/Views/Catalog/TopMenu.cshtml.
   For example:

@foreach (var topic in Model.Topics)
{
  url = Url.RouteUrl("Topic", new { SeName = topic.SeName });
  <li>
    <a href="@url" class="@(Html.IsUrlIsCurrent(url) ? "active" : "")">@topic.Name</a>
  </li>
}

http://nobugsexception.com/

Following thing you can also achieve using jquery. Following Below Example.
                
                <i class="icon-remove menu-close"></i>
                <a class="scroll" href="#intro">Home</a>
                <a class="scroll" href="#about">About</a>
                <a class="scroll" href="#services">Services</a>
                <a class="scroll" href="#team">Team</a>
                <a class="scroll" href="#portfolio">Portfolio</a>
                <a class="scroll" href="#contact">Contact</a>
                
                a.active
                {
                 background:#e9d319;
                 color: #000;
                }


                $(function(){
                        $("a[href='#intro']").addClass("active");
                        $("a.scroll ").click(function() {
                                $("a.scroll").removeClass("active");
                                $(this).addClass("active");
                        });
                });