Simple Navigation Bar With CSS And (x)HTML

Last week I showed how you can create a simple menu using an (x)HTML list and CSS. Today I thought I’d use the same technique to create a simple navigation bar. Once again we’ll structure things with a list of links and use some CSS to turn that list into a navigation bar.

(x)HTML List

Just like last time the (x)HTML structure will be an unordered list with links inside each of the list items. In fact it’s basically the same list used in the menu example (with a different id applied) in part to show how powerful CSS can be in generating a different look to the same (x)HTML structure.


<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>


Just a typical list of links with an id of list-nav applied to allow us to specify the list in the CSS. The code as it is now will look like:

• Home
• About Us
• Services
• Products
• Contact

Styling The Navigation Bar With CSS

Let’s start by setting padding and margin on the list itself so we have things looking the same in Firefox and IE. We’ll also remove the bullets and set a width on the overall list.


ul#list-nav {
margin:20px;
padding:0;
list-style:none;
width:525px;
}


List items normally display as block level elements, but here we want them to display inline to achieve the look of a navigation bar as opposed to a menu.


ul#list-nav li {
display:inline
}


For the links we’ll again take out the underline, add a little padding, give the links the familiar green background color and white text color. We’ll also give the links a width and use 100px for each link. The key this time will be in positioning the links by floating each one left.


ul#list-menu li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
}


The navigation bar is now taking shape and should look like:

All that’s really left is to add some styling touches and also a rollover effect.

Finishing Touches

The text looks a little off up against the left egde of the bar so let’s center it. We’ll also add a white border in between the links to help differentiate where each one begins and ends.


ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
}


Here the border has only been applied to the left side of each link. This leaves a 1px border on the left edge of the overall navigation bar, but since it’s currently sitting on a white background it disappears into that background. Depending on the structure of the rest of your document this could throw the positioning of things off by 1px, but it’s easy enough to remove the border from the leftmost link if it’s an issue.

We’ll do the same thing with the rollover as last time. We’ll just change the color of the background and the color of the text itself. Naturally enough the CSS is exactly the same we used in previously when creating the rollover on the menu.


ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}


The complete navigation bar should look like:

Just as with the simple menu the navigation bar is also quite simple. In fact if you compare the code for both you’ll find that the majority is exactly the same for each. The (x)HTML is the same with the exception of the different id, as is much of the CSS. The major differences here are making the list wider since the navigation bar is wider then the menu, and changing the list items to display inline and floating the links left to get them to display next to each other instead of stacked on top of each other.

Complete Navigation Bar (x)HTML And CSS

The complete code for our simple navigation bar is:


<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}


Just as with the simple menu I hope you’ve seen how is it is to create a simple navigation bar. The (x)HTML is as simple as it can be and even the CSS isn’t too complicated. By changing the CSS a little you can easily get different size bars or different colored bars. It would also be rather simple to use an image behind the links as opposed to a block of color. The power here is really in the css. Compare how easy it was to change a menu into a navigation bar with just a few minor changes and then apply a little creativity to style your own navigation bars from a basic (x)HTML list.

Popularity: 100%

Subscribe to TheVanBlog |  Email This Post