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

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 6 of 23 pages « First < 4 5 6 7 8 > Last »

we are currently using 'AnyLink Drop Down Menu' from Dynamic Drive....we would like to add submenus within the arrays ... can you help?

Posted by Ruth Gingras on 11/22, 02:07 PM

I really like this menu, but I'm having trouble getting it to work consistently. The old version worked in FF and Mozilla, but not IE, and when I switched to the new version, I lost Mozilla. Any ideas?

Posted by Henry on 11/29, 01:32 PM

Is there a way to style the sub menu? Ive tried but with no luck?

Posted by Ben on 11/30, 10:00 AM

I am having trouble with the menu when I have web pages not located in the root folder. The submenus are pages that I have in sub folders and when you go there, the arrow-list.gif graphic is not shown and sometimes the tree menu is not shown too.

Please see the test site below:

http://www.starsnstripessoccer.com/test/index.htm

These pages and their subpages seem to work because they are in the root directory.
Home, Philosophy, Staff, FAQs, Sitemap, Contact, Camps

The Itineraries and Past Trips tree menus seem to work except when taken to the submenu page, the arrow-list.gif file is gone and the submenu items don't show up anymore.

Please point me in the right direction. I can put all of the files in the root directory and they seem to work but that clutters up the root folder with tons of htm files.

I am using IE6.

Posted by Tony on 12/01, 10:37 AM

why my menu when display the submenus get under a flash image and not over the flash???????

Posted by jose on 12/04, 09:53 AM

I am having the same problem that Georgina wrote about as well. I am a css-p newbie, so it's hard for me to really understand where I am going wrong. the background of the sub menus are transparent, even though they may look red or white. It is once I cross the line beyond my left nav div and into my main content/center column div, that I loose my sub nav. I think it has something to do with the #content div (middle main column) that the sub navs hover over. I've tried z-index and things like that and it is not working well. Any thoughts?

Thanks so much, it really is a nice menu!

Posted by Paulina on 12/13, 02:58 PM

Im having an issue with the UL id. My error console in firefox says;

Error: document.getElementById(menuids[i]) has no properties

Line: var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

In explorer is shows an error in the status bar with a yellow sign.. Any clue?

Posted by Monsta on 12/14, 02:22 AM

I'm having some troubles with IE. The menu works fine in FireFox and Opera, but in IE... Well, it doesn't expand at all. The background image doesn't even show for folders. (I made it have a hover background, but I think that's it)

A quick reply would be nice, because I really want to finish this template.

Posted by MarioGamer99 on 12/18, 04:35 PM

It works great. Only thing I'm dissapointed is that sub menu's background color doesn't change in Safari 2.x. Anybody could fix it?

Posted by tinker on 12/18, 10:59 PM

i need this same menu but with sub menus, if you can mail me the code i will apreciate, jdmadriz@cgmconsultores.com

Thanks

Posted by Jose on 12/18, 11:04 PM

Comment Pages 6 of 23 pages « First < 4 5 6 7 8 > Last »