COMM 223 - Introduction to Web Site Design and Construction

CSS Cheat Sheet: Menus

 

A Basic Horizontal CSS Menu
 

IMPORTANT: If you choose to use this menu, be aware that the styles applied in the code below will also impact any other ordered or unordered list that you put on the same page. You will need to style any other lists on the page with classes. Sample at the end.

Here is another menu, which is less pretty, but simpler to use.

To Create Your Menu

Create a list of your navigation names. Hit "'enter" after each one.

Link them to their pages. Put a title tag into your bulleted links like this for accessibility:

 <li><a href="index.htm" title="Home page">Home</a></li>

Convert the list to an unordered list.

Wrap the list with a <nav> tag. To make the Micro-Clearfix code below work, change the opening <nav> tag by adding a class of cf, like this:

<nav class="cf">



Copy everything below this line of 'X's into your CSS document.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.

/*The following code prevents problems with the float property we're about to use.*/

/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; }
/*Create a background color and size for menu (this will wind up being a colored line at the bottom of the menu*/
nav {
        background: #916A31;
        height: 2.3em;
        }
/*Remove bullets, set margins and display horizontaly*/
ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        }
/*Optional: create a background color for the menu bar (covers most of the menu)*/
ul {
        background: #D5973C;
        height: 2em;
        width: 100%;
        }
/*Decorate the menu*/
li a {
display: block; line-height: 2em; padding: 0 1em; color: white; text-decoration: none; }
/*Optional: Create roll-over effect*/
li a:hover {
        background: #916A31; /*same as nav background*/
        height: 2em;
        padding-top: .3em;
        position: relative;
        top: -.3em;
        border-radius: .3em .3em 0 0;
        }

/*Optional: Having a menu item (from above menu) indicate the page you are on*/

/*Add the class comment to the menu item on the individual page in question (for instance, on the home page put it in this line)*/
<li><a href="home.htm" title="Home page" class="current">Home</a></li>
/*Then, add this code to the CSS (modify to taste)*/
.current, a:hover.current  {
        background: #AD9B7F;
        color: #eee;
        padding-top: .3em;
        border-radius: .3em .3em 0 0;
        position: relative;
        top: -.3em;
        border-bottom: .3em solid #917F63;
        cursor: default;
        }

/*If you are using different colors you will have to address that in the code above.*/.

STOP COPYING THE CSS HERE.

 
To add an ordered or unordered list to a page that uses this menu, you will have to customize the lists with classes Otherwise the styles of the menu will carry over into your lists! Here is some sample code for the work-around.
   
HTML CSS

<ul class="linkos"> 				
   <li class="itemo1">red</li>                 
   <li class="itemo2">blue</li>                 
   <li class="itemo3">green</li>                 
   <li class="itemo4">brown</li>                 
   <li class="itemo5">pink</li> 			
</ul>

.linkos {         
   margin-left: 100px;         
   background: white;               
}

 .linkos li {         
   float: none;         
   list-style:circle;         
}      
..itemo1 {     
   color: red; 
}
 .itemo2 {     
   color: blue;
 }
 .itemo3 {     
   color: green; 
}
 .itemo4 {    
   color: brown; 
} 
.itemo5 {     
color: hotpink; 
}
 

 

To make a simple, and centered, horizontal menu. Do this

 

HTML

 

CSS

 

<nav id = "menu-outer">  
   <div class="table">     
     <ul id="horizontal-list">          
       <li><a href="#">Your Menu</a></li>          
       <li><a href="#">Your Menu</a></li>         
       <li><a href="#">Your Menu</a></li>         
       <li><a href="#">Your Menu</a></li>         
       <li><a href="#">Your Menu</a></li>     
     </ul>     
   </div> 
</nav>
#menu-outer { 	
height: 84px; 
} 

.table { 	
display: table;  /*Allows the centering to work*/ 	
margin: 0 auto 0 auto; 
} 

#horizontal-list ul{ 	
min-width: 696px; 	
list-style: none; 	
padding-top: 20px; 	
} 

#horizontal-list li { 		
display: inline; 	
} 

#horizontal-list li a {     
text-decoration: none;     
color: brown;     
border: black 2px solid;     
text-transform:uppercase;     
padding: 8px;     
float: left;     
background-color: aliceblue;     
margin-top: 15px; 
}