CSS Navigation Menu
With CSS its possible to create a very light weight navigation menu. Creating your sites navigation with a CSS list and then styling it only takes a matter of minutes using two small images for our rollovers. Im going to show you how, so lets get started!
Creating a List
Firstly, lets start with the building blocks - our HTML. All we're going to do is create a basic unordered list. The HTML for this list is shown below, along with an actual example (shown first). If you just want to grab the code then scroll down to the bottom of this tutorial. Otherwise read on and i'll walk you through it.
Adding the Styles
Now we need to style the list to make it look like the example at the top of the page. We're going to call our style #nav. For our list to display the styles we need to give it the id 'nav' so they correspond. Simple enough isn't it?
Finally we add the CSS below, which when applied to the first tab 'Home' , will give it a 1px blue border down the left side to match our other tabs.
So you HTML should now look like this, with the 'id' from the #farleft style above applied to the first link - 'Home'.
All the CSS
Below is the whole CSS for you to use;
All the HTML
Below is the whole HTML code for you to use;
With CSS its possible to create a very light weight navigation menu. Creating your sites navigation with a CSS list and then styling it only takes a matter of minutes using two small images for our rollovers. Im going to show you how, so lets get started!
 |  |
Creating a List
Firstly, lets start with the building blocks - our HTML. All we're going to do is create a basic unordered list. The HTML for this list is shown below, along with an actual example (shown first). If you just want to grab the code then scroll down to the bottom of this tutorial. Otherwise read on and i'll walk you through it.
- Home
- Forum
- About
- Register
| <ul> <li><a href="index.html">Home</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="about.html">About</a></li> <li><a href="register.html">Register</a></li> </ul> |
Adding the Styles
Now we need to style the list to make it look like the example at the top of the page. We're going to call our style #nav. For our list to display the styles we need to give it the id 'nav' so they correspond. Simple enough isn't it?
| <ul id="nav" > <li><a href="index.html">Home</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="about.html">About</a></li> <li><a href="register.html">Register</a></li> </ul> |
Setting Up the List
A default Unordered List looks pretty boring, so we need to change its appearance. This first part of the CSS simply specifies a few general rules for our 'nav' to follow. For example; to use the font Trebuchet MS, to have 0 pixels padding around the outside, and to be positioned using a float to the left.
| #nav{ margin: 0; padding: 0; float: left; font: bold 12px Trebuchet MS; } |
The next part to add directly below the code above tells the page to display the list inline. This makes our list display horizontally instead of vertically.
| #nav li{ display: inline; } |
Link Styles with our two images...
We then add the following CSS (shown below) to create an active link state. This CSS includes the URL to the gradient image we're going to be using behind the text. In here you can modify the colour of the borders round the edge of the list items, their thickness and the padding between the edge of each link and the tab. Its up to you.
| #nav li a{ float: left; color: #4E4E4E; padding: 8px 10px; text-decoration: none; background: transparent url(../images/bluebg.gif) top right no-repeat; border-top: 1px solid #94A9D9; border-bottom: 2px solid #5779C3; } |
Rollover State
The next two parts to our CSS specify how the visited link and hover styles will look. The hover style includes the URL to our second image. This will be displayed in place of the first image when a visitor hovers their mouse over the link.
#nav li a:visited{ #nav li a:hover{ |
Finally we add the CSS below, which when applied to the first tab 'Home' , will give it a 1px blue border down the left side to match our other tabs.
#nav li a#farleft{ |
So you HTML should now look like this, with the 'id' from the #farleft style above applied to the first link - 'Home'.
| <ul id="nav" > <li><a id="farleft" href="index.html">Home</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="about.html">About</a></li> <li><a href="register.html">Register</a></li> </ul> |
All the CSS
Below is the whole CSS for you to use;
#nav{ #nav li{ #nav li a{ #nav li a:visited{ #nav li a:hover{ |
All the HTML
Below is the whole HTML code for you to use;
| <ul id="nav" > <li><a id="farleft" href="index.html">Home</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="about.html">About</a></li> <li><a href="register.html">Register</a></li> </ul> |
