I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Interface Elements: Simple Navigation Bar

css / navigation

Estimated reading time: 4 minutes, 47 seconds

At its simplest level, a navigation bar for a website is nothing more than a list of pages that the user can visit in any order. It follows that the markup should reflect that. A simple example would be:

<ul id="nav">
<li><a href="index.html">Home</a>
<li><a href="about.html">About Us</a>
<li><a href="contact.html">Contact Us</a>
<li><a href="products.html">Our Products</a>
<li><a href="order.html">Place An Order</a>
<li><a href="privacy.html">Your Privacy</a>

To comprehend what we are about to do, it is vital to understand the structure of our document. The <ul> tag is a block-display element that is a container for a series of <li> elements. If the <ul> tag could be thought of as a parent, the <li> elements inside of it could be considered its children: the <ul> element is required to give “birth” to them, and embraces its six children as a group.

Each <li> element is displayed as a CSS list-item, one per line. Each <li> contains a single <a> link. Each link has some text content.

Because of the default property of each <li> element, each link appears on a separate line. As a first step, let’s change that to create a horizontal navigation bar. While we could write a style for <li> elements, that would be far too broad a rule, affecting <li> elements in every context, whether inside an <ol> or <ul> tag. Neither is it effective to write an inline style for each <li>. Instead, we’ll use the fact that the parent <ul> has a unique id and use a descendant selector to make our style specific:

ul#nav li { display: inline; }

That rule makes each <li> display side-by-side. Now, however, the text of each link runs into the next: we need to add a little space to each. Again, we will be specific, and use a series of descendant selectors:

ul#nav li a { padding-left: 1em; padding-right: 1em; }

This spaces the links out nicely. Before we completed this step, you may have noticed that the first list item was indented slightly from the left. This is a leftover from the browser’s default CSS: by definition, an ordered or unordered list is slightly indented from the left. To remove this indentation, we must work on the <ul> itself:

ul#nav { padding-left: 0; }

You may find that you will also need to set margin-left and text-indent to 0 for this element, as different browsers use different properties to indent lists.

If we wanted to have a vertical line divide the links from each other, we don’t add characters or markup: our rule is to avoid adding extra content or elements, especially when they are only being added for presentational purposes. Instead, we will use CSS on each <li> element, adding to the style declaration we already have in place:

ul#nav li { display: inline; border-left: 1px solid black; }

The links in our nab bar still look a little plain. We can change their appearance, with the understanding that the more we alter the presentation of links the less likely they are to be recognized as such:

ul#nav li a {
color: #000; text-decoration: none;
font-family: Arial Narrow, Arial, sans-serif;

It is also common to add a hover effect to links in a navigation bar. We will do this by writing a style declaration for a pseudo selector to the links, effectively reversing the colours:

ul#nav li a:hover {
color: #fff; background: #000;

When we specify :hover for an element we should also specify :focus, as the disabled won't be using a mouse to navigate your document, but a keyboard, which does not hover over links. So the declaration has a group selector added to it:

ul#nav li a:hover, ul#nav li a:focus {
color: #fff; background: #000;

You may discover that the highlight background colour that appears when you hover over each link falls just short of the divider line to its right. The cause of this is obscure: it’s not the CSS. Rather, it is to do with our HTML.

In our first discussion of I said that spaces and returns don’t matter: that the language ignores anything more than a single space and that returns without markup don’t make any difference. That remains true… except in this case.

Because of the returns between each line of our <li> elements, the browser inserts a space at the end of each list items. It is these spaces that you are seeing outside the highlight area. To get rid of them, we can simply eliminate the returns between our list items:

<ul id="nav"><li><a href="index.html">Home</a><li><a href="about.html">About Us</a><li><a href="contact.html">Contact Us</a><li><a href="products.html">Our Products</a><li><a href="order.html">Place An Order</a><li><a href="privacy.html">Your Privacy</a></ul>

This works well, except for one final niggling problem. We are using border-left to show divisions between navigational elements. The first link – Home – should therefore not have a line to its left. It is a simple to solve this with CSS2:

ul#nav li:first-child { border-left: none; }

The first <li> element is the first child of its parent <ul> – we have simply crafted an exception to the general rule of list items having a border to their left.

Finally, if you wanted the navigational bar to be centred as a whole on the page, remember that the unordered list is a box of its own:

ul#nav { text-align: center; }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.