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

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

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

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 23 of 25 pages « First < 21 22 23 24 25 >

Tnx, very nice. Thanks

Posted by Jim H on 07/09, 03:09 PM

Hi. As you can see on my webpage, the menu is dropping behing the image. I tried z-index but that isnt working, any ideas on how to make it drop over top of the image?

Posted by Everett on 07/12, 01:00 PM

Hey, i am trying to use the horizontal and vertical suckertree menu on the same page but for some reason the drop downs will no longer work if more than one menu is placed onto the page - im guessing its probably coz of the 2 different js - is there a way to get these menus working on the same page with drop downs.
Thx

Posted by Jo on 07/14, 06:20 PM

Dont worry guys got it sorted, i just changed the menuids to topmenuids in the js file and it worked.
var topmenuids=["treemenu1"] - first menu
var menuids=["suckertree1"] - second menu

Sweet!

Posted by Jo on 07/14, 06:54 PM

it does not work in IE7. (sub-tree menu does not appear in IE7)!

Plz help me.

Posted by atau on 08/11, 05:10 AM

it doesn't work in IE7. the submenu doesn't appear!
plz help me. im very frustrated.

Posted by arakan online on 08/11, 05:17 AM

So trying to remember how to do this with out paying for a template..
Great work..

Posted by jenps on 08/11, 07:14 AM

I am unable to control the height of Sub menu items. if i use height parameter for controling the height of sub menu it disturbs the complete menu.

can somebody assist me regarding this problem.

Bhuvnesh

Posted by bhuvnesh on 08/13, 02:32 AM

Hey guys instead of having the border a double line in between main items and submenus, just change css and looks much better.

border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom: 0;

Posted by Steve Hill on 08/16, 10:15 AM

Could someone PLEASE help me?

I tried using this code on the new index page I have been working on for my website, but it is not working. The main menu is showing, but the drop downs are not.

I checked the code and I didn't see anything that looked like it was wrong, but this is the first time I have used css, and I am unfamiliar with it, so I am not sure what the problem is.

I have viewed it in both Firefox and IE and it doesn't work in either browser. I tried taking the flash animation off of the page to see if that was causing the problem, but it wasn't. I also tried making the table that the menu is in larger to see if that would solve the problem, but it didn't.

If someone could please look at the code and tell me what I have done wrong and post everything I need to change, I would greatly appreciate it. Please put the entire section of the code I need to change so I can see exactly where it goes.

Here it the URL of the page:
http://reflectionsphotographybyroxanne.com/test2.html

Thank you.

Posted by Roxanne on 08/29, 02:33 PM

Comment Pages 23 of 25 pages « First < 21 22 23 24 25 >