Vertical Navigation
This is a vertical navigation treatment created exclusively with CSS. There is absolutely no Javascript in place here. The inspiration and learning for this came from Eric Meyer's CSS Edge along with Max Design's Listutorial. According to Max Design, this has been tested on all major platforms. There may be some bugs on Opera but that has so few users, I am not too concerned about that at present.
This vertical navigation scheme is formatted so that:
- The name of the page that the user is on is weight="bold" and color="white".
- The background color of the "current page" is different than the other background colors, indicating the user's present location.
- It is not a live link, since its silly to have a link to the page you are on.
When you hover over the other live links, the background color and, in this example, the font changes color. The color change is of course an option. Click the "Go To Subnav" link to see the sub-navigation treatment. Check it out below.
The markup for the navigation you see above is as follows. To see the markup for the sub-navigation, click the "Go to Subnav" link.
Download Style Sheet
<div id="navheader">
<ul>
<li id="current"><a>main nav</a></li>
<li><a href="vertsubnav.htm">go to subnav</a></li>
<li><a href="#">main nav 3</a></li>
<li><a href="#">main nav 4</a></li>
<li><a href="#">main nav "n"</a></li>
</ul>
</div>
