Designing Horizontal and Vertical Navigation Using CSS

CSS Navigation Design

To help with speed of a website's download, search engine friendliness and accessibility, CSS navigation is no doubt the best solution.

So where do you start? The best thing to do is lay out your navigational links using an unordered list. You can then style this list any way you want using a linked CSS style sheet.

Here's the basic XHTML code for our navigation:

<body id="body_home">
<ul id="nav">
<li id="nav_home"><a href="index.html">Home</a></li>
<li id="nav_photo"><a href="#">Photography</a></li>
<li id="nav_gallery"><a href="#">Gallery</a></li>
<li id="nav_smap"><a href="#">Site Map</a></li>
<li id="nav_contact"><a href="#">Contact</a></li>
</ul>
</body>

To distinguish these links from any other navigation links on the page (e.g. in a footer or side navigation) an id of nav and nav_a suitable name have been added to the items in the list to make this set of links unique and also to help with CSS styling. An ID has also been added to the Body Tag to assist with CSS styling. This body tag will be different on each separate page and will provide visible proof of what page the visitor is currently viewing. So, for example, to highlight the Gallery page you should set the Body tag to <body id="body_gallery">

See the un styled navigation list.

Styling the unorderd list (Vertically)

The CSS markup below produces a basic vertical navigation block that works as expected in Firefox but not in Internet Explorer. To fix this Explorer bug a well know workaround is to float all the list items. That is why a float has been added to #nav; and to #nav li both a float and a 100% width.

To begin, open a blank page and save it as vertical.css

Now type (or copy and paste) the following into your stylesheet:

html {
font-family: Tahoma, Lucida Grande, Arial, Helvetica, sans-serif;}

body {
font-size: 85%;}

#nav {
padding: 0;
list-style-type: none;
background: #6699FF;
width: 180px;
float: left;}

#nav li {
margin: 0;
padding: 0;
float: left;
width: 100%;
border-bottom: 1px solid #FFFFFF; }

#nav a {
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-left: 10px solid #666699; }

#nav a:hover {
background: #666699;
#body_home #nav_home a,
#body_photo #nav_photo a,
#body_gallery #nav_gallery a,
#body_smap #nav_smap a,
#body_contact #nav_contact a
background: #666699 ;
color:#F5F5F5;
font-weight: bold; }

See the results so far.

Styling the unorderd list (Horizontally)

What if you want to have horizontal navigation, what changes are needed? Not as many as you might think.

Because we have created an unordered list there will be no change to the HTML markup. There are only a few changes needed to the CSS to turn the vertical navigation into horizontal navigation.

The #nav changes like this:

#nav {
margin: 0;
padding: 0;
list-style-type: none;
background: #6699FF;
float: left;
width: 505px;}

#nav li {
margin: 0;
padding: 0;
float: left;}

The #nav a changes like this:

#nav a {
color: #FFFFFF;
text-decoration: none;
line-height: 2.5;
float: left;
width: 100px;
text-align:center;
border-right: 1px solid #FFFFFF;}

See the results of just a few changes.

A very simple enhancement is to add a thick line to the right of the vertical nav and underneath the horizontal nav

This is achieved just by making a simple change to #nav a.

For the vertical navigation use:

#nav a {
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-left: 10px solid #666699;}

For the horizontal navigation use:

#nav a {
color: #FFFFFF;
text-decoration: none;
line-height: 2.5;
float: left;
width: 100px;
text-align:center;
border-right: 1px solid #FFFFFF;
border-bottom: 10px solid #666699;

You can easily change the colours of these CSS based navigation links, just by checking the CSS code for font colours e.g. #FFFFFF (white) and changing the values.

Using tables

From the CSS articles published by QBS PC Help it's plain to see that we do not believe in using tables for web page design. We do however use tables for what they were really designed for - laying out tabular information.

Read more articles about PC repairs, Web design & SEO...