Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
CSS Navigation
Navigation is something that a lot of newbie web designers seem to struggle with and it really isn't that hard to get your head around. However, the reason that I have decided to explain it is that I found it difficult to find a straightforward tutorial about this when I started out and my menus ended up being bulky affairs with many divs and other redundant code. In this tutorial I will introduce 'list' Tags and explain how to style lists into navigation for a website, using CSS.
Clean and simple navigation
In my opinion, there are quite a few websites out there that suffer from over-complicated navigation. This really shouldn't be the case because all you should be doing is creating a 'list' of links. Here is an example of 'list' HTML code;
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
For the purposes of demonstration I have used null '#' links. When you build your menu you will need to change these to be links to your web pages.
You should notice that I have used two kinds of Tag. The <ul> means an 'unordered' list. The other type of list is an 'ordered' list <ol> which will generate numbers for each list item, 1,2,3,4 etc. Hence, 'ordered'. I have also wrapped each list (or menu) item in a <li> tag that indicates that it is an item in the list. Simple so far eh?
I am going to expand just a little further on the HTML code and then we will not touch it again. What I want to do is to apply a CSS class so that I can control the list from my stylesheet. I will also 'wrap' my list in a div for easy placement in a web page;
<div id="navigation">
<ul class="nav" >
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
The CSS
The first things that you will need to understand are the browser defaults for lists. List items will have margins and padding as standard. To 're-set' this it is useful to include this CSS somewhere in your stylesheet;
ul, ol, li {margin: 0; padding: 0;}
Now you have the flexibility to add margins and padding as you want your navigation to display in your web page. The second default to understand is that list items will automatically appear one below another. This can be written in CSS as display: block; but, if you want 'side' navigation, you do not need to stipulate this in the CSS because it happens anyway.
The third default style gives each list item a 'bullet point'. This is easily overcome by using a 'list-style-type'.
Considering the block display default, the logical menu style to cover first is a side menu. All you really need to do is to style the list items with the class, 'nav'. Here is the CSS we will use;
.nav li {
padding: 5px;
background-color: #09C;
width: 100px;
margin: 0 0 3px 0;
list-style-type: none;
}
The output of the above CSS can be seen below. Because I have specified a width in the CSS and a bottom margin the links already look like menu buttons and without images. I'm not saying that using a background image is wrong in a web page, far from it as I have used a gradient image in the navigation of this website to give the buttons a 'glossy' feel. All I am demonstrating is that buttons don't have to be images;
OK, now I hear you shout that you want a 'bar' style navigation. That's cool because we only have to add one more CSS style to the example we used earlier and that is to over-ride the default block display with 'display: inline;'. The CSS looks like this;
.nav li {
padding: 5px;
background-color: #09C;
display: inline;
margin: 0 0 0 3px;
}
You should also note that I have not stipulated a width and don't use the 'list-style-type' attribute in the CSS as there is no need when using 'display: inline;'. This is the resulting menu;
Taking it further
I have only given you the building blocks for clean and simple CSS menus using lists. There are many different ways for menus to be styled and you can always take advantage of the link, visited, hover and active attributes that I describe in my tutorial about using different link styles in a web page. Once you have the concept you can go on to create some interesting menu designs. I would encourage designers to use lists for menus as the HTML and CSS are lightweight and uncomplicated. Using lists is also correct semantics to my mind.
