How to Create Horizontal Navigation With CSS3

How to Create Horizontal Navigation With CSS3

In this article we're going to look at the process of creating a horizontal menu with CSS. At its core, a CSS menu is made up of lists, so creating one is our first step.

 

• Home

• About Us

• Services

• Contact Us

Here is the code for that manually:
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<ul><li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>

Looking at the list (above) you'll see that it's vertical and unadorned. We're going to fix that with CSS and detail each step.

#menu {
    width: 550px;
    height: 35px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
        border-radius: 8px;
}

Here's the first step of setting up the CSS menu code, by creating a wrapper for the text and defining a background color. Two CSS3 effects have been applied: text-shadow and border-radius.

This is what our menu looks like so far.

This next bit of code removes the default padding from the list.

#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

And here's a screenshot of the result so far. Note the bullet points have been removed from the list. The padding has been set to 8px and this will control the vertical positioning of the text in the next section.

In the step below we're going to change the positioning of the text so it fits into the menu and runs horizontally (inline). We're also going to add some padding to the text for the horizontal positioning. Here's the code:

#menu li {
display: inline;
padding: 20px;
}

Here's what our menu looks like so far.

In the next step, we remove the text underline and change the color of the text to something reminiscent of the text underline color. In addition, the padding is set to 8px in all areas. This will control the position and size of the hover in the next section. Here's the code:

#menu a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}

And here's the result.

The last step sets the hover effect for the text. Here's the code:

#menu a:hover {
    color: #F90;
    background-color: #FFF;
}

And here's the final result with one of the menu items activated by mousing over it. This finishes our simple horizonal menu, but it doesn't end here. There are many more things that you can do, such as drop down navigation and using textures.