hguser hguser - 2 months ago 7
HTML Question

highlight the navigation menu for the current page

In a page with some navigation links,I want the link of the current page are hightlighted,just like this:

alt text

The link "HTML Attributes" is highlighted(bolded) since this link will take one to the current page.

I know this can be implemented manually(just hightlighted the according link,but is there some smart way? highlight the right link dynamically and automatically?


You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically...

That probably didn't make much sense, so here's an example:

<body id="index">
<div id="menu">
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
</div> <!-- menu -->

In the page1.html, you would set the id of the body to: id="page1".

Finally in your CSS you have something like the following:

#index #menu .index, #page1 #menu .page1 {
  font-weight: bold;

You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.

It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.