CSS Navigation Bars
From Docupedia
Written By: Eskay
Date: 01/27/2007
Contents |
Overview
I thought I would start my first "how to" with something basic, Navigation Bars. After many attempts I have come to find one that I am very happy with. In this article I will include 2 of the most common Nav bars (CSS Block Navigation Menus & CSS Image Navigation Menus)
CSS Block Navigation Menu
The CSS
IE Hack: The display:inline; in the li is needed for IE 6 and below
Important: Make sure your total width is not larger then the width of #nav. Remember that total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. In the example below you will notice that 70 + 150 + 98 + 144 + 143 + 161 + 119 = 885, we have no margin or borders, but we do have padding: 5px. Which means each element has a top, right, bottom, left padding of 5px. We only care about left and right for width, so a total padding of 10px for each an element, 10 x 7 = 70. Therefore, 885 + 70 = 955, which is the width of #nav.
body{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size:62.5%; /* Sets 1.2em to 12px */ }
#nav { width: 955px; margin: 0; padding: 0; list-style-type: none; font-size:1.2em; }
#nav li { display:inline; margin: 0; padding: 0; }
#nav li a { display: block; float:left; padding:5px; background:#0a4d69; text-align:center; text-decoration:none; color:#fff; }
#nav li a:hover, #nav li a#current { background:#d35e1c; }
#navHome a { width: 70px;}
#navEventscalendar a { width: 150px; }
#navFacilities a { width: 98px; }
#navEventservices a { width: 144px; }
#navTrainingcamps a { width: 143px; }
#navAccommodations a { width: 161px; }
#navContact a { width: 119px; }
.clearfix {display: inline-block;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
The HTML
<ul id="nav" class="clearfix"> <li id="navHome"><a href="#" id="current">Home</a></li> <li id="navEventscalendar"><a href="#">Events Calendar</a></li> <li id="navFacilities"><a href="#">Facilities</a></li> <li id="navEventservices"><a href="#">Event Services</a></li> <li id="navTrainingcamps"><a href="#">Training Camps</a></li> <li id="navAccommodations"><a href="#">Accommodations</a></li> <li id="navContact"><a href="#">Contact Us</a></li> </ul>
Example
To view and example click here:
CSS Image Navigation Menu
If you want your navigation menu to look unique and professional you should use images with custom fonts for a navigation menu. I have taken the first example and applied slight modifications.
The CSS
Since we used images for our navigation we want to keep the text in the XHTML for SEO purpose. A simple fix for this is to set the text-indent to -2000px thus removing it from the screen but keeping it in our markup.
For a faster load time on the rollover I made the menu item and rollover one image (example below) and just modified the background-position.
#nav { width: 955px; margin: 0; padding: 0; list-style-type: none; }
#nav li { display: inline; padding: 0; text-indent:-2000px; }
#nav li a { display: block; float:left; padding: 0; height: 28px; }
#nav li a:hover, #nav li a#current { background-position: 0 -27px; }
#navHome a { background:url(images/menu/home.gif); width: 80px;}
#navEventscalendar a { background:url(images/menu/eventscalendar.gif); width: 160px; }
#navFacilities a { background:url(images/menu/facilities.gif); width: 108px; }
#navEventservices a { background:url(images/menu/eventservices.gif); width: 154px; }
#navTrainingcamps a { background:url(images/menu/trainingcamps.gif); width: 153px; }
#navAccommodations a { background:url(images/menu/accommodations.gif); width: 171px; }
#navContact a { background:url(images/menu/contactus.gif); width: 129px; }
.clearfix {display: inline-block;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
The HTML
Same as above example
<ul id="nav" class="clearfix"> <li id="navHome"><a href="#" id="current">Home</a></li> <li id="navEventscalendar"><a href="#">Events Calendar</a></li> <li id="navFacilities"><a href="#">Facilities</a></li> <li id="navEventservices"><a href="#">Event Services</a></li> <li id="navTrainingcamps"><a href="#">Training Camps</a></li> <li id="navAccommodations"><a href="#">Accommodations</a></li> <li id="navContact"><a href="#">Contact Us</a></li> </ul>
Example
To view and example click here:
Common Mistakes
Too Much Markup
Many people wrap the ul with a div and set the width on the div. This is unnecessary because the ul tags default display is block.
Not Clearing Float
In the examples above, make sure you clear the ul because its children are being floated. You always have to clear the parent of a floated item.
In the examples I provided I chose to use a common easy clear method (.clearfix), but there are many different ways to clear a float. An alternative to the easy clear method is to apply float:left to the li, thus removing the display:inline and clearing the li. And using overflow: auto; on #nav, thus clearing the ul. Both ways are valid and they both work.
For more info on clearing floats read this article.
Browser Compatibility
Tested browsers to date:
Firefox v1.5, Firefox v2.0, IE v6.0, IE v7.0, Opera v9.1, Konqueor 3.5.5, Safari 2.0.4 (x86)
Standards Compliance
All examples receive 0 validation errors according to the W3C Markup Validation Service
- Eskay 17:03, 26 January 2007 (EST)
