soyrex

Styling the nav of a site is something we do.. well, everytime we build a site.

The nav of a site is one if the most important (and often most neglected) elements. So what can we do to make sure our nav is as accessible as possible?

To start with, we create the markup for our navigation..

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="about/">About</a></li>
    <li><a href="contact/">Contact</a></li>
</ul>

Obviously you can put as many or few items as you need into the list.

Now to style the list…. first we’ll style it horizontally:

ul.nav,ul.nav li,ul.nav li a 
{
    display:block;
    float:left;
    margin:0;
    padding:0;
}
ul.nav li a
{
    padding: 4px 8px;
    text-decoration: none;
    background: #ccc;
    border: 1px solid #999;
    margin-right: -1px;
}
ul.nav li a:hover
{
    background: #f90;
    color: #fff;
}

and now vertically, just to show how it works…

ul.nav,ul.nav li,ul.nav li a 
{
    display:block;
    margin:0;
    padding:0;
}
ul.nav li a
{
    padding: 4px 8px;
    text-decoration: none;
    background: #ccc;
    border: 1px solid #999;
    margin-bottom: -1px;
}
ul.nav li a:hover
{
    background: #f90;
    color: #fff;
}

Obviously, you have the freedom to apply any CSS you want to the blocks..