Ninique's Minidollz

Tutorials - Navigation with CSS Lists

There are many ways to make the navigation on a website, but one of the most versatile and semantic way is with CSS lists. This tutorial will show you how to do this with different examples of things you can do. You should already know basic HTML and CSS before following this tut.

Basic HTML Code

Here's the basic code for a navigation list. It's pretty much just a normal unbulleted list but with links in it. I gave an id to the UL element so we can use CSS on it. Of course you can have as many or as little links in it as you want.

<ul id="nav">
	<li><a href="home.html">Home</a></li>
	<li><a href="dollz.html">Dollz</a></li>

	<li><a href=" bases.html">Bases</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="links.html">Links</a></li>

</ul>

Vertical Navigation

Mmk, now we're going to style the above list so it looks like a navigation bar and not just a simple list. This is what we're going for:

The following code goes in your CSS. I've put little comments next to each line so you know what each thing does. Of course, you can make this look however you want and with any colour that matches your site. This is just an example.

#nav
	{
	margin: 0;	/* removes margins and padding the browser puts to lists*/
	padding: 0;
	list-style-type: none;	/* removes bullets */
	}
	
	
#nav a 
	{
	display:block;		/* prevents the list from collapsing together*/
	width: 110px;		/* sets the width of the list*/
	border: 1px solid #678DB2;	/* sets the border*/
	background: #B7D2E6;	/* sets the background*/
	padding-top: 2px;	/* puts some space between the border and the text*/
	padding-bottom: 2px;
	margin-top: 2px;	/* adds a bit of space between list items*/
	color: #506D8A;		/* sets font attributes for the links */
	text-decoration: none;	
	font-size: 9pt;
	font-weight: bold;
	text-align: center;
	}
	
#nav a:hover			/* sets what happens when you roll over the link*/
	{
	background: #506D8A;
	color: #ffffff;
	}

Horizontal Navigation

With the same HTML code, and just a few changes in your CSS, you can make your list into a horizontal bar instead of a vertical list. Here I've also used a background for the entire bar and for the rollovers.

Here's the CSS code for it:

#nav
	{
	margin: 0;	/* removes margins and padding the browser puts in */
	padding: 0;
	list-style-type: none;		/* removes bullets */
	border: 1px solid #4D4971;	/* adds a border and bg image to the entire bar */
	background: url('bg_1.png');
	width: 350px;		/* sets the width of the entire nav bar */
	text-align: center;	/* aligns all the links to be centered */
	}
	
#nav li
	{ display: inline; }	/* makes the list horizontal */
	
#nav a 
	{
	padding: 1px 10px;  /* adds 1px space at the top and bottom and 10px left and right */
	color: #4D4971;	    /* sets font attributes for the links*/
	text-decoration: none;	
	font-weight: bold;
	text-align: center;
	}
	
#nav a:hover
	{
	background: url('bg_2.png'); /* sets background image on rollover */
	color: #ffffff;
	}
	

Image Rollovers

With the same list, you can also make an image navigation with rollovers, without the use of imagemaps, slices or complicated javascripts.

This technique gives great results, but it's also a little more complicated. You'll need to make 2 images (with the text on it) for each link: one for the normal state and one for the rollover, and they all have to be the same size. You also need to make a few changes to the basic HTML from above: add some spans inside the links so we can hide the text later, and add a class to each list item.

<ul id="nav">
	<li><a class="home" href="home.html"><span>Home</span></a></li>

	<li><a class="dollz" href="dollz.html"><span>Dollz</span></a></li>
	<li><a class="bases" href="bases.html"><span>Bases</span></a></li>

	<li><a class="about" href="about.html"><span>About</span></a></li>
	<li><a class="links" href="links.html"><span>Links</span></a></li>

</ul> 

Now for the CSS:

#nav
	{
	margin: 0;      /* removes margins and padding the browser puts in */
        padding: 0;
        list-style-type: none;          /* removes bullets */
	}
	
#nav
	{
	display: block;	/* prevents the list from collapsing */
	width: 100px;	/* sets the width and height of your images */
	height: 40px;
	}
	
#nav a span
	{ display: none; }	/* hides the text */
	
/* ----Sets the normal and rollover images for each link----- */	
	
#nav a.home
	{ background: url('home_link.png'); }	
	
#nav a.home:hover
	{ background: url('home_hover.png'); }
	
#nav a.dollz
	{ background: url('dollz_link.png'); }
	
#nav a.dollz:hover
	{ background: url('dollz_hover.png'); }
	
#nav a.bases
	{ background: url('bases_link.png'); }
	
#nav a.bases:hover
	{ background: url('bases_hover.png'); }
	
#nav a.about
	{ background: url('about_link.png'); }
	
#nav a.about:hover
	{ background: url('about_hover.png'); }
	
#nav a.links
	{ background: url('links_link.png'); }
	
#nav a.links:hover
	{ background: url('links_hover.png'); }

Further Readings

This tutorial was inspired by the one at Maxdesign.com. You can also find there a technique to make nested list (which is what I use on this site). Also, WellStyled.com proposes a way to prevent the lag on rollovers.