Latest tutorial: Making a Movieclip face another Movieclip or point on the stage | Ask Tutorial5!
 

Get tutorials on EMail




Categories

Navigation

Interactive CSS navigation menu
(13 votes)
Written by AnaS   

In this tutorial it will be explained how to create an interactive CSS navigation menu vertical displayed like the one below.

 

CSS is a strong tool for controlling the way the content is displayed. Using CSS properties you will have a good looking interactive menu, but also search engine friendly.

For the beginning you should have a picture like this: menu-arrow.gif .



Create a HTML document and put this code in for having the CSS menu:


<html>
<head>
<title>CSS Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />/head>
<body>

<span id="menu">

<ul class="navigation">

<li><a href=# class="menu">Home</a></li>

<li><a href=# class="menu">Products</a></li>

<li><a href=# class="menu">Services</a></li>

<li><a href=# class="menu">Contact</a></li>

</ul>

</span>

</body>

</html>


Now create a CSS file and name it style.css and let's start creating the menu. Put this code in and we will comment the most important part of it:

 

ul.navigation{

list-style:none; /* this line will remove any kind of bullet from the menu */

width: 160px; /* sets the menu width */

margin:0;

padding:0;

}

 

#menu a

{

display: block; /* this is a very important property here and it controls the way the menu elements are displayed - like block-level elements */

padding: 5px 3px 5px 10px; /* sets the padding properties */

font-weight:bold; /* sets the font weight */

background-color: #222222; /* sets the color of the background */

border-top: 1px solid #efefef; /* this code sets the line between the menu items */

}

 

#menu a:link

{

color: #efefef; /* sets the font color */

text-decoration: none;

}

 

#menu a:visited

{

color: #efefef;

text-decoration: none;

}

 

#menu a:hover

{

background:#222222 url(menu-arrow.gif) no-repeat left center; /* when the cursor is over, in the left side of the menu item background it will be display the arrow.gif picture */

text-indent:15px; /* this line of code move the text 15 px to the right */

}

 

#menu a:active

{

color: #efefef;

text-decoration: none;

}


Now you should have 2 files, the HTML Page containing the Menu and the CSS Style Document.
All you have to do now is open the HTML file with your favorite browser. Go ahead and play with the colors and style.

Thank you for your time, and i hope you enjoyed this tutorial.

For more webdesign resources view webdesign tutorial



Subscribe now via RSS feed and get all the new tutorials

written by Jamil Ali , August 17, 2007

This is the best tutorial site I have ever seen. thanks
written by Matei , September 27, 2007

Thanks, very useful
written by johnf , September 23, 2008

explaines a lot
written by Mike Louviere , April 26, 2009

How would you make this horizontal as apposed to vertical menu type? Also how would you add drop-downs within each main menu option?
written by Mike Louviere , April 26, 2009

nevermind, figured it out, instead of display: block, use float:left; and change ul.navigation: width:; to nothing
written by Akanksha R , September 04, 2009

explains all the basic!! thnk u
written by laxman , October 19, 2009

how can we add images to the menu ?

1. image should display
2. it should maximize on hovering
3. when we click on it, it should blink

well, can you explain this please....

Thanks in advance.

Do you need more help? Ask now!
 

busy
Last Updated ( Tuesday, 10 April 2007 )