CSS Navigation Menus

Tutorial Category:

Share This:

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.

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!

Share This:

Related Tutorials