Highlighting The Current Page With CSS & jQuery

Share /
CSS, PHP, User Interface, jQuery / 9.10.08 / 9264 Comments2008-09-10+21%3A47%3A57kevin /
/

Here’s a common web development scenario: How do we highlight the current page in a navigation seamlessly and dynamically? The answer is jQuery.

See a Live Demo

My recipe for this common scenario involves a mixture of CSS and JavaScript with a dash of jQuery.

XHTML

<ul id="navigation">
	<li><a href="about-us.html">about us</a></li>
	<li><a href="our-products.html">our products</a></li>
	<li><a href="blog.html">blog</a></li>
	<li><a class="active" href="login.html">login</a></li>
	<li><a class="active" href="contact.html">contact</a></li>
</ul>

JavaScript / jQuery

<script type="text/javascript">
$(function(){
	$page = jQuery.url.attr("file");
	if(!$page) {
		$page = 'index.html';
	}
	$('ul.navigation li a').each(function(){
		var $href = $(this).attr('href');
		if ( ($href == $page) || ($href == '') ) {
			$(this).addClass('on');
		} else {
			$(this).removeClass('on');
		}
	});
});
</script>

Usage

You’ll need a copy of jQuery, along with a copy of the jQuery URL Parser plugin.

After you include jQuery, and the URL Parser add the JavaScript snippet above to the <head> section of your document.

How it works

What we do here is simple, we grab the current name of the page, for example about.html. Then we check out ul.navigation <ul> to see if any of the anchors contain an href attribute with that value. If any of the links are a match we flag the parent of the anchor with a CSS class. In this case I’ve chosen current to keep things self explanatory.

Notes

In this case I chose to add the “current” class to the <li> rather than to the anchor. Usually I will create a navigation using CSS sprite techniques, and this allows me greater control over the presentation of that element. This can come in handy for rounded corners or tabs.

Resources

64 Comments ↓

Christopher Seamon / 9.12.08 / 10:40 AM

Nice post Kevin. I have been leaning towards wanting to learn more about PHP (I am trying to learn more about back-end coding) and what I could do with it and stumbled upon your site.

I am a big time advocate of using Jquery and really like that you have a lot of information on it within your blog. Thanks for the good resources.

kevin / 9.12.08 / 10:50 AM

No problem. The first time I began working with PHP was inside Wordpress, and curiously led me to push my limits.

If your interested in going further with PHP in your work I’d recommend checking out PHP Solutions: Dynamic Web Design Made Easy. I’m a sucker for friends of ED books…

revive / 7.6.09 / 9:06 AM

So, what about when someone first loads this page.. and the href is "/" and not including one of the linked page names.. none of the menu items will be hightlighted.. do you have a way to select a specific menu item.. say the first one, but using an id on the li, and adding a class to it if the rest of the 'equation' equals false??

kevinlearynet / 7.7.09 / 3:16 AM

Good point revive,

I've actually been using a similar revised method to this lately. It handles that situation well, and doesn't require PHP at all, just XHTML and a bit of JavaScript with jQuery. I've setup a basic demo for you to check out:

http://www.kevinleary.net/wp-samples/jquery-curre...