Azharkamar.com

How to Add a ’selected’ Class to the Menu Link of the Current Page using jQuery

Snippets
20 Nov 2011
9 comments

Differentiating the menu item of a current web page from other menu items is pretty important, generally because it enhances user experience as it instantly tells the user exactly which part of the website he is at. There are many different ways to implement this programmatically, but I’ll only explain the jQuery method here.

The simple idea in achieving this is to get the URL of the current page you’re at, and check if that URL matches the HREF (link) value of the corresponding link in the site navigation.

If there is a match, append a class (in our case, the .selected class) to signify the current menu item of that current page.

That’s all there is. Now let’s roll.

First, let’s view a simple demonstration of what we’re going to achieve.

View Demo

Now read on to find out how to do this.

The jQuery Function

Here’s the jQuery function that will run through all links and add a .selected class to the link.

$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("#nav li a").each(function(){
          if($(this).attr("href") == pgurl)
          $(this).addClass("selected");
     })
});

The HTML Structure

Here’s how the HTML structure of your navigation menu should look like:

<ul id="nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="contact.html">Contact</a></li>
</ul>

The Final Product

Finally we add the jQuery function to the HTML, style it with some simple CSS and include the jQuery library script.

And we get this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.7.0/jquery.min.js"></script>

<style>
ul{list-style:none; margin:200px auto; text-align:center; padding:0}
ul li{display:inline;}
#nav{font-family:Arial, Helvetica, sans-serif; font-size:30px}
#nav li a{color:#999; text-decoration:none; font-weight:bold; padding:20px 50px}
#nav li a.selected{color:#ff3399; background:#f6f6f6}
#nav li a:hover{background:#f6f6f6}
</style>

<script>
$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("#nav li a").each(function(){
          if($(this).attr("href") == pgurl)
          $(this).addClass("selected");
     })
});
</script>
</head>

<body>
     <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
     </ul>
</body>
</html>

In the demo that you see above, I duplicated 2 copies of the index.html file above and named them about.html and contact.html respectively.

And that’s all for today folks, have fun!

Tags -
Author - Azhar Kamar
9 Comments Revolving around this Article
  1. rock

    Hi, this is great working.. but I have doubt, it is working when finding url of that site. so need to find outer site like target is _blank….

  2. mozila fire

    This is truly so cool Thanks for making this available

  3. lawyers sydney

    Hello! I’m at work browsing your blog from my new iphone 3gs! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the superb work!

  4. make a website for free

    Thank you for sharing your info. I really
    appreciate your efforts and I am waiting for your further post thank you once again.

  5. Luke

    If you are going for most excellent contents like me, just visit this web page daily since it
    provides feature contents, thanks

  6. Mike Muller

    Hi, This is great!
    How would I go about adding the class to the instead of an
    So instead of it rendering this:
    About
    it would render this:
    About

    Any help would be greatly appreciated! Thanks



    Mike Muller replied:

    Sorry, that last message didn’t turn out how I wanted.

    I was hoping you could let me know how I could add the class to the li instead of the a.

    Any ideas?



    Azhar Kamar replied:

    @Mike Muller,

    Yup, that can be done using jQuery’s parent() method.
    Just replace line 6 of the function with this one below:

    $(this).parent().addClass("selected");
    return false; //exit the each loop
    

    Hope this helps!



    Mike Muller replied:

    @Azhar Kamar,
    Thanks.
    For some reason it only seems to be working for the first li.
    It doesn’t seem to add the class to any other li when I navigate to the corresponding pages.
    http://raponbeta.createmedia.ca/test1/1.html

Write a Comment! NOW! :)

Current ye@r *