jQuery Menu - Active State Based on URL

Question

I am just trying to retrofit an active state into a static html menu. The menu has the following structure: -

<div id="navbar">
ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="index.htm">Home</a></li>
  <li><a href="about.htm">About Us</a></li>
  <li><a href="products.htm">Products</a>
    <ul>
       <li><a href="product-grp1">Product Groups 1</a>
         <ul>
            <li><a href="product1.htm">Product 1</a>
            <li><a href="product2.htm">Product 2</a>
            <li><a href="product3.htm">Product 3</a>
         </ul>
       </li>
    </ul>
  </li>
</ul>
</div>

You can see that this is a 3 level menu system which actually displays as a mega menu.

What I would like to do is, based on the URL of the page you are on, add an active state to the top level menu. This active state would need to show whether you are on a second or third level page. I need to do this based on the page url rather than a click as the site does have quite a lot of links directly from Google to specific pages, so I will need to show where those sit too.

Note that the file structure is flat so each url is http://www.thesite.com/about.htm etc.

I've been trying to sort this out from previous questions, but just can't get it to work. I'm guessing that's because of the depth of the menu, but would really appreciate any guidance anyone can give me.

---

THANKS for all your help. This really put me on the right track. In the end I used the following: -

/* The following adds active to the next level up of the url */
$('#MenuBar1 li a').each(function() {
 if(filename == $(this).attr('href')) {
      $(this).addClass('active');
 }
});

/* The following line looks for the .active class, then the parent of it with the #navbar ul.... structure, then adds the active class to that one only */
$('.active').parents('#navbar ul.MenuBarHorizontal li').addClass('active-top');
$('#navbar ul.MenuBarHorizontal>li').addClass('menu-top');

What this does is used jQuery to add an .active class to the particular link, then adds an .active-top to the parents (all of them unfortunately as I couldn't work out how to target just the level I wanted). The last line adds a .menu-top class to the top level of the menu.

This structure lets me target just the top level of the menu without the formatting flowing down the DOM to other child selectors. It probably isn't the most elegant solution, but it does work.

Thanks again to everyone who gave me advice.

Answer 1

You can get the current path with JavaScript using window.location.pathname. You can check with jQuery using something like:

$("#navbar a[href=" + window.location.pathname + "]").addClass('active');

This will add the active class to all anchors in #navbar that have the same href attribute as the current path. You may need to trim the leading slash.

Answer 2

Checkout the fiddle here : http://jsfiddle.net/EVmsY/

$(function(){
  var url = 'http://www.thesite.com/product1.htm'; // window.location;
  var page = url.substr(url.lastIndexOf('/') + 1);

  if (page) {
    $('#MenuBar1 li a[href="' + page + '"]').addClass('active');
    $('.active').parents().children('li a').addClass('active');
  }
});

Answer 3

You could do something like this:

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).addClass('active');
     }
});

If you need the class applied to the li do something like this:

var url = window.location.pathname; var filename = url.substring(url.lastIndexOf('/')+1);

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).parent('li').addClass('active');
     }
});

The above responses will come out incorrect because they will give the full pathname so if your url is like this:

http://www.thesite.com/about.htm 

The "window.location.pathname" is going to return this:

/about.htm

So you would need to do something like this in order to leave the markup the way you have it and get the desired result or you could just prepend slashes to the front of the href.

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

$("#navbar a[href=" + filename + "]").addClass('active');

Answer 4

use window.location.href to get the current current URL location of the browser... and addClass() to add a classname to the link... inmycase i am adding active

try this

 <script>
 $(function(){
    var currenthref=window.location.href;
    $("#navbar a[href=" + currenthref + "]").addClass('active');  //adds active class to the current url.

})
</script>