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
(7 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

Do you need more help? Ask now!
 

busy
Last Updated ( Tuesday, 10 April 2007 )