Two days back, I wrote a quick tutorial on multi level drop down menu on a readers request, but the previous version had some bug. It was not working with IE browser. I recieved 3 more mails, requesting me to write a tutorial for multi level drop down menu that works on all browsers.

WH Multi level drop down menu v 1.1 features:

1. Browser support: FF1+ IE6+ Opera8+
2. Smooth Navigation using jQuery
3. slide plus fade in effect for sub menus
4. Shadow effect

This menu is a css list based menu using jQuery which makes it smoother. The submenus repositions themselves if they are too close to the right or left edge of the page. Shadow effect's color or depth can be changed or completely removed too.

A good site navigation is very important. Every visitor or reader searches for the navigation to read more and more on the blog. I have visited many sites which do not have a site navigation at all. It becomes really difficult to search something on such blogs. I believe, one should have a multi level drop down menu, which gives better accessibility of the content to the readers. Using such menu, it becomes very easy to check almost all blog posts of a blog. Taylor Thompson, owner of Video blogging tips mailed me and asked how to design a drop down menu for the website or blog, so i decided to write a tutorial about it.

I am using a fixed menu at left side of my other Blog Free Downloadz since a long time. Today i came across a same menu at Blogfixes.com. So, i thought i should write about it and explain how to customize. Some of the features of Fixed Menu.

• It is a Fixed menu.
• It can be placed anywhere on the blog
• It can be placed horizontally as well as vertically
• It has Mouse Hover Effect

I like experimenting with my blog every day. I try to make much better navigation for my blog, which would help the readers to access each and every post in a convenient way. Today, i will teach you how to design a Navigation menu with a dynamic submenu. When you hover over a link on topmenu, all related links to that particular menu appears on submenu.See the picture below to understand it better or live demo here.

#topmenu{
background:url(http://wolverinehacks.googlepages.com/navmenu.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#topmenu ul{
height:32px;
line-height:32px;
}
#topmenu ul li{
display:inline;
}
#topmenu ul li a,
#topmenu ul li a:visited {
background:url(http://wolverinehacks.googlepages.com/linkseprator.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#4261df;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#topmenu ul li a:hover{
color:#1532a5;background:#f2f2f2
}

#submenulinks{
width:auto;
margin:0 0 5px 0;
background:#888888 url(http://wolverinehacks.googlepages.com/navsubmenumenu.gif);
height:30px;
font-size:11px;
}
#submenulinks ul{
height:32px;
line-height:31px;
}
#submenulinks ul li{
display:inline;
}
#submenulinks ul li a,
#submenulinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#submenulinks ul li a:hover{
text-decoration:underline;
}

#s2, #s3{display:none;}

<script src='http://wolverinehacks.googlepages.com/wolvimouseovermenu.js' type='text/javascript'/>

for(i=1;i<=3;i++)...

 <div id='topmenu'>
<ul id='mymenu'>
<li><a href='#' onmouseover='javascript:showsubmenu(1)'>Home</a></li>
<li><a href='#' onmouseover='javascript:showsubmenu(2)'>Labels</a></li>
<li><a href='#' onmouseover='javascript:showsubmenu(3)'>Links</a></li>
<li><a href='contact.html'>Contact</a></li>
<li><a href='contact.html'>Advertise</a></li>
</ul>
</div>

<!-- SUB MENU -->
<div id='submenulinks'>
<ul id='s1'>
<li><a href='#'>Link1</a></li>
<li><a href='#'>Link2</a></li>
<li><a href='#'>Link3</a></li>
</ul>

<ul id='s2'>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Tricks</a></li>
<li><a href='#'>Hacks</a></li>
<li><a href='#'>Widgets</a></li>
</ul>

<ul id='s3'>
<li><a href='#'>Link1</a></li>
<li><a href='#'>Link2</a></li>
<li><a href='#'>Link3</a></li>
</ul>
</div>

Today i came across this great hack named Dynamic-FX Slide-In Menu at Dynamic Drive. I modified the codes little bit to give it a perfect look like my blog... I have installed this menu at the left side of this blog and named it WH Slider Menu (i.e. WolverineHacks Slider Menu). This menu ahs many features like:

• Ability to statically position menu on page, both x and y axis (as in demo), or simply inline
• Support for loading link(s) in another frame or window
• Support for multiple columns within each row
• Fully customizable colors, dimensions etc

<style type="text/css">
<!--
A.ssmItems:link  {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="ssm.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT>