Ramui webblog Free Blog Script

DHTML CSS list menu tutorial

DHTML CSS list menu are being increasingly popular among the webmaster today. The main advantages of such menu are,

  1. 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.
  2. Such menus are divided categorically; so it is easier for the viewers to trace out the required link.
  3. This type of menus are looking nice; so a nice decoration of WebPages.
The only disadvantage of DHTML menu is its higher design cost. It is really difficult to design such menu in cross browser platform.

Designing CSS vertical menu

Verttical 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.

Code | Download
<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.

Code | Download
<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

View demo | Download sample code