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

Great code. Almost what I was looking for.

Is there a way to make the sub-menus open with a click instead of a hover?

Cheers!

Posted by Rob on 11/03, 03:18 AM

For some reason this works fine on this page, but when I copy it to my own page it doesn't work anymore. Any ideas?

Posted by GodSponge on 11/04, 09:35 PM

HI,
how could i make this menu with 6 different button images?
i am going mad right now, couse nothing is working for me :(

Posted by HEki on 11/09, 05:53 AM

Hiya all,

I have been modifying this menu css, (awesome work btw!) and so far I have gotten everything working well except for one thing.

If you open the page in FF 1.5 - everything works just as it should with the menu. But in IE 6.0 + the sub menu is about 25 pixels or so to the right of the main menu, not allowing users to click on any of the links.

the page:
http://www.angelflame.com/paw2/index.html

the css:
http://www.angelflame.com/paw2/style.css

If anyone could possibly point out what I am missing I would so appreciate it!
Thank you for your time =)

Posted by Angel on 11/11, 10:34 AM

I've updated with the Nov. 8 fixes and everything is good except for one thing; In IE7, when the last list item has a submenu, any elements that are under the menu drop down several pixels when I open that submenu. It works fine except when the last item has a submenu.

Posted by Liz on 11/11, 10:47 AM

Hi,
I think there is a close element </a> on line 25 of your example, which was not open.
Wonderful script, though.
Thanks for all the good pieces of code.

Posted by Andrea Bornstein on 11/12, 08:10 PM

You're right Andrea, thanks for the info! I've removed that </a> tag that shouldn't be there in the example and source code.

Posted by ddadmin on 11/12, 08:57 PM

I love this menu! I've been looking for a solution like this for some time now, but many required a lot of javascript and other CSS based menus were buggy in other browsers. I will use this menu for a number of different projects! Thanks for sharing.

Posted by Shell on 11/15, 08:44 AM

This is regarding the Nov. 8 updated menu:
When hovering over a menu item with a submenu in Mozilla browser, the menu jumps around and makes it impossible to select the submenu link. Any ideas on this?

Posted by Liz on 11/16, 09:52 PM

this code is not working in FF.

The sub menus r not shown in mozilla.

Posted by Ankush on 11/21, 12:36 AM

Comment Pages 5 of 25 pages « First < 3 4 5 6 7 > Last »