Automatically Highlight Current Page in Navigation with CSS & jQuery

It’s common that we want to highlight the current page in navigation to tell users where they are now, and it’s very easy to do it with CSS. Just by adding a class “highlight” to < li > tag and write the style we want in stylesheet. Let’s start it with a simple page:

HTML markup
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li class="highlight"><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Style Sheet
<style type="text/css">
a, a:visited{color:#000; font-weight:bold; text-decoration:none;}
ul.navigation{list-style:none; font: 0.75em/1.5em normal Tahoma, Verdana, Geneva, sans-serif;}
ul.navigation li{ background:#ececec; margin:1px;padding:5px 15px; display:block; float:left;}
ul.navigation li.highlight{ background:#666;}
ul.navigation li.highlight a{ color:#f5f5f5; cursor:default;}
</style>

Then, we will get a page look like this:

screenshot of highlight navigation

However, we have to change class “highlight” position in each page in order to show the highlight link correctly. It’s not convenient when we have a complicated navigation, and how about when we have to write php/asp templates or .net masterpages? Can we use exactly same html code in each page but highlight the navigation link automatically? The answer is YES. Few lines of jQuery code will simply does the trick. Let’s still paly with this simple page to explain the idea.

  1. Link the jQuery library to these pages
  2. Leave the highlight class at home link’s container <li> to make it as the default highlight link. *
  3. Write jQuery code

*It’s because we use the strategy of getting the current url and comparing it with the links in navigation until the link’s href is found, then add “highlight” class to the link’s container <li>. If we don’t make the Home link as the default highlight link, when user www.yourdomain.com to open the website, the url doesn’t contain any links of the navigation, so, nothing would be automatically highlight.

HTML markup
<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul class="navigation">
<li class="highlight"><a href="index.html">Home</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
jQuery code
$(document).ready(function(){ 
var str=location.href.toLowerCase(); 
$(".navigation li a").each(function() { 
if (str.indexOf(this.href.toLowerCase()) > -1) {
 $("li.highlight").removeClass("highlight"); 
$(this).parent().addClass("highlight"); 
}
 });
 })

OK, we have it done here since this is just a very simple page.
View the Demo Pages
Download the Demo pages

In reality, we always have much more complicated situations. What can we do if we have child navations? We not only want to highlight the child navigation’s link but also the parent container <li>. The simple method is searching the highlight <li>’s parent elements, if the parent elements are <li>, add “highlight” class to this <li>.

HTML markup
<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul class="navigation">
<li class="highlight"><a href="index.html">Home</a></li>
<li><a href="product.html">Product</a>
<ul class="childNav">
<li><a href="laptop.html">Laptop</a></li>
<li><a href="camera.html">Camera</a></li>
<li><a href="phone.html">Phone</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
jQuery code
$(document).ready(function(){
var str=location.href.toLowerCase();
$(".navigation li a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$("li.highlight"').parents().each(function(){
if ($(this).is("li")){
$(this).addClass("highlight");
}
});
})

View the Demo Pages
Download the Demo pages

Cross Browser: Firefox 2+, IE 6+, Safari 3+, Opera 9+, Chrome