3 Ways to Highlight Links to the Current Page

Solution #1: HTML/CSS only

With this solution, all you have to do is add in some extra classes to your HTML and use CSS to style them. Each page has a class on the body tag that identifies it:

Each navigation item also includes a class identifying that particular link:

Then you target those classes in your CSS, defining a different state for the current page:

When you are on the home page, the link with the class “home” will have a green background. You can even add a cursor:default rule to make it appear that the link is no longer active.

Pros:

This solution does not require JavaScript or server-side programming. It’s easy to implement on a small, static site and works for users who have JavaScript turned off.

Cons:

The main problem with this is that you need to add a lot of extra classes into your HTML. This may be fine with for a simple site or when you only want the effect to appear on one small navigation menu. In addition, on dynamically generated sites it’s difficult if not impossible to add a unique class identifier to the body tag for each page.

References:

Auto-Selecting Navigation, by Drew McLellan for 24ways (2005)

Highlighting current page with CSS, by Ian Hicks (2003)

CSS Mastery: Advanced Web Standards Solutions, by Andy Budd (2006), p. 90

Solution #2: JavaScript

This solution uses JavaScript to match the URL of the current page to the URL of the link. The JavaScript simply gets the URL of the current page, then it looks through all the links in the navigation menu you target. If the link href matches the url of the page, it adds an extra CSS class to that link.

Detailed instructions are available in the reference links below.

Pros:

This solution is easy to implement on any type of site, including dynamically generated sites. It does not require any modification of existing navigation menus or unique identifiers for pages or navigation items.

Cons:

This will not work if users have JavaScript turned off. This is relatively rare, but there are many emerging devices such as mobile phones, as well as some assistive technologies, that do not support JavaScript.

It will also not work if the page is referenced by different URLs. For example, if the link points to http://yoursite.com/ but the page is referenced from http://yoursite.com/index.html. It’s good practice to ensure that pages are only accessed by one URL anyway so I wasn’t too worried about this.

References:

Clear Links to Current Page with Unobtrusive JavaScript, by Jonathan Snook (2004)

Automatically highlight current page in menu via Javascript, by Armand Niculescu

Solution #3: PHP

There are a few ways to highlight links using PHP (or other server-side languages).

The first is to use PHP to add an identifier to every page. Then build conditionals into your navigation menu to add an id to links that point to the current page. This option shares many of the same problems as the pure CSS solution above. (You could also use Dreamweaver template conditionals to do this without PHP).

A second option is similar to the JavaScript method described above. Once again, you can get the URL of the current page and compare it with the links in your navigation menu. Then you build your navigation based on whether the navigation item matches the current page. In this case you can even modify the HTML code to remove the link anchor altogether or replace it with another tag (<strong> would be appropriate).

See the references below for detailed instructions.

Pros:

Easy to implement if you have a customizable system and PHP is available.

Cons:

Requires PHP and a level of customization that may not be possible in with some systems. Most solutions require a unique identifying variable to be inserted on every page.

References:

Keeping Navigation Current With PHP, by Jason Pearce for A List Apart (2003)

EasyNav – Keeping navigation clean and current (designed for complex nested navigation trees).

Faux Active Link (instructions in PHP and ASP; there are some other interesting solutions in the comments)

thanks http://www.apaddedcell.com/highlight-links-current-page-css