Gibson Menu: How to Highlight Current Menu Link

I’ve liked playing with the Gibson dropdown menu, which you can find at http://www.grc.com/menu2/invitro.htm, because it uses CSS and no Javascript. The one thing I can’t figure out is how “I can have the current page the user is viewing show by the link staying a certain color on the menu.” (That’s the way they phrased a similar issue on another forum.)

If there’s a way of doing that with pure CSS, I wonder how it could be done with the submenus. (I think I’m asking for the impossible this time.)

The Gibson menu can be found at http://www.grc.com/menu2/invitro.htm.

There’s a nice discussion about highlighting links for other menus at http://www.webmasterworld.com/forum83/7084.htm.

Thanks!

As Stevie said above you could do it using the body to hold the class (or classes to determine which element to highlight). You would of course have to change those on each page so that the correct selection is made.

If you have a drop down menu with 10 links across the top and then 10 sub items you are looking at coding at least 100 rules to do this. Many drop downs have sub sub levels so the number of rules will be multiplied yet again.

In a drop down you would want to have the top level menu item highlighted and then perhaps the sub menu item also highlighted and then perhaps the path to the selected item also. In a large menu this is starting to be very unwieldy indeed.

Perhaps it would be better just to highlight the top menu item instead because normally of course you will have a breadcrumb immediately showing the path to the current page anyway.

Of course there is always the simple method of just adding a single class to the current menu and style it from there. It’s not much good if your header is an include though.

Here’s an old example of how to use the method that Stevie mentioned above but it’s on a normal menu and not a dropdown menu although the process would be the same.

To get a menu item to stay highlighted to show you are on that page, with any menu system, you might be able to do clever things with PHP, but the easier (if slightly long-winded) way is to code it into the HTML.

If you are coding each page individually, just put id=“current” on the relevant menu item, and style it accordingly in the CSS.

If you are using an include of some sort to get the menu in place, so that it isn’t hard-coded into the HTML for each page, you’ll need to do a bit more work. The first thing to do is to put a unique class on each and every menu item. Then, on each page, give the <body> an ID that corresponds with the class on the relevant menu item. Then put the relevant CSS rule in, to apply to every pairing of body and menu items.

eg, if you have a contact page, you might start it with <body id=“contact”>, then somewhere in the menu you would have <li class=“contact”><a href=“/contact.htm”>Contact us</a></li>, and likewise for all your other pages.

Your CSS would then look something like
#contact li.contact,
#products li.products,
#stores li.stores,
#welcome li.welcome
…all other pairs listed…
{ relevant styling }