How to make a Horizontal Navigation Bar with Link Rollover State using XHTML/CSS
Guide Overview
The purpose of this guide is to show how a horizontal navigation bar with a link "Roll Over" state can be achieved using XHTML/CSS without the use of tables, images, Javascript, or any other scripting manipulation. The following example validates according to W3C standards, and is compatible with all modern browsers.
Instructions
- Open up Notepad or your preferred text editor.
- Copy and Paste the following code into your text editor of choice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Horizontal Navigation Bar w/Rollover Effect</title> <style type="text/css"> <!-- #navbar ul { margin: 0; padding: 5px; list-style-type: none; text-align: center; background-color: #000; } #navbar ul li { display: inline; } #navbar ul li a { text-decoration: none; padding: .2em 1em; color: #fff; background-color: #000; } #navbar ul li a:hover { color: #000; background-color: #fff; } --> </style> </head> <body> <div id="navbar"> <ul> <li><a href="#">LinkHere</a></li> <li><a href="#">LinkHere</a></li> <li><a href="#">LinkHere</a></li> <li><a href="#">LinkHere</a></li> <li><a href="#">LinkHere</a></li> </ul> </div> </body> </html>
- Click File ---> Save as...
In Notepad, change the Save as type to All Files. Give your file a name with the extension .html and save it to the directory of your choice.
- Now, open the new .html file in your browser to see how it looks.
Breaking down the CSS
#navbar ul {
margin: 0;
padding: 5px; /* Set margin and padding for cross browser consistency. */
list-style-type: none; /* Needed to eliminate list item marker */
text-align: center; /* Centers navigation bar */
background-color: #000; /* Set as desired */
}
#navbar ul li {
display: inline; /* Needed to create horizontal effect */
}
#navbar ul li a {
text-decoration: none; /* The setting of "none" allows the link to not be underlined. This is up to user preference. */
padding: .2em 1em; /* Gives the link space inside it's individual block. */
color: #fff; /* Set as desired */
background-color: #000; /* Set as desired */
}
#navbar ul li a:hover {
color: #000;
background-color: #fff; /* Both of these values create the "Rollover effect, Set as desired */
}
This list as is can be modified to give many different visual results. Try changing the color values, add borders, or adjust padding and margin values.
A look at the XHTML
<body>
<div id="navbar">
<ul>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
</ul>
</div>
</body>
In place of the "#" symbols shown in the example, are where your links will go, and since each link is in it's own block element, the size of each link and it's rollover effect are determined automatically by the length of the text where "LinkHere" is shown.
Back to top
