1. Technology

CSS Navigation Bar

Use CSS and HTML to Create a Navigation Bar for Your Website

By

The advantage of using CSS to create navigation bars for your website is that you can create dynamic and interactive navigation bars without any special scripting. All you need to know is a little HTML and a little CSS to create a functional and stylish CSS navigation bar.

Click on the following link to see an example CSS navigation bar.

Creating the HTML for a CSS Navigation Bar

The first thing you need is the HTML. This is a simple unordered list. The only thing special about this HTML block is the ID (highlighted below) on the list. This allows you to have other unordered lists on your web page that will not be automatically turned into CSS navigation bars.

<ul id="navigation-bar">
  <li><a href="/index.html">Home</a></li>
  <li><a href="/products/index.html">Products</a></li>
  <li><a href="/services/index.html">Services</a></li>
  <li><a href="/press/index.html">Press</a></li>
  <li><a href="/about/index.html">About</a></li>
</ul>

The CSS is Where this Navigation Bar is Special

If you leave your list as plain HTML, it will be just a boring unordered list. But by adding a few lines of CSS, you can turn it into a fancy CSS navigation bar. First we need to get rid of the bullets and reset the browser margin and padding settings on the UL list tag:

#navigation-bar {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

The CSS style property list-style is a shorthand style property that can combine multiple styles into one. In this case, it is only defining the list-style-type. The CSS style list-style-type: none; tells the browser that there should be no bullets or numbers on the list.

Inline List Items Create the Horizontal CSS Navigation Bar

Once you've got the basics of your list, you need to convert the list items (LI tags) to display inline rather than as a block. This puts them all on one line and you have a horizontal list.

#navigation-bar li {
  display: inline;
  float: left;
}
#navigation-bar li a {
  width: 15em;
  padding: 0.5em 1em;
  text-decoration: none;
}

The display style property converts the block element LI into an inline element. This makes the list elements line up on the same line. I also like to add the float style property so that all the list items line up next to one another. Be sure to clear the float in the first element after your list or set the width of your #navigation-bar list to 100%;

The #navigation-bar li a style property gives each list item a width and some padding to make them easier to click on. Plus, since this is a CSS navigation bar, I removed the underlines from the links with the text-decoration: none; line.

One Last Feature for a Simple CSS Navigation Bar

The last thing I added to my simple CSS navigation bar was to turn the underlines back one when you hover over the links. This makes it even more obvious to people that this is a navigation bar:

#navigation-bar li a:hover {
  text-decoration: underline;
}

But you can also add background and foreground colors to your list, add borders, change the margin and padding, and do other things to make your CSS navigation bar better fit your site.

©2014 About.com. All rights reserved.