DHTML CSS list menu tutorial
DHTML CSS list menu are being increasingly popular among the webmaster today. The main advantages of such menu are,
- They take smaller area of webpage to accommodate such menu. So the entire menu system remains within the visible area of the webpage without scrolling the browser window. It is especially important for large menu system having several hundred links in it.
- Such menus are divided categorically; so it is easier for the viewers to trace out the required link.
- This type of menus are looking nice; so a nice decoration of WebPages.
Designing CSS vertical menu
In this tutorial we shall learn how to design DHTML CSS menu in which will work in all modern browsers. Here is a picture of nice looking DHTML list menu. We shall design such menu with the help of CSS, HTML and a small JavaScript code. As first step of our design I graphically represent the nested list menu.
Quick links DHTML menu Vertical drop down menu Cheap web hosting All links Menu design Basic website menu JavaScript menu JavaScript menu type DHTML menu XML menu Web hosting Free web hosting Paid web hosting CPanel web hosting Shared web hosting Dedicated web hosting Reseller web hosting Cheap web hosting Domain hosting Domain name registration Cheap domain name Free domain name External links Free web templates Premium web template Web design service
From the above representation you can see the menu items are divided into three distinct categories, Quick links, All links, and External links. All the sub items of those main categories are remaining visible, but their sub-sub items are kept hidden. The items which are underlined indicate that they have sub categories. The HTML code for the above nested list is given below.
<div id="fw_nav">
<ul>
<li class="separator"><span>Quick links</span></li>
<li><a href="#">DHTML menu</a></li>
<li><a href="#">Vertical dropdown menu</a></li>
<li><a href="#">Cheap webhosting</a></li>
<li class="separator"><span>All links</span></li>
<li class="hide"><a class="root" href="#">Menu design</a>
<ul>
<li><a href="#">Basic website menu</a></li>
<li class="hide"><a class="root" href="#">JavaScript menu</a>
<ul>
<li><a href="#">JavaScript menu type</a></li>
<li><a href="#">DHTML menu</a></li>
<li><a href="#">XML menu</a></li>
</ul></li>
</ul></li>
<li class="hide"><a class="root" href="#">Webhosting</a>
<ul>
<li><a href="#">Free webhosting</a></li>
<li class="hide"><a class="root" href="#">Paid webhosting</a>
<ul>
<li><a href="#">CPanel webhosting</a></li>
<li><a href="#">Shared webhosting</a></li>
<li><a href="#">Dedicated web hosting</a></li>
<li><a href="#">Reseller webhosting</a></li>
<li><a href="#">Cheap webhosting</a></li>
</ul></li>
<li><a href="#">Domain webhosting</a></li>
</ul>
<li class="hide"><a class="root" href="#">Domain name registration</a>
<ul>
<li><a href="#">Cheap domain name</a></li>
<li><a href="#">Free domain name registration</a></li></ul></li>
<li class="separator"><span>External links</span></li>
<li><a href="#">Free web template</a></li>
<li><a href="#">Premium web template</a></li>
<li><a href="#">Web design service</a></li>
</ul></li>
</ul>
</div>
Styling list menu
Now I add few lines of CSS code to with this menu script.
<style type="text/css">
body{margin:0;padding:0;background:#3c412a;font-family: arial,serif;font-size:11px;}
#fw_nav{z-index:500;margin:20px;padding:0;}
#fw_nav a, #fw_nav a:hover, #fw_nav ul{font:11px arial;}
#fw_nav ul{width:210px;background:#000000;list-style-type: none;border-bottom: 3px solid #555555;margin:0;padding:0;}
#fw_nav li ul{left:210px; position:absolute;top:0;}
#fw_nav ul li{position:relative;}
#fw_nav ul li a{border-top:1px solid #808080;padding:4px 4px; display:block;color:#ffffff;text-decoration:none;}
#fw_nav ul li a:hover{color:#442222;background:#ffffff url('images/hover.gif') repeat-x;border-color:#808080;}
#fw_nav a.root{border-color:#808080;color: #000000; background:#e2e5ec url('images/arrow.gif') 195px center no-repeat;padding:4px 12px 4px 4px;}
#fw_nav a:hover.root{color:#000000;background:#c0c0c0 url('images/arrow.gif') 195px center no-repeat;}
#fw_nav .show ul{display:block;}
#fw_nav .hide ul{display:none;}
#fw_nav .separator{width:100%;padding:6px 0 6px 0;display:block;background:#808040; color: #ffffff;font-weight:600;font-size:12px;border-top:1px solid #cccccc;border-bottom:2px solid #b7b7ff;}
#fw_nav .separator span{padding:0 5px 0 22px;background:#808040 url('images/separator.gif') 2px center no-repeat;}
</style>
Correction for IE
Since IE shows line breaks of HTML code of a list items so we have to add the following line at the top of the style definition to suppress that effect. Alternatively you can remove all new line character from your HTML code.
*html #fw_nav ul li{float:left;height:1%;}
*html #fw_nav ul li a{height:1%;}
Up to this point it is a nice looking css vertical menu. You can view the resulting menu page here.
Dynamic menu
Now to make this menu script dynamic we have to add few lines of JavaScript code with it. The purpose of this JavaScript code is to add mouseover and mouseout events with the root level list items, i.e. which have hidden sub menu items, to switch the CSS class between "show" and "hide". When the mouse pointer kept over a root level list items its CSS class is switched to "show" to display all of its sub items. And on mouseout CSS class again switched to "hide" class.
Add the following JavaScript function between <head> and </head> tag of your HTML source code. If you are designing menu for your entire website then you should use external JavaScript file to add this function.
Now add the following line of JavaScript code at the end of the menu script.
<script type="text/javascript">initial();</script>
Now you can see the complete design and download sample code from the following links
