Persistent Page Indicator on Menus
For purposes of this tutorial, I will not discuss how to style a CSS menu. You'll find plenty of web tutorials that thoroughly cover that topic. Rather, I will show you how to add persistent menu highlighting or "You are Here" style to your sitewide CSS menu.
Let's say your menu looks like the one shown below:
HOME | ABOUT US | PRODUCTS | SERVICES
1) Define a CSS body and link class for each menu item like so:
body.home a.home,
body.about a.about,
body.products a.products,
body.services a.services
{
color: red;
text-decoration: underline;
background: yellow;
}
2) Add a body class to each of your web pages. In other words, on your site's home page, replace the <body> tag with <body class="home">
On your About Us page, replace the <body> tag with <body class="about"> and so on...
NOTE: To make this editable in Dreamweaver Template pages, you'll need to specify an editable tag attribute on the <body>.
3) Finally, add a class name to each link in your HTML menu like so:
<a class="home" href="index.html">HOME</a> |
<a class="about" href="about.html">ABOUT US</a> |
<a class="products" href="products.html">PRODUCTS</a> |
<a class="services" href="services.html">SERVICES</a>
Automatic menu highlighting will occur when the body and link classes match. That's pretty much all there is to it. Hope you enjoyed this short tutorial.
Related Links:
