Improving the Visual Presentation of a CSS Drop-Down Menu - A review: the menu’s complete source code
(Page 2 of 4 )
Actually, before I proceed to show you how to change the initial group of CSS styles that belongs to this menu to make it slightly more appealing, I’d like to list its full source code. This will help you recall more quickly how it looked previously.
So, that being said, here’s the complete definition of this drop-down menu, before we modify its visual appearance:
<!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=iso-8859-1" />
<title>Example of CSS-based Drop-down menu (cross-browser compatible)</title>
<style type="text/css">
/* reset body styles */
body{
padding: 0;
margin: 0;
background: #fff;
}
/* style unordered list */
ul{
padding: 0;
margin: 0;
list-style: none;
}
/* style menu items */
li{
float: left;
position: relative;
width: 10em;
}
/* position and hide drop-down menu */
li ul{
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul{
top: auto;
left: auto;
}
/* display drop-down menu (add an 'over' class attribute to list items for IE */
li:hover ul,li.over ul{
display: block;
}
</style>
<script language="javascript">
function initializeDropDownMenu(){
// get 'navbar' element
var navbar=document.getElementById('navbar');
if(!navbar){return};
// get all menu items
var menuitems=navbar.getElementsByTagName('li');
if(!menuitems){return};
for(var i=0;i<menuitems.length;i++){
// assign 'over' class attribute to each menu item on 'mouseover'
menuitems[i].onmouseover=function(){
this.className+=' over';
}
// remove 'over' class attribute to each menu item on 'mouseout'
menuitems[i].onmouseout=function(){
this.className=this.className.replace(' over','');
}
}
}
// initialize drop-down menu when web page is loaded
window.onload=function(){
if(document.all&&document.getElementById&&document.getElementsByTagName){
initializeDropDownMenu();
}
}
</script>
</head>
<body>
<ul id="navbar">
<li>About Us
<ul>
<li><a href="">Our Staff</a></li>
<li><a href="">Why work with us?</a></li>
<li><a href="">Our profile</a></li>
<li><a href="">More details</a></li>
</ul>
</li>
<li>Services
<ul>
<li><a href="">Graphic Design</a></li>
<li><a href="">Web Design</a></li>
<li><a href="">Web Programming</a></li>
<li><a href="">Software Development</a></li>
</ul>
</li>
<li>Products
<ul>
<li><a href="">Simple AJAX Library</a></li>
<li><a href="">PHP Form Validator</a></li>
<li><a href="">PHP MySQL Connector</a></li>
<li><a href="">PHP Easy Pager</a></li>
<li><a href="">PHP Form Factory</a></li>
</ul>
</li>
</ul>
</body>
</html>
As you can see, the above code sample demonstrates in a nutshell that it’s possible to build this kind of menu by writing clean, accessible (X)HTML markup, in conjunction with some basic CSS styles. Pretty good, right?
Now that the definition of the previous menu is fresh in your mind, it’s time to jump forward and learn how to make it look slightly more compelling.
Want to see how this will be achieved? Click on the link below and keep reading, please.
Next: Improving the look and feel with additional CSS styles >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 5 
