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

Page Flip Creator- aXmag

Website Usability Testing

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

truly nice i think i might use this one on my blog

Posted by Victor on 06/15, 11:48 AM

You need to put delay on javascript then the script will be perfect!

Posted by yochai on 06/18, 06:16 AM

Hi, I have a problem with this installation (IE7). Between each category is a small gap that shows the screen behind the submenu boxes. If the gap has visible text, the hover stops at it and will not allow mouse to go beyond the gap.

What can I do to resolve this? Why could be causing the gap?

Thanks.

Posted by Jeff Lyon on 06/19, 10:19 PM

I have a vertical drop down menu in the left column of a 3 column layout with style sheets. The menu works, but the menu drops down behind the middle column's text. How do I make the menu appear above the middle column? I've tried using the z-index, but that doesn't do anything. Got any suggestions?

Posted by Adrienne on 06/20, 04:13 PM

hi!

before all, i'd like to praise kudos for the people who did this, as it's pure genius.

i'm customizing this to feature in a website and a new problem came up to the owner of the site... is there any way of leaving a "trail" marking the path of the menus that have been hichlighted previously... like a Windows' Start menu kinda thing...

i first thought of doing it with JScript but i'm kinda rusty with it :D

if anyone has ideas or suggestions, please post a follow up on this comment

thanks

Posted by joum on 06/20, 04:52 PM

first of all, this tut is awesome!

it's all i ever wanted! :D

except for one small detail... i needed to keep the path through the menus highlighted... like, when you hover a submenu, the parent item is still highlighted... like in the Windows "Start" menu... is there anyway of doing this?

thanks for the help and keep up the good work

Posted by joum on 06/20, 05:10 PM

Has anyone tested on a Mac. This script works great on all PC's but when I view with Safari on a Mac, the sub Category RollOvers do not change formating....background color and font formating do not change as set. Also, with IE on a Mac, no text shows on the menu's. As anyone experienced this or found a solution?

Thanks

Posted by Johann on 06/22, 11:55 AM

Works fine on a Mac; works fine in Safari; I haven't tested it with the arrow image though; haven't tested on Mac IE; does the menu on this forum page look any better than your own menu?

Posted by Charles on 06/22, 12:04 PM

I have 4 Graphic designers sitting around me on Mac's and all have the same issue. Safari 2.0.4 and IE 5.1.4.

My edited menu and the menu on this page all show the same errors. Safari does not show the rollover background color on sub-menus and IE shows no text at all on any level of menu. Does anyone have any ideas of a solution. Thanks.

Posted by Johann on 06/22, 12:12 PM

Hello,

this is a great example for us.
Best Regards

Posted by Tusdata on 06/27, 10:50 AM

Comment Pages 13 of 28 pages « First < 11 12 13 14 15 > Last »
Commenting is not available in this weblog entry.