jump to navigation

Create vertical and horizontal navigation menus with CSS May 31, 2008

Posted by fofo in CSS.
Tags:
trackback

The most often question i get when explaining XHTML and CSS is how to get create and style vertical and horizontal navigation menus with CSS. i will try to explain the process in this post and show how easy it is to change from a vertical to a horizontal menu. We always start by having a the proper markup. The main point to note here is that we are going to mark up the navigation links as an unordered lists.

Have a look at the code below:

<ul>
    <li><a href=”/”>Home</a></li>
    <li><a href=”/company/”>Company</a></li>
    <li><a href=”/products/”>Products</a></li>
    <li><a href=”/services/”>Services</a></li>
    <li><a href=”/people/”>People</a></li>
    <li><a href=”/contact/”>Contact</a></li>
  </ul>

 

because we need to distinguish this list from other lists in the page we will give it an id, navigation.

so the mark up will become like this

<ul id = “navigation”>
    <li><a href=”/”>Home</a></li>
    <li><a href=”/company/”>Company</a></li>
    <li><a href=”/products/”>Products</a></li>
    <li><a href=”/services/”>Services</a></li>
    <li><a href=”/people/”>People</a></li>
    <li><a href=”/contact/”>Contact</a></li>
  </ul>

Sometimes we need to seperate each item in the list from the other items. we can do that by adding an id to each element in the list. The markup becomes like this

 

<ul  id = “navigation”>
    <li id=”hom”><a href=”/”>Home</a></li>
    <li id=”comp”><a href=”/company/”>Company</a></li>
    <li id=”prod”><a href=”/products/”>Products</a></li>
    <li id=”serv”><a href=”/services/”>Services</a></li>
    <li id=”peop”><a href=”/people/”>People</a></li>
    <li id=”con”><a href=”/contact/”>Contact</a></li>
  </ul>

 

now we have the markup ready we can worry about the CSS. Let’s style the navigation id.Some straightforward CSS code follows. We style the background, and select a width and set padding and margin to 0.

#navigation {
  margin: 0;   
  padding: 0;
  background: #2683AE;
  list-style-type: none;
  width: 180px;
  font-size:1.4em;
  font-family:Verdana;
}

 

Then we set the CSS rules for the link elements.The rules are easy to follow.We add a border as well.

#navigation a {   
  display: block;

  color: #FFF;
  text-decoration: none;
  padding: 0 15px;
  line-height: 2.5;
  border-bottom: 1px solid #FFF;
}

Then we create the CSS rules for the hover.

#navigation a:hover { 
  background: #C1C1C1;
  color:red;
}

This last bit of CSS removes the bottom white border from the last link in the menu.

#navigation #con a {
  border: none;
}

 

This is the complete CSS. Place the code below in a seperate file with the name vertical.css

#navigation {
  margin: 0;   
  padding: 0;
  background: #2683AE;
  list-style-type: none;
  width: 180px;
  font-size:1.4em;
  font-family:Verdana;
 }
#navigation a {   
  display: block;  

  color: #FFF;
  text-decoration: none;
  padding: 0 15px;
  line-height: 2.5;
  border-bottom: 1px solid #FFF;
}
#navigation a:hover { 
  background: #C1C1C1;
  color:red;
}

#navigation #con a {
  border: none;
}

The completed markup follows. sav the code below in a file with a name of your choice and place it in the same folder where the .css file is.

<!DOCTYPE html PUBLIC “-//W3C//dtD XHTML 1.0 Strict//EN”
     “http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
  <title>Vertical Navigation</title>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  <link rel=”stylesheet” href=”vertical.css” media=”screen” />
</head>
<body id=”body_his”>
<ul id=”navigation”>
    <li id=”hom”><a href=”/”>Home</a></li>
    <li id=”comp”><a href=”/company/”>Company</a></li>
    <li id=”prod”><a href=”/products/”>Products</a></li>
    <li id=”serv”><a href=”/services/”>Services</a></li>
    <li id=”peop”><a href=”/people/”>People</a></li>
    <li id=”con”><a href=”/contact/”>Contact</a></li>
  </ul>
</body>
</html>

Now if we need to change that vertical navigation menu to a horizontal menu we do not have to change our markup just the CSS code!!! the complete code for styling the menu horizontally follows. Have a look at the minor changes in the CSS rules that change our menu from vertical to horizontal.
#navigation {
  margin: 0;   
  padding: 0;
  background: #2683AE;
  list-style-type: none;
  width: 1026px;
  font-size:1.4em;
  float:left;
 }

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

#navigation a {   
 
  float:left;
  width:168px;
  text-align:center;
  color: #FFF;
  text-decoration: none;
  line-height: 2.5;
 border-right:3px solid #fff;
}
#navigation a:hover { 
  background: #C1C1C1;
  color:red;
}

 

About these ads

Comments»

1. Nezir - April 14, 2010

Nice and simple sample , thanks :)

2. rameshbhome - February 24, 2011

really nice

3. mame - August 2, 2011

Interesting, I really got this on my thoughts yesterday and after this I discovered your site.

4. Tshepo - March 26, 2012

Thanks a lot. It was very helpful.

5. prescription glasses for preschoolers - January 14, 2013

Thank you for any other informative website. The place else could I am getting that type of info written in such a perfect way?
I have a challenge that I am just now running on, and I’ve been at the glance out for such info.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,788 other followers

%d bloggers like this: