This is a basic test page. You can read the article here.
First we'll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway:
<ul id="navlist">
<li><a href="index.html" >Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>
Next we need to add a unique class or id (doesn't really matter which) to each of the section pages:
<ul id="navlist">
<li><a href="index.html" id="homenav">Home</a></li>
<li><a href="products.html" id ="prodnav">Products</a></li>
<li><a href="faq.html" id ="faqnav">FAQ</a></li>
<li><a href="contact.html" id ="connav">contact us</a></li>
</ul>
Before we leave the HTML, on each of the section pages we need to add a unique id to the body tag:
<body id="home">This allows us to specify the highlighted tab. Next we add the CSS for the menu (this is a simplified version). This has been taken directly from List-o-Matic, with the Zeldman style, to save time:
#navcontainer ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a {
background: #fff;
width: 78px;
height: 18px;
border-top: 1px solid #f5d7b4;
border-left: 1px solid #f5d7b4;
border-bottom: 1px solid #f5d7b4;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#navcontainer ul li a:hover {
color: #930;
background: #f5d7b4;
}
Finally, we add the css rules to highlight the correct tab. As all of these instances use the same rules, we can just list them all, seperated by commas, and the browser will apply the rules to every instance. These overrule the previous styles wherever <body id="home"> is on the same page as <a id=“homenav'“>.
body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
color: #fff;
background: #930;
}
This can also be used to introduce different coloured sections. Handy if the layout positioning stays similar and all you want to do is change the colour theme.