Lecture Notes

HCI201 -- Lecture 7

 

Website Navigation

Horizontal Navigation Menu

To create a horizontal menu, work the same as you did with the vertical menu. Start with the outside and work in. Since I want my navigation to be centered over the banner, I use the auto value on the right and left margins. If you wanted it to start on the left, then you would float it to the left.

ul#navigation {
   margin: 0;
   padding: 0;
   width: 600px;
   margin-right: auto; margin-left: auto;
   background-color: green;
   font-size: 85%;
}

But the secret to the horizontal navigation menu is in the list items. List items are normally block elements, which means that they will have a newline placed before and after each one. By switching the display from block to inline, you force the list elements to line up next to one another.

ul#navigation li { display: inline; padding-left: 1px;}

I treated the links exactly like I treated them in the vertical navigation menu, with the same colors and text decoration.

ul#navigation li a {
display: inline;
text-decoration: none;
padding: .30em 1.8em;
border-bottom: solid 1px #fff;
border-right: solid 1px #fff; }

a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color: #000; }

You Are Here

One other aspect of this XHTML I didn't mention is the "urHere" id. If you want to modify your menu to indicate the current location of your users, simply use this id to define a different background color or other designation.

ul#navigation li#urHere a { background-color: #9acd32; }

» With horizontal navigation added, here is our Pet Poop, Inc. example.

If you put these styles together on your page, you can create a horizontal or vertical menu bar that works with your site but is quick to download and very easy to update in the future. Using XHTML+CSS to style your lists turns your lists into a very powerful tool for design.

 

Posted: 4-15-2010