A not-so-secret secret

This entry was posted on January 4, 2008

My new rainbow-coloured navigation has gone down very well with lots of lovely comments, even several people admitting to visiting Calm Banana just to play with the navigation. Hey, if it brings in visitors, why not? :P

As a thank you for all the kind words, I’m going to show you how I built my navigation.

It starts with a basic unordered list.

<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">extras</a></li>
<li><a href="#">domain</a></li>
<li><a href="#">links</a></li>
</ul>

To distinguish this unordered list from other unordered list I’m going to use on the site, I’ve wrapped it in a div tag with an id of “navigation”. Also, because each link is going to have a different background colour on the hover, I’m going to assign an id to each list-item.

<div id="navigation">
<ul>
<li id="home"><a href="#">home</a></li>
<li id="about"><a href="#">about</a></li>
<li id="extras"><a href="#">extras</a></li>
<li id="domain"><a href="#">domain</a></li>
<li id="links"><a href="#">links</a></li>
</ul>
</div>

And that’s it as far as structure and HTML is concerned. Nothing else is needed; well, apart from the urls for the links, but they’re not really relevant to this tutorial.

Now we just need to concentrate on the CSS needed to make the navigation more aesthetically pleasing.

#navigation {
margin:0 auto;
width:750px;
}

This centres the navigation and assigns it a width of 750 pixels, which is the width of my layout.

#navigation ul {
list-style-type:none;
padding-left:0;
}

This part removes bullets point, and resets the padding on the left of the unordered list to 0. Although I have the “global reset” (* {margin:0;padding:0;}) at the top of my stylesheet, I’ve had problems in the past with browsers still applying padding to the left of unordered lists. This deals with that.

For those of you not fully familiar with CSS, the “#navigation ul” means “every ul tag that is inside a containing element with an id of navigation”.

#navigation ul li {
display:inline;
}

This part changes the display of the list-items (inside a ul inside a containing element with an id of navigation) from “block” to “inline”, and has the effect of making the list-items appear next to each other as if they were a sentence.

Next we have the most complicated part - styling the actual links.

#navigation ul li a {
display:block;
float:left;
width:150px;
text-align:center;
height:2em;
line-height:2em;
color:#FFF;
background:#333;
text-decoration:none;
font-size:120%;
}

This intimidating piece of markup refers to all links inside list-items inside unordered lists inside containing elements with the id of navigation. Ids are (or at least should be if you do it properly) unique to each page. I only have one navigation.

display:block changes the display of the links from “inline” to “block”, which is the opposite of what we did earlier with the list-items. I did this because I want the links to be clickable in as large an area as possible. I don’t just want the text to be clickable.

If we didn’t have float:left, the links would display how a typical unordered list appears. In other words, they would be on top of each other. That’s not the intention at all, so we float them to the left and they pop back up onto one line again.

width:150px tells the browser that the links should all be 150 pixels wide. There are five links, and I want them evenly distributed. The full width of the navigation is 750 pixels, so 750 divided by five is 150.

text-align:center centres the text inside each link.

height:2em lets the browser know how tall each link should be, and line-height:2em makes sure the text inside the link is vertically-aligned to the middle.

color:#FFF and background:#333 sets the colour of the text to white and the background of each link to dark grey.

text-decoration:none gets rid of the awkward underline under each text. Underlines are good as they help distinguish the link from regular text, but with the navigation there is no regular text, and an underline is not needed to show the visitor that these are in fact clickable links.

font-size:120% makes the text in the links 120% bigger than the text in the surrounding element, which in this case is the body. It’s just there to make the links even more obvious.

That deals with most of the presentational aspects of the links, so now there’s only one more thing to sort out - what do we want to happen when a mouse hovers over a link?

We want rainbow colours!

If you’re familiar with CSS, you should be away of the :hover pseudo-selector. Do you also remember that we assigned a unique ID to each list-item? That allows us to do this:

#home a:hover {
background:#C91212;
}

With regards to each link inside a containing element with an id of home, when you hover over it, the background will change from #333 to #C91212. Because there is only one “home”, and there is only one link inside it, we know exactly what’s going to happen.

Here’s the CSS to change the hovers on the other links:

#about a:hover {
background:#ED7321;
}

#extras a:hover {
background:#F2C64E;
}

#domain a:hover {
background:#67BF24;
}

#links a:hover {
background:#3C73C7;
}

And that’s it. When I first put together this navigation, I’d neglected the “display:inline” for the #navigation ul li, which led to a very perculiar staircase effect in IE6 and IE7.

Any questions?

12 lovely people have commented

·