Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
From the author of

7. Highlighted Tabs

Knowing where you are is always important when navigating the Web, but if you’re using an external file to keep the header of your site consistent from page to page, how can you tell it to highlight the tab for the page in which it is currently inserted? You could always resort to some messy JavaScript to identify the page and then set the style for that menu link, but try this instead: Add a unique ID to the <body> tag for each page (for example, id="consultingPage"), another unique ID for each of the menu options (for example, id="consultingMenu"), and then add a contextual definition for the normal link states for how the links should be highlighted (#consultingPage #consultingMenu{...}) in your global CSS.

On the Home page, the Home menu link is highlighted.

Using the exact same code for the menu, the Consulting menu option is highlighted only when the consulting page is loaded.

EXAMPLE:

http://www.webbedenvironments.com

  • + Share This
  • 🔖 Save To Your Account