Did you find this useful?
Socialize it today.


CSS Navigation Bars

Sunday, April 01, 2012

tags CSS

Having an easy to use navigation tool on your website is very important in making your site user and SEO friendly. Unless you are coding your site with a server side scripting language such as ASP.NET, you will need the help of CSS so that you can transform your plain HTML menus into clean and crisp navigation bars. We can design our navigation bar using a variety of methods, but using a list element is by far the most flexible tool to use.


Start with an HTML List

The base of our navigation bar is an HTML list, specifically an unordered list. Here is an example:


<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>


Without specifying any CSS, we have a simple list of items.


Apply CSS Styling

We can start by applying values to padding, margin, width, and list-style. This will ensure that we can get a consistent look across modern browsers.


ul#navbar {
padding:0px;
margin:0px;
width:420px;
list-style:none;}


Next, we need to style the list items. List items are normally block level elements. Since we are implementing a vertical navigation bar, we want them to display inline instead.


ul#navbar li {
display:inline
}


Our navigation bar is starting to take shape. Here is what it looks like so far.


For the links we will remove the standard, default underline, add some padding, apply a background color, and white text color. We will also specify a width for each link. Finally, float the items to the left.


ul#navbar li a {
text-decoration:none;
padding:10px 0px;
width:100px;
background:#666666;
color:#ffffff;
float:left; }


Here are the results so far:


Our navigation bar is almost complete. We will put some finishing touches such as centering the text, add a border between the menu items, and create a hover effect.


ul#navbar li a {text-align:center;border-left:1px solid #ffffff;}
ul#navbar li a:hover {background:#cccccc;color:#333333}



With a few minor changes, you can create a variety of different navigation bars for your web projects.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS: The Complete Reference HTML CSS and JavaScript Editor CSS: The Missing Manual