Horizontal Navigation Lists

Choose Method: Show Code

This is an exercise in making horizontal navigation bars, using background images. You can see the example here and download the images to make it here.

Create & style List

We start with an unordered linked list.

<ul>
<li><a href="index.htm">home</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="products.htm">products</a></li>
<li><a href="services.htm">services</a></li>
<li><a href="contact.htm">contact</a></li>
</ul>

This should look like this:

Next, we start with the CSS list item style. We use display block so that we can control the list item as a block level element. Most of the list items are 150 pixels wide, so we will use that as the default. And they are 72 pixels high. We float them left so that they all line up along the horizontal.

li {
display: block;
float: left;
width: 150px;
height: 72px;
}

Style Links

Next we style the link tag <a>. Add a background colour so that we can see where the link is.

a {
background:#00ff00;
}

It will look something like this: List Stage 1

So we need to expand the <a> to fill the space. We do this by setting it to be block, and by setting the width and height to 100%.

a {
background:#00ff00;
display:block;
height:100%;
width:100%;
}

It should now look like this: List Stage 2

Add in background images

Next we need to start adding in the background images. As each image is different we need to put an id on the links to identify each of them.

<ul>
<li><a href="index.htm" id="homelink">home</a></li>
<li><a href="about.htm" id="aboutlink">about</a></li>
<li><a href="products.htm" id="productslink">products</a></li>
<li><a href="services.htm" id="serviceslink">services</a></li>
<li><a href="contact.htm" id="contactlink">contact</a></li>
</ul>

Now we can add the images to the id style for each link. The one for the home link is below. To create the rest simply change the id and the image it references.

a#homelink {
background: url(images/navbar_home.png) no-repeat center center;
}

When all the id styles are complete, the nav bar should look like this: List Stage 3

Add in hovers

The next step is to add a hover to the images. The home link style is below. Again you will need to complete this for the remaining links.

a:hover#homelink {
background: url(images/navbar_home_hover.png) no-repeat center center;
}

When all the hover styles are in place, the list will look like this and will change on the hover: List Stage 4

remove the visible links

The next step is to remove the visible links from the screen. We need to leave them in place in the code in case users are surfing with the style sheets removed or have to apply their own.

The first step is adding some spans to the html code. Surround the text only with spans with an invisible class.

<ul>
<li><a href="index.htm" id="homelink">home</a></li>
<li><a href="about.htm" id="aboutlink">about</a></li>
<li><a href="products.htm" id="productslink">products</a></li>
<li><a href="services.htm" id="serviceslink">services</a></li>
<li><a href="contact.htm" id="contactlink">contact</a></li>
</ul>

Next, create an invisible class in the CSS. This one simply makes the content so small it can't be seen but is still available to screen reader users.

.invisible{
overflow: hidden;
position: absolute;
height: 0em;
width: 0em;
}

The list is now almost complete, and looks like this: List Stage 5

Adjust widths of list items

The final part is to adjust the home and contact list item widths so that all the background can bee seen, as these are larger than the other links.

Add classes to each of the home and contact list item tags

<ul>
<li class="homelistitem"><a href="index.htm" id="homelink">home</a></li>
<li><a href="about.htm" id="aboutlink">about</a></li>
<li><a href="products.htm" id="productslink">products</a></li>
<li><a href="services.htm" id="serviceslink">services</a></li>
<li class="contactlistitem"><a href="contact.htm" id="contactlink">contact</a></li>
</ul>

Then simply set the widths for these list item classes to 165px;

li.contactlistitem, li.homelistitem {
width: 165px;
}

You now have a fully completed horizontal navigation bar. List Stage 6