jQuery Highlight Navigation Menu v.01 Script

23 Dec

Posted by Jake Rutter as CSS/Web Standards, JavaScript/Ajax, Open Source, Web, jQuery

A few months ago, I created a little script using the jQuery library which will add class=”current” to tabs, allowing you to highlight your menu for you users. Its pretty basic, but it searches the URL, if it finds a match with the link that was clicked – then it add’s class=”current” to that particular tab. You can then use that class in your css, to make a highlighted state.

Here is the code:

 
// Highlight Tab v.01 by Jake Rutter
// Website: http://www.onerutter.com
// Feel free to use and adapt, please just give credit where credit is due.
 
// ----------- highlight tab function -----------
    var path = location.pathname;   
 
    var home = "/";
    $("a[href='" + [ path ] + "']").parents("li").each(function() { 
        $(this).addClass("selected");
    });

Feel free to adapt and use this code on your site, I would appreciate it if you could leave my comments in as the creator in the .js file. If you are unfamiliar with how jQuery works, you can read this tutorial which will get you up to speed!

jQuery Highlight Script (767)

1613 Comments2008-12-23+13%3A55%3A46Jake+Rutter

Category CSS/Web Standards, JavaScript/Ajax, Open Source, Web, jQuery

You can follow any responses to this entry through the RSS 2.0 feed.

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

1613 Responses2008-12-23+13%3A55%3A46Jake+Rutter to “jQuery Highlight Navigation Menu v.01 Script”

3 Comments so far

paul

January 27th, 2009 at 4:58 am

Hi, thanks for your script.

Couple of things needed to be changed in order for it to work.

Firstly, don’t think the square brackets around the path are necessary i.e. [ + path + ]

Secondly, I found it useful to use the ‘ends with syntax for matching the path i.e instead of “a[href=’ + path I used “a[href $=’ + path

see docs at http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue

anyway, it’s live and working on a site I did, http://www.worldmarathonchallenge.com
Jake Rutter

January 27th, 2009 at 8:06 am

Excellent, Im glad I could help you out. Im going to try the ‘ends with syntax’ too. The attribute stuff in jQuery is pretty powerful.
akhil

August 25th, 2009 at 6:52 am

i have an issue with this script as this is not working fine in IE6, what may be the issue