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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

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 (272)

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 10 of 28 pages « First < 8 9 10 11 12 > Last »

It's excellent.
I use it in ASP.

Posted by vishal on 03/06, 07:07 AM

This menu works fine with FF 2.0, and did work with my IE 5.5 when accessing the index file on my HDD, but now that I've uploaded it to my site, it no longer even shows in IE (except for a thin horizontal line) and though it shows the top menu in NS 7.1, it doesn't function for any of the submenus.

The Demo does work in IE 5.5, but it doesn't function properly with NS 7.1

Thanks for a great script!

Posted by David on 03/06, 10:20 AM

hello
i read all your comments and they really helped me so much about modify this menu. but still there is a problem for me and thats , what if i want to have menu open right to left ?
i will appreciate your help.

Posted by seth on 03/09, 02:37 AM

Anyone tryed to make a dynamic script for this menu in ASP (classic)?

Posted by Mike on 03/11, 05:08 PM

Safari 2.0 seems to have problem to handle hover effect on "secondary" items properly. The links do work, but Safari doesn't alter background color of hovered item.

Posted by mucho on 03/12, 03:44 PM

To follow up on Tim's question about an onmouseout delay back on Oct. 5th, it's easy to Google one, but it's for an older version of suckertree, and isn't (transparently) convertible to the Nov. 8th version. Has anyone successfully inserted delay code with the current version of suckertree?

Also, I've gone ape with my menu, getting quite large with numerous layers. It's time to migrate the list's HTML to an external file. I've tried this, but just ended up deactivating the flyout feature. Any suggestions, or anyone done work on this? I mean a JS solution. SSI would be nice, but as for PHP I'm not ready to take Ben up on his generous offer -- just yet.

TIA

Posted by Charles on 03/14, 12:04 PM

Onmouseout delay can be found at http://www.webdeveloper.com/forum/showthread.php?threadid=124275, courtesy of nitro2k01. Though it's for an earlier version of suckertree, it's easily adaptable to the Nov. '06 version. To see the adapted code, use contact info at the linked site, since I keep it in an external .js file. Cheers.

Posted by Charles on 03/22, 05:03 PM

Below is the structure i used (1>2>2) 1 menu branching into two submenus which has its own sub menus. This does not seem to work in Firefox. Please Help.

<div class="suckerdiv">
<ul id="suckertree1">
<li>Item 1</li>
<li>Item 2</li>
<li>Folder 1
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
</li>
<li>Item 3</li>
<li>Folder 2
<ul>
<li>Sub Item 2.1</li>
<ul>
<li>Sub Item 2.1.1</li>
<li>Sub Item 2.1.2</li>
<li>Sub Item 2.1.3</li>
<li>Sub Item 2.1.4</li>
</ul>
<li>Folder 4.1</li>
<ul>
<li>Sub Item 4.1.1</li>
<li>Sub Item 4.1.2</li>
<li>Sub Item 4.1.3</li>
<li>Sub Item 4.1.4</li>
</ul>
</ul>
</li>
<li>Item 4</li>
</ul>
</div>

Posted by Raj on 03/28, 04:05 PM

Raj,
Your submenus need to be nested inside the list tags, i.e. between <li> and </li>. The closing tag </li> shouldn't be on the same line as either Sub Item 2.1 or Folder 4.1. Put it after the corresponding closing tag </ul>, like Folders 1 and 2 do.

Cheers

Posted by Charles on 03/28, 11:25 PM

What needs to change to make the sub-menus pop out to the left rather than right. I would be interested in using this on a site that has a right side menu.

Posted by Chris on 04/02, 03:10 PM

Comment Pages 10 of 28 pages « First < 8 9 10 11 12 > Last »

Commenting is not available in this weblog entry.