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

CSS Library: Vertical CSS Menus: Here

SuckerTree Vertical Menu (v1.1)

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

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 21 of 21 pages « First < 19 20 21

I tried this in IE 6 and 7, firefox and it works great, but I am having trouble with it working on netscape 7.2....>.<

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

Hi Chris, u should look at your nested <ul>.

<li>Item 1</li>
<li>Item 2</li>
<li>Folder 1
<ul>
<li>Folder 1.1</li> /*this is wrong for FF*/
<ul>
<li>Sub Item 1.1.1</li>
<li>Sub Item 1.1.2</li>
<li>Sub Item 1.1.3</li>
</ul>

it shud b like this :
<ul>
<li>Parent item
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
</ul>
</li> /*this is what I mean - a closing tag*/
</ul>

closing 'li' must b placed at the right order.
the nested 'ul' must be placed inside 'li'.

u can't close the 'li' and then put your nested 'ul' after closing 'li'.

yeah, I'm facing the same problem ^^.
I hope it useful.

Posted by dennisa on 04/15, 02:34 AM

Excellent! Smart!

Posted by Matthias Wiede on 04/20, 01:07 AM

I used this code but I have a dark blue background and white text. Looks fine in FF but IE6(sucks) makes the text black. Is there a workaround for this problem?

Thanks in advance!
Ken

Posted by Ken on 04/29, 04:38 PM

Thanks Dynamicdrive that menu is very easy to edit and seo friendly.

thanks

Posted by SV Creation on 05/03, 11:18 AM

I have the same problem. The submenus are not showing up in Firefox

Posted by Ricardo Cuello on 05/06, 11:36 AM

I see from reading the posts on this forum that several people are try to use a second menu - without success.
I wonder if somebody could offer a solution for this.

I try to rename the css an js files for the second menu, the name for ids and classes also.

The missbehavior is always the same. While the first submenus are shown correct, the second one isn't.

This code is so usefull, that it's worth to be used twice ;-)
Maybe someone cold offer an idea?

Posted by ianus on 05/16, 04:36 AM

Comment Pages 21 of 21 pages « First < 19 20 21