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

Color Inspiration Tool

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

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 14 of 26 pages « First < 12 13 14 15 16 > Last »

How do you make it so the folders open on the left side? I want to put this on the right side of the page.

Posted by Josh Willey on 06/27, 07:51 PM

Hi everyone...
I wanna know how to use this menu with iframes..
Bcos when i click one menu,the same menu page appears on the sub frame..Plz help me..

Posted by Rajesh on 06/29, 06:40 AM

LOVELY. Iv'e been looking for this code for quite some time o_o! KUDOS.

Posted by Dani on 06/29, 08:43 PM

great code if it works but i have a problem with this code both in firefox and in internet explorer. please help me.. http://www.SSandAssociates.com In internet explorer the length of the menu box appears longer than the sidebar. I tried reducing the width but still the same. In firefox the submenu appear behind the body. Please help me..... Thank you very much.

Posted by Culver on 06/30, 07:11 AM

This is code don't work in Safari.

Posted by Baby on 07/10, 04:32 PM

All OK. Thanks.

Posted by WMZ on 07/10, 04:36 PM

This menu is awesome. I'm having one problem on Firefox (2.0), but not on IE (I know - amazing). When the page first loads there is a micro-second flash of part of a sub-menu that shows to the right, then it's gone. The site's owner isn't bothered by this, but it is making me crazy. Any thoughts?

Posted by Lisa on 07/11, 11:51 PM

I have a left-flushed menu with sub-menus written in html. Next to it on the right is a Flash swf playing. My sub-menus keep showing "BELOW" the Flash instead of above it. Anyone knows how I can get it to show above the Flash? I know I need a Javascript... does anyone have this script?

Yuwathida

Posted by Yuwathida on 07/12, 07:37 AM

Hi,
How can I avoid typing the content of the menu in html? Can I put all the content (i.e Item1, Item2 etc) in css or an external file and then call it from html?

I have more than 10 pages on the web and it would really be a pain to go to each html page and change the menu content if I want to add another item or subitem. Thanks

Posted by Max on 07/13, 12:07 PM

Chris, here is the problem: <li>Folder 1.2</li>
should be: <li>Folder 1.2

Posted by John Baker on 07/28, 02:32 AM

Comment Pages 14 of 26 pages « First < 12 13 14 15 16 > Last »