CSS Navigation Bars

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.

• Home
• Products
• About
• Contact

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
}

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;
}

Our navigation bar is almost complete. We will put some finishing touches such as centering the text, adding a border between the menu items, and creating 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.