Rule #1 for creating a good user experience is to make your product as easy to use as possible. Whether it’s a web site, or a vacuum cleaner, if it’s difficult to use it’s a shitty product. In the web world, user experience often get’s overlooked for fancy graphics and unnecessary animation (the old myspace comes to mind). The good news is as more browsers start to adopt web standards it’s becoming easier for designers to make sites that are both good looking and usable.
Good design equals better functioning — that if the true path of good design is followed scrupulously, then not only does the thing look very cool, but it is also a better object all around.
— David Byrne from The Bicycle Diaries
One of the most surefire ways designers can enhance a user’s experience on the web is to provide clear navigation for the reader; the user should always know where they are on the site. One of the more subtle yet effective ways of achieving this is to give the current page menu item a different state from the rest of the menu items.
Easy enough in theory, however implementing requires a bit more trickery than normal CSS styling. I have used WordPress to build my site so this tutorial will cover how to implement current menu states using CSS & a little PHP with WordPress, however there are also other methods that utilize JavaScript and straight CSS that you can read about here and here if you like.
So getting started, your basic navigation probably looks something like this:
<ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul>
You should be able to find where your menu is being called from in the header.php file. Now with a little PHP magic we can determine what page the user is on and place “current” in the right spot. Here’s how the first <li> element from above should look after replacing the code:
<li<?php if (is_home()) { echo " id=\"current\""; } ?>><a href="#">Home</a></li>
Assuming everything goes as planned, WordPress should generate some HTML that looks like this for the current page item:
<li id="current"><a href="#">Home</a></li>
You’ll now need to go through for each menu item and edit the code appropriately. Our navigation structure should now look something like this:
<ul id="menu"><!-- To show "current" on the home page --> <li<?php if (is_home()) { echo " id=\"current\""; } ?>><a href="#">Home</a></li>
<!-- To show "current" on the About Page --> <li<?php if (is_page('About')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">About</a> </li>
<!-- To show "current" on the Blog Page --> <li<?php if (is_page('Blog')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Blog</a> </li>
<!-- To show "current" on the Contact Page --> <li<?php if (is_page('Contact')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Contact</a> </li> </ul>
Now throw a little CSS in your stylesheet and you’re in business:
#current { background-color: red; }
For more information on defining current menu states visit the WordPress Codex.