Dynamic Drive CSS Library- SuckerTree Vertical Menu (v1.1)

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

CSS Library: Vertical CSS Menus: Here

SuckerTree Vertical Menu (v1.1)

Author: Dynamic Drive

Nov 8th, 06: Fixed rendering issue in IE7, plus added support for automatic detection of sub menus width. No more configuring the "left" attributes!

This is a vertical, predominantly CSS based (with a touch of JavaScript) multi-level menu. It supports as many sub levels as you desire, plus multiple Suckertree menus on the same page. The CSS and JavaScript automatically adopts to your HTML code in each case.

The trick to Suckertree is a small adoptable piece of JavaScript that crawls the inner levels of a list menu and assigns the appropriate show/hide behavior to them. This differs from Suckerfish menu, which merely uses JavaScript to compensate for IE's shortcomings when it comes to CSS, so the menu is more rigid and requires manual changes to the CSS as the number of levels in your menu changes.

Demo:

The single image:

The CSS:

<style type="text/css">

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
	
.suckerdiv ul li{
position: relative;
}
	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>

The HTML:

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></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>
  </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="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 11/08/2006

Revision History: Updated Nov 8th, 06' to version 1.1

Usage Terms: Click here

Your Comments (247)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 22 of 25 pages « First < 20 21 22 23 24 > Last »

Thanks a lot for this code!

Posted by The Traveller on 06/10, 03:18 PM

Hello,

I tried it but in IE it does not show Sub Menu?
How do we fix it?

Although I am viewing this website in IE where it is showing Sub Menu, but when I add the code to my Web Page then it does not show sub Menus

Posted by Niket on 06/12, 10:08 PM

hi all !!
i can't change height of menu and submenu!!can you help me ? thanks's lot.

Posted by vohoangvu on 06/19, 10:49 AM

Hi
I am so happy to get this kind of rollovermenu to make my site cool but this suckertree menu did not displays properly as i designed in some IE, i don't know what really the matter is? will you help me to track this problem.

Posted by Jay Gurung on 06/21, 02:17 AM

Hi,
You need to close your li tag after </ul>
Then this should work....

Posted by yogesh on 06/23, 06:03 AM

I want to add a delay to this javascript so that when I mouse off the menu then it has like a 3 second delay before dissapearing.
Can you help me to do that ????

Posted by Jigonk on 06/25, 09:57 PM

Help! Sometime(very often) I move the mouse between the sub-items, the sub-menu suddenly disappears. This problem only occurs in IE(I use IE7).

Posted by stephen on 06/26, 04:27 AM

Great stuff, and great comments, it helpt! I'm just in a midle of a project, and it's the easiest way i saw. When it's finished I will post you the URL of the page

Posted by Kristijan on 06/27, 07:44 AM

I have a main menu, with a sub menu and then each item in the sub menu has items within it. Example:

I. Products
A. Product Category I
1. Item
2. Item
B. Product Category II
3. Item

By default the 2nd level and beyond all have the same width. I've tried modifying the CSS and JavaScript to no avail. Any ideas on how to make the width of each level (after the 1st) of the menu a different width? Thanks. Aaron.

Posted by Aaron on 06/29, 06:48 PM

I have a problem width selects in web pages with this menu, in IE-6. Because the SELECT elements ignore Z-index.

Posted by jjames on 07/08, 01:04 AM

Comment Pages 22 of 25 pages « First < 20 21 22 23 24 > Last »