Building Clean Drop-Down Menus with CSS - Seeing the completed drop-down menu in action
(Page 4 of 4 )
In consonance with the explanations that I gave you in the course of the prior section, the final step required to get this CSS-based drop-down menu working consists simply of putting together its respective structural markup, along with the CSS styles that you learned previously.
Therefore, below I included the complete source code that belongs to this navigational menu. You can copy it and paste it into your favorite code editor, and eventually introduce your own modifications.
Having said that, here's the full source code the corresponds to this CSS-based drop-down menu, so take the time to have a close look at it, please:
<!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 (it doesn't work in IE)</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 */
li:hover ul{
display: block;
}
</style>
</head>
<body>
<ul>
<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>
At this point, I provided you with all the basic source code required to implement this accessible navigational menu that uses only a few simple CSS styles to do its business. In addition, I included below a pair of images that hopefully will demonstrate more clearly how the menu in question functions. Here are the pictures:
/Clean_dropdown_menus(1)img1.gif)
/Clean_dropdown_menus(1)img2.gif)
Finally, if eventually the two previous screen shots aren't good enough to illustrate how this CSS-based menu works, you may want to download the following ZIP file containing all the supporting material (link).
Nevertheless, before I hear your loud complaints, you should be aware that the menu simply won't work in Internet Explore 6 and below, since as I stated earlier, it doesn't offer support for the "hover" CSS pseudo class in any web page element. But, this issue will be fixed shortly, since in the next part of the series I'll be adding to the menu's source code a simple JavaScript function, so it'll be able to function with IE-based browsers.
Final thoughts
In this first installment of the series, you saw how simple it is to build a truly accessible drop-down menu with some basic CSS styles. Unfortunately, the whole project would be much easier if IE 6 and below offered complete support for the "hover" CSS pseudo class, but we have to face things as they are.
Nonetheless, in the next part of the series I'll add some JavaScript code to the menu, so it can be truly cross-browser compatible. Don't miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 2 
