General Reference | Current Classes

Web Design

Simple Navbars using CSS

Introduction

Menu 1: Vertical

The first navbar will be vertical and look like this:

1. Launch Dreamweaver and create a new HTML document. Save it as yourName_navbars.html.
2. In the body, create an unordered list with the following items: Home, What's New, About Us, FAQ , and Contact. Highlight each item in turn and turn it into a 'dummy' link (<a href="#">). Surround the list with a <div> tag called "navigation." This will become the navigation menu. It should look something like this:

   <ul id="navigation">
     <li><a href="#">Home</a></li>
     <li><a href="#">What's New</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">FAQ</a></li>
     <li><a href="#">Contact</a></li>  
   </ul>  

3. In the head portion of your document add the <style> tags:

   <style type="text/css">
   <!--
       
    
   -->  
   </style> 

4. Copy the CSS code below and put it into the head of your HTML document between the comment tags (<!-- and -->):

   #navigation {
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     font-size: 0.8em;
     font-weight: bold;
     width: 8em;
     border-right: 1px solid #333;  
     list-style: none;
     margin: 0;
     padding: 0;  
   }

   This first style rule sets the font family, size and weight for all of the navigation menu items. Of course, you can alter these to suit your own needs. The width sets the width of the navigation menu column; by using ems the menu is expandable. If you use pixels, the menu column will remain a fixed width, but the text will get bigger and perhaps break-out of their boxes. The border is optional, just a design element. Setting the list-style to none removes the bullets in the list.
5. Now a short rule:

   #navigation li {
     margin: 0;  
   } 

   This style removes the default margins from the list items.
6. Now another big style rule:

   #navigation li a {
     display: block;
     padding: .2em .2em .2em .4em;
     border-top: 1px solid #003;
     border-left: 1px solid #369;
     border-right: 1px solid #69C;
     border-bottom: 1px solid #369;
     background-color: #036;
     color: #fff;
     text-decoration: none;
     width: 100%;  
   }

   The key line here is display: block. That particular property makes the area around the words "clickable," not just the words themselves. As a result, they look and behave more like buttons. Setting the text-decoration to none removes the default underlines on the links. Setting the width to 100% ensures that each menu item expands to the width of the menu column. Everything else determines visual style—colors, borders, and padding. All can be modified to suit your design (the borders especially are optional).
7. But we're not done quite yet:

   HTML>body #navigation li a {
     width: auto;  
   }

   This line is a hack to make sure our menus format properly in Internet Explorer.
8. Finally, we add the hover pseudo-style for rollovers. This will change the menu item colors when moused-over:

   #navigation li a:hover { 
        background-color: #69F;  }    

9. Save it and test it. Does it work?
10. Customize. Try altering the colors, fonts, sizes, etc.

Menu 2: Horizontal

The second navbar will look like this:

• Home
• What's New
• About Us
• FAQ
• Contact

1. Make a new list below your first list/navbar. You can use the same code as in Menu 1 above, except change the ID name to "navigation2." It should look like this:

   <ul id="navigation2">
     <li><a href="#">Home</a></li>
     <li><a href="#">What's New</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">FAQ</a></li>
     <li><a href="#">Contact</a></li>  
   </ul> 

    

2. Add the following code to the CSS section:

   #navigation2 {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 0.8em;
     font-weight: bold;
     margin: 0;
     padding: 0;   
     width: 100%;
     background-color: #036; 
     list-style: none;
     float:left; /* This is needed to keep the list element from collapsing */ 
   }   

   So far it's very similar to the first menu. However, there are a couple significant differences. First of all, the width of this menu is 100% because we want it to stretch across the page. We've also added a float property; this does not appear to do anything, but it's important for it keeps the list from collapsing on itself when finished.
3. Now add the following rule:

   #navigation2 li {
        float:left;
        margin: 0;
        }   

   This is the key to the whole operation; the float:left causes each menu item to line up horizontally, rather than vertically, which is normal for a list. Now let's style the links.
4. Add these rules:

   #navigation2 li a {
     display: block;
     margin: 0;
     padding: 0 2em;
     line-height: 1.8em; 
     color: #fff;
     text-decoration: none;
   }
   
   #navigation2 li a:hover {
     background-color: #69F; 
   }   

   Once again, we use the display:block to make the area around the list item "cliackable." We use line-height to give the navbar thickness (height). Colors and padding amounts can be adjusted according to your design.
5. . Save it and test it. Does it work?
6. Customize. Try altering the colors, fonts, sizes, etc.