Home
About
Forums
Advertise
Contact
WH Multi level drop down menu v 1.1
Posted by Nitesh Kothari on 15 December 2008|
Share this post:
|
|
7 Comments
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.
Step 1: CSS Code
Copy and paste the following code just above </b:skin>
.ddsmoothmenu{
font: bold 12px Verdana;
background: #72a8d2 url(http://img291.imageshack.us/img291/4531/navbgbluekp4.png); /*background of menu bar (default state)*/
width: 100%; }
.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}
/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }
/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border-right: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Georgia; font-weight:bold;}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: white;}
.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #2299ff;}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: #414141;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray;}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 12px; right: 7px;}
.rightarrowclass{position: absolute; top: 6px; right: 5px;}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;}
font: bold 12px Verdana;
background: #72a8d2 url(http://img291.imageshack.us/img291/4531/navbgbluekp4.png); /*background of menu bar (default state)*/
width: 100%; }
.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}
/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }
/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border-right: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Georgia; font-weight:bold;}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: white;}
.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #2299ff;}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: #414141;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray;}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 12px; right: 7px;}
.rightarrowclass{position: absolute; top: 6px; right: 5px;}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;}
Step 2: Copy and paste the following code just above </head>
<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://ads.googlecode.com/files/wh%20ddmenu.js' type='text/javascript'/>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://ads.googlecode.com/files/wh%20ddmenu.js' type='text/javascript'/>
The Above code contains some external files, which can be uploaded to your server or on other servers like google code.
Step 1: HTML Code
Add the following code to body section where you wish the menu to appear.
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://clwolvi.blogspot.com">Home</a></li>
<li><a href="#">page 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://clwolvi.blogspot.com/2008/12/multi-level-drop-down-menu-for-blogger.html">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
<ul>
<li><a href="http://clwolvi.blogspot.com">Home</a></li>
<li><a href="#">page 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://clwolvi.blogspot.com/2008/12/multi-level-drop-down-menu-for-blogger.html">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
Final Words
I think this is the first tutorial on blogosphere about multi level drop down menu for bloggers that works with all browsers. Take a moment to save this post on social bookmarking websites or subscribe via email for more updates. leave a comment here and let me know what do you think about this post.
