Search code examples
htmlhighlight

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?

Solution

  • 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">
 <ul>
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
 </ul>
</div> <!-- menu -->
</body>

    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.