Skip to content

Alex Tech Adventures The webs best tutorials!

Creating Menus with CSS & JavaScript

Wednesday, 26 August 2009 10:52 Panagiotis Kosmidis Development - (X) HTML / CSS / JavaScript

1
2
3
4
5

(0 votes, average 0 out of 5)

Article Index
Creating Menus with CSS & JavaScript
Horizontal Menu
Drop-Down Menu
All Pages

Page 1 of 3

Hello, on this tutorial I will show you how we can create menus with CSS and some JavaScript.

First we will start by creating a basic structure of XHTML page.

<!DOCTYPE html 
	PUBLIC 
		"-//W3C//DTD XHTML 1.0 Strict//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>Menu</title> 
</head> 
 
<body> 
</body> 
</html>

Inside the body element we will place our menu by setting a div as a main container of the menu and inside the container we will place the ul and lis for the menu.

<div id="Menu"> 
   <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
   </ul> 
</div>

After that we will create our stylesheet for the menu and we will place it inside of the Menu.css file

Menu.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38	#Menu { float: left; width: 200px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; } #Menu ul { margin: 0px; padding: 0px; list-style-type: none; } #Menu li { margin: 0px; } #Menu a { display: block; padding: 4px 4px 4px 25px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #599d7e; color: #ffffff; } #Menu a:link, #Menu a:visited { color: #ffffff; background-color: #599d7e; text-decoration: none; } #Menu a:hover, #Menu a:active { color: #333333; background-color: #599d7e; text-decoration: none; }

Menu.css

#Menu { 
   float: left; 
   width: 200px; 
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
   font-size: 0.8em; 
} 
 
#Menu ul { 
   margin: 0px; 
   padding: 0px; 
   list-style-type: none; 
} 
 
#Menu li { 
   margin: 0px; 
} 
 
#Menu a { 
   display: block; 
   padding: 4px 4px 4px 25px; 
   border-right: 1px solid #000000; 
   border-left: 1px solid #000000; 
   border-bottom: 1px solid #000000; 
   background-color: #599d7e; 
   color: #ffffff; 
} 
 
#Menu a:link, #Menu a:visited { 
   color: #ffffff; 
   background-color: #599d7e; 
   text-decoration: none; 
} 
 
#Menu a:hover, #Menu a:active { 
   color: #333333; 
   background-color: #599d7e; 
   text-decoration: none; 
}

Now we will include our stylesheet file into our html file by placing the following code in our head tag

<style type="text/css"> 
<!-- 
@import url(Menu.css); 
--> 
</style>

Now our menu works in Firefox in Opera and in Safari to make it work on IE5 we have to include a css code which we will place it in our head tag inside of a conditional comment

<!--[if IE 5]> 
<style type="text/css"> 
#Menu a { 
   height: 1em; 
   float: left; 
   clear: both; 
   width: 100%; 
} 
</style> 
<![endif]-->

This stylesheet wil be parsed only when the browser is IE and the version is 5. But we will still have problems with IE 6 & IE 7 (din't tested it on IE8) so we have to set another style and place it inside a conditional comment like we did before.

<!--[if gte IE 6]> 
<style type="text/css"> 
#Menu a { 
   height: 1em; 
} 
</style> 
<![endif]-->

This style will be parsed only by IE browser which is equal or greater than version 6.

Now we have a simple vertical menu, with some changes to the code we can convert this vertical menu into a horizontal menu.

Prev - Next >>