Hi all,
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
How to implement menu active state?
MVP
Silver Solution Partner
Zertifizierter Entwickler
- 2639
- 42712
- 21.01.2010
- United States
Pasang wrote:
Hi Pasang,
You can use the following javascript code to achieve this.
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.
Hi all,
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
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.
- 6
- 60
- 15.02.2016
- Nepal
Hi,
Thank you for the suggestion.
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.
Thanks
Regards,
Pasang
Thank you for the suggestion.
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.
Thanks
Regards,
Pasang
- 94
- 558
- 13.03.2015
- Belgium
Hi there,
Using the Nop-Templates mega menu and javascript, I managed to hack a way around it using the following script:
Hope this helps someone. :)
Using the Nop-Templates mega menu and javascript, I managed to hack a way around it using the following script:
$(document).ready(function () {
String.prototype.capitalize = function () {
return this.charAt(0).toUpperCase() + this.slice(1);
}
if (window.location.pathname == '/') {
$("[title='Home']").addClass('active');
}
else {
var path = window.location.pathname.split('/')
title = path[1];
capitalizedTitle = (title.charAt(0).toUpperCase() + title.slice(1));
pageTitle = capitalizedTitle.match(/[a-zA-Z]+/g)[0];
$("[title='" + pageTitle + "']").addClass('active');
}
});Hope this helps someone. :)
- 94
- 558
- 13.03.2015
- Belgium
The above was actually way too complex.
This one is better, and should work with all menus.
This one is better, and should work with all menus.
$(document).ready(function () {
if (window.location.pathname == '/') {
$('a[href="/"]').addClass('active');
}
else {
var path = window.location.pathname
$('a[href="' + path + '"]').addClass('active');
}
});
MVP
Zertifizierter Entwickler
- 558
- 6401
- 29.07.2011
- United Kingdom
BrickHunters wrote:
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:
The above was actually way too complex.
This one is better, and should work with all menus.
This one is better, and should work with all menus.
$(document).ready(function () {
if (window.location.pathname == '/') {
$('a[href="/"]').addClass('active');
}
else {
var path = window.location.pathname
$('a[href="' + path + '"]').addClass('active');
}
});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:
$(function() {
$('a[href="' + window.location.pathname + '"]').addClass('active');
});
- 5
- 55
- 11.09.2016
- United States
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!
$(function() {
$('a[href="' + window.location.pathname + '"]').addClass('active');
});
$(function() {
$('a[href="' + window.location.pathname + '"]').addClass('active');
});
- 266
- 1408
- 12.02.2010
- Belarus
petemitch wrote:
how to apply a class to li tag?
The above was actually way too complex.
This one is better, and should work with all menus.
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:
This one is better, and should work with all menus.
$(document).ready(function () {
if (window.location.pathname == '/') {
$('a[href="/"]').addClass('active');
}
else {
var path = window.location.pathname
$('a[href="' + path + '"]').addClass('active');
}
});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:
$(function() {
$('a[href="' + window.location.pathname + '"]').addClass('active');
});how to apply a class to li tag?
<ul class="kt-nav main-menu clone-main-menu">
<li>
<a href="#">page1</a>
</li>
...