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!