Creating Navigation Menus with CSS

This CSS tutorial will guide you in creating a complete CSS based navigation menu for your website. Now you can leave apart the almost unachievable task of fixing those monstrous html codes as now the Cascading Style sheets have come up with a solution which not only removes your dependency on HTML for creating navigation menus, but also makes your website navigation appear attractive & more productive than ever before.

The whole CSS code discussed below will use a tiny image ( save it: ) as background image for the navigation menu. Ok now let’s not waste time & skip to the main action right away. The first step in creating a CSS based navigation menu is writting the HTML code for the navigation.

Step 1: Create a simple HTML code for menu with unordered list and enclose the whole code in <div> tags like this:

<div id=”menu”>
<ul>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</div>

Output of Step 1:
Please note that here i have declared ‘menu’ as the id for the above div element. You can rename it the way you like. But remember using the same name in the CSS code too otherwise it won’t work.

Step 2: The HTML part is over. Now we will proceed towards writing the CSS code for our navigation menu. Our first step is to remove the bullets from the list while retaining the functionality of the html list at the same time. To remove bullets, we will use the “ list-style” property of CSS & set it to none in this way:

#menu ul
{
list-style: none;      <!– Removes Bullets while maintaining the list property –!>
padding: 0;
margin: 0 0.15em;
}

Output of Step 2(Without Bullets) :

Step 3: Now we are done with working with the “ul” part. We have completed almost 40 % of the work by removing bullets. Now we have to focus on the “li” part since we are required to place a background image behind the individual “li” elements. We add the following code in the CSS file:

#menu li
{
float: left;          <!-aligns the li elements horizontally -!>
margin: 0 0.15em;   <!- To give spacing between li elements -!>
}

Output for step 3 (li elements Horizontally aligned):

Step 4: This is the final step where we will add another CSS code to bring the tiny image behind the list elements & repeating the image with the “repeat” property of CSS to cover the entire element. Add the following CSS code to your stylesheet:

#menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #135455;
text-decoration: none;
text-align: center;
}

The “background:url” property specifies the path for the background image. The “bottom left” & “repeat-x” properties are required for repeating the image over the entire “li” body. Other properties are for alignment & text decoration.

Output for Step 4(Final Output):

You might also like:

1. Creating Dynamic Stylesheets with PHP – Part 1
2. PHP + CSS = Auto update your web pages
3. CSS Pagination Links
4. Convert a liquid-layout to a fixed-width design
5. CSS Tricks for Dummies!

Tags: css menu, css menus, css navigation, html menu