IS 337: Website Administration

Assignment 11: Highlighted Menu Item

A Cheap CSS Trick

Website visitors like to know where they're at on a website. A common way to do this is to hightlight the menu item that corresponds to the current page.

The department's website does this; the menu item for the current page is not only highlighted, it's also not a link (at the great insistence of then-chair Keith Vander Linden). Keeping it a link can be confusing to some users (perhaps to certain people who feel strongly about this?).

This approach requires either lots of hand coding or dynamic generation. For static (or near static) webpages, this can be annoying or not possible.

So the college and my Website of Pete and Pete use a CSS trick. Each menu item is given its own class. On each page, the <body> tag is classed with the same class as the menu item for the page. Then, in the CSS, you can highlight with selectors like body#home li#home.

Try It

Create a five-page website with a five-item menu. Use this CSS trick to highlight menu items.

The content for each page can be anything you want (including "lorem ipsum" text).

Submit

Publish on webpub/yardley. Submit a URL to the first page as Assignment 11 on KnightVision.

Creative © 2007 Calvin College and Jeremy D. Frens.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.