No replies to this topic

[Joe]

Ok so this little tutorial will show users how to configure a roll over navigation bar. To begin this tutorial I recommend the user be familiar with CSS classes as well as creating corresponding html, though this is not necessary if you just want to edit the codes placed. Please note, those who use php in order to include their navigation page in their header will have to make several modifications to their script for this script to work, this is primarily made for those people just trying to get a simple rollover menu that isn't complex.

Ok so lets say our navigation bar contains the following html with the corresponding css:

HTML

<ul> <li><a href="./index.html">Home</a></li> <li><a href="./contact.html">Contact Us</a></li> <li><a href="./about.html">About Us</a></li> </ul>

CSS

ul {display:inline;}
li {display:inline;}
a, a:visited {color:#00ff00;}
a:hover {color:#003300;}

The previous codes will make it so that the unordered (bullet) list background are all the same cover and when you scroll over a link it changes colors, what it fails to do is change the color of the page you are on to the color you get when you scroll over a link. To do that we'll have to modify each page slightly and add a line to our CSS.

HTML

<ul>
 <li class="active"><a href="./index.html">Home</a></li>
 <li><a href="./contact.html">Contact Us</a></li>
 <li><a href="./about.html">About Us</a></li>
</ul>

notice the change in class, now we need to specify what that class does so we add some to our css. Also keep in mind that for every page you do you will need to change the html active class to the page that is active, so when you go to contact.html file delete the class="active" from the first li and put it in the second so that the "Contact Us" link color is highlighted rather than the "Home".

CSS

ul {display:inline;}
li {display:inline;}
a, a:visited {color:#00ff00;}
a:hover {color:#003300;}
.active a{color:#003300;}

notice how we added the .active a, this means that anything that contains a link, and is marked as the active class will follow the same color as if it were being hovered over all the time.

Any questions, comments, or errors with this script (as I haven't really tested it) please post.