CSS Navigation Menus

March 30, 2011 | Category: Tutorials | Tags: | 6 Comments

Are you looking to create navigation menus using CSS? Are you looking to use different styles for your navigation menus? This tutorial will teach you how to create different menu styles for a main menu, submenu, and footer menu.

WPMU DEV - The WordPress Experts

STEP ONE

First, we have to create the html for the actual menus. The following html is for the main menu. Take note that the id is called “main-menu” for the div. Also, take note that the Resources link has a class called “active”:

1
2
3
4
5
6
7
8
9

<div id="main-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="active" href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

The following html is for the submenu. Take note that the class is called “submenu” for the unordered list. Also, take note that the Tutorials link has a class called “active”:

1
2
3
4
5
6

<ul class="submenu">
<li><a class="active" href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Links</a></li>
</ul>

The following html is for the footer. Take note that the id is called “footer” for the div:

1
2
3
4

<div id="footer">
<a href="#">Terms of Use </a> |
<a href="#">Privacy Policy </a>
</div>

STEP TWO

Now that we have the html, we need to create the CSS to style each navigation menu. The following CSS is for the main menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#main-menu ul {
margin: 0px;
padding: 0px;
}
 
#main-menu li {
list-style-type: none;
display: inline;
margin: 0 5px 0 5px;
}
 
#main-menu li a {
color: #FFFFFF;
text-decoration: none;
}
 
#main-menu li a.active, #main-menu a:hover {
text-decoration: underline;
color: #D9CD60;
}

This should be the result for the main menu:

So as you can see, if you’re on the Resources page, it will display in a different color and be underlined. If you were on the Contact page, you would add the class of “active” to the Contact link.

STEP THREE

The following CSS is for the submenu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.pages {
margin: 0px;
padding: 0 0 20px 10px;
list-style: none;
}
 
.pages li {
padding-left: 20px;
background-image: url(../images/page-icon.gif);
background-repeat: no-repeat;
background-position: 0px;
}
 
.pages li a {
color: #625412;
}
 
.page li a.active, .pages li a:hover {
color: #95810A;
}

This should be the result for the submenu:

So as you can see, if you’re on the Tutorials page, it will display in a different color. If you were on the Downloads page, you would add the class of “active” to the Downloads link.

The reason why I created it as a class is because I can use this style multiple times on a page. So if I wanted to create another unordered list, I could use the same styles for it. That’s the difference between using an id and a class. An id is used only once on a page whereas a class can be used multiple times on a page.

STEP FOUR

The following CSS is for the footer:

1
2
3
4
5
6
7
8
9

#footer a {
color: #FFFFFF;
font-size: 95%;
}
 
#footer a:hover {
color: #E9D766;
text-decoration: none;
}

This should be the result for the footer:

There you have it! Three different menus, each with their own unique styles. Enjoy!

Did you like this?
Subscribe to our Jacorre Design Studio RSS Feed RSS Feed, join us on Jacorre Design Studio on Facebook Facebook, follow us on Jacorre Design Studio on Twitter Twitter or simply recommend us to friends!

You might also be interested in:

CSS Background Rollover
Looking to add a little style to your image links?...
Absolutely Positioned Ads
The best areas to place advertising can vary from ...
CSS Repeating Backgrounds
Are you looking for a repeating background using C...

 

Hi :) I want to say thank you so much for your time in supplying information about css :)

On August 13, 2011 Paul said

Thanks Paul, glad you like the tutorial!

On August 17, 2011 Josh said

Trackbacks

  1. 100 Great CSS Menu Tutorials
  2. Sacima鲨鳍马工作室 » Blog Archive » 100 Great CSS Menu Tutorials
  3. 50 Best CSS Menu Tutorials with Jquery effect | Desua the world of Knowledge
  4. 100 Great CSS Menu Tutorials | Designer Malaysia

Add a comment