Creating a horizontal menu tutorial
It is very important that your visitors be able to navigate your site easily. A web site with rambling or confusing navigation won't fare very well. The menu or, navigation bar, is usually at the top or side of a web page. Their are examples of both on this page. Visitors to your site are accustomed to this and that's where they will look for your menu. Its better to stick with what works, so don't deviate from the norm.A horizontal menu
The most common navigation, I think, is the horizontal menu at the top of a page. The best way to make this menu bar is with a modified list. So, what's a modified list? A modified list is nothing more than a basic html list that's been, guess what, modified.
The html for the menu bar
This is the basic html for the horizontal menu bar.
<div style="text-align"center" class="navbar">
<ul><li><a href="/index.html">Home</a></li>
<li><a href="/page.html">Another page</a></li></ul>
</div>
The css for the menu bar.
- The list-style-type:none removes any decoration from the list (bulletts).
- The display: inline creates the horizontal menu.
- The font-variant:small-caps changes the text to all uppercase letters.
- Text-decoration:none removes the underline in the a:link.
- font-size is the size of the text in the menu.
- font-weight is the boldness of the text.
- a:link is the color of the unvisited link.
- a:visited is the link color once it has been clicked on.
- a:hover is the color of the background when you hold the pointer over the link.
padding:0;
margin:0;
list-style-type:none;}
.navbar li {
list-style-type: none;
display: inline;
font-size:12px;
font-variant:small-caps;
font-weight:bold;}
.navbar li a {
text-decoration:none;
padding:0.2em 0.6em;
border-right:1px solid #999;}
.navbar li a:link {
color:#000099;
background:#FFFFFF;}
.navbar li a:visited {
color: #CC33FF;
background:#FFFFFF;}
.navbar li a:hover {
background:#CCCCCC;
color:#2F4F4F;}
Copy the css for the .navbar to your .css file and save. Next add the html for the menu division right below the header division in your page.
