CSS Navigation Menus Tutorial Author - Jacorre (http://www.jacorre.com)

Are you looking to create navigation menus using CSS? Are you looking to use different styles for your navigation menus? This tutorial will teach you how to create different menu styles for a main menu, submenu, and footer menu.

STEP ONE
First, we have to create the html for the actual menus. The following html is for the main menu. Take note that the id is called "main-menu" for the div . Also, take note that the Resources link has a class called "active":

<div id="main-menu"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="services.htm">Services</a></li> <li><a href="portfolio.htm">Portfolio</a></li> <li><a class="active" href="resources.htm">Resources</a></li> <li><a href="contact.htm">Contact</a></li> </ul> </div>

The following html is for the submenu. Take note that the class is called "submenu" for the unordered list. Also, take note that the Tutorials link has a class called "active":

<ul class="submenu"> <li><a class="active" href="tutorials.htm">Tutorials</a></li> <li><a href="downloads.htm">Downloads</a></li> <li><a href="affiliates.htm">Affiliates</a></li> <li><a href="links.htm">Links</a></li> </ul>

The following html is for the footer. Take note that the id is called "footer" for the div:

<div id="footer"> <a href="terms.htm">Terms of Use </a> | <a href="privacy.htm">Privacy Policy </a> </div>

STEP TWO
Now that we have the html, we need to create the CSS to style each navigation menu. The following CSS is for the main menu:

/* Remove all margin and padding from the unordered list in the main menu. */ #main-menu ul { margin: 0px; padding: 0px; } /* Remove bullets for each list item. Make each list item go horizontal instead of vertical. Add 5 pixels of margin to the left and right sides of each list item to space them away from each other. */ #main-menu li { list-style-type: none; display: inline; margin: 0 5px 0 5px; } /* Links within each list item will appear with white text and the text will not be underlined. */ #main-menu li a { color: #FFFFFF; text-decoration: none; } /* When the mouse hovers over a link, it will appear with brownish yellow text and the text will be underlined. Any links with a class of active will also appear the same way. */ #main-menu li a.active, #main-menu a:hover { text-decoration: underline; color: #D9CD60; }

This should be the result for the main menu:



So as you can see, if you're on the Resources page, it will display in a different color and be underlined. If you were on the Contact page, you would add the class of "active" to the Contact link.

STEP THREE
The following CSS is for the submenu:

/* Set margin to 0 and add 20 pixels of padding to the bottom and 10 pixels of padding to the left of the unordered list. Also, remove bullets from the unordered list. */ .pages { margin: 0px; padding: 0 0 20px 10px; list-style: none; } /* Add 20 pixels of padding to the left of each list item. This will give enough space for the 16 pixel wide page icon we want to display. Next, display the page icon image as the bullet image for each list item. This image should not repeat itself and its horizontal position should be centered. */ .pages li { padding-left: 20px; background-image: url(../images/page-icon.gif); background-repeat: no-repeat; background-position: 0px; } /* Links within each list item will appear with a brownish color text. Because we haven't defined any text decoration, the default is underlined. */ .pages li a { color: #625412; } /* When the mouse hovers over a link, it will appear with brownish yellow text. Any links with a class of active will also appear the same way. */ .page li a.active, .pages li a:hover { color: #95810A; }

This should be the result for the submenu:



So as you can see, if you're on the Tutorials page, it will display in a different color. If you were on the Downloads page, you would add the class of "active" to the Downloads link.

The reason why I created it as a class is because I can use this style multiple times on a page. So if I wanted to create another unordered list, I could use the same styles for it. That's the difference between using an id and a class. An id is used only once on a page whereas a class can be used multiple times on a page.

STEP FOUR
The following CSS is for the footer:

/* Links within the footer will appear with white text and the font size will be 95%. Because we haven't defined any text decoration, the default is underlined. */ #footer a { color: #FFFFFF; font-size: 95%; } /* When the mouse hovers over a link in the footer, it will appear with a slightly different brownish yellow text compared to the main menu and the text will not be underlined. */ #footer a:hover { color: #E9D766; text-decoration: none; }

This should be the result for the footer:



There you have it! Three different menus, each with their own unique styles. Enjoy!