I am trying to implement menu active state for the currently browsed page, unfortunately no luck yet. Any experienced community member guide me on this? I checked nopCommerce default demo site also but looks active state missing there as well. If I browse http://demo.nopcommerce.com/digital-downloads then I expect to have active state color there.
I am trying to implement menu active state for the currently browsed page, unfortunately no luck yet. Any experienced community member guide me on this? I checked nopCommerce default demo site also but looks active state missing there as well. If I browse http://demo.nopcommerce.com/digital-downloads then I expect to have active state color there.
Thanks Regards Pasang
Hi Pasang,
You can use the following javascript code to achieve this.
$('.top-menu li a').click(function(e) { e.preventDefault(); $('a').removeClass('active'); $(this).addClass('active'); });
You can add the code for example in the 'index.cshtml' file, or in the '_Root.Head.cshtml' and also in some external javascript file.
I don't think any js/jquery solution will work here. Let's say I am at home page of demo.nopcommerce.com and when I navigate to any other page that time page navigates to clicked page. So I need to assign active class for the navigated menu item. As I am concern we need to add razor code in TopMenu.cshtml.
The if/else statement seems kind of redundant since you're checking that window.location.pathname == "/" then using the static string in the jQuery attribute selector instead of the path variable that you set equal to window.location.pathname anyway. Unless I'm mistaken you could just make it:
Hello - I am using the Nop-templates mega menu (and one of their themes as well), and I'm not sure WHERE to add this code in order to achieve the menu active state. I've tried it in a few places with no luck so thought I'd ask as this is a fairly recent post. THANKS!
The if/else statement seems kind of redundant since you're checking that window.location.pathname == "/" then using the static string in the jQuery attribute selector instead of the path variable that you set equal to window.location.pathname anyway. Unless I'm mistaken you could just make it: