Navigation can be presented in many different ways, but the most effective way is the CSS list which offers the best and most simple solution. In this post I will demonstrate the CSS menu in its most stripped back form.
Firstly, I will give the CSS and HTML followed by a breakdown of the code. This guide assumes that there is already an understanding of lists.
CSS
ul.menu { list-style:none; padding:0; margin:0; }
ul.menu li a{ display:block; width: 100px; padding:10px; font: 10px Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#009933; border-bottom: 1px solid #003300; }
ul.menu li a:hover { background-color:#003300; }
HTML
<ul class=”menu”>
<li><a href=”http://nasarik.com”>home</a></li>
<li><a href=”http://nasarik.com”>portfolio</a></li>
<li><a href=”http://nasarik.com”>contact</a></li>
</ul>
In the CSS I have referenced the unordered list (ul) and given the class .menu, this is so we can reference the HTML in a simple and clean way; next we clear the natural styling of the ul with list-style:none and the removal of both padding and margin. Now we can reference the list item (li) and the active link (a) with our own styling attributes, then simply add the hover state, in this case I have chosen a darker colour.
The HTML list is simple, create a standard unordered list, and add your class to the ul tag, this will style your menu with the CSS, it’s that simple. This same method can be used on any list type and can be adapted to suit any style of website.
Here are a few excellent examples of CSS menus
http://www.smashingmagazine.com
http://www.cssbeauty.com/
http://logopond.com/
http://www.pixellogo.com/
Once you have mastered the simple CSS menu why not experiment with images or JQuery.