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

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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

Rox

I copied your code and altered it as I explained and it worked fine.

I emailed the source code over to you. If you didnt receive it let me know and I'll resend it.

Dave

Posted by Dave on 09/06, 10:04 AM

Chris:

According to the way I have the script set up, the structure should be:

<div class="suckerdiv">

<ul id="suckertree1">

<li>Item 1</li>

<li>Item 2</li>

<li>Folder 1

<ul>

<li>Folder 1.1</li>

<ul>

<li>Sub Item 1.1.1</li>

<li>Sub Item 1.1.2</li>

<li>Sub Item 1.1.3</li>

</ul>

<li>Folder 1.2</li>

<ul>

<li>Sub Item 1.2.1</li>

<li>Sub Item 1.2.2</li>

<li>Sub Item 1.2.3</li>

</ul>

</ul>

</li>

<li>Item 3</li>

<li>Folder 2

<ul>

<li>Sub Item 2.1</li>

<li>Folder 2.1

<ul>

<li>Sub Item 2.1.1</li>

<li>Sub Item 2.1.2</li>

<li>Sub Item 2.1.3</li>

<li>Sub Item 2.1.4</li>

<li>Sub Item 2.1.5</li>

<li>Sub Item 2.1.6</li>

</ul>

</li>

</ul>

</li>

<li>Item 4</li>

</ul>

</div>

When a parent item has a sub-menu, the new menu's <ul> tag is contained within the parent item's <li> tag.

Posted by Alex on 09/08, 05:20 PM

Hi,... I've found that this menu is very cool. But, can we make every level of sublevel is having different setting - like width, position, background... etc.

Many thanks

Posted by Puji on 09/14, 07:12 PM

Hi,
I am still having an issue on IE 7, if the sub-menu has more than 2 items then the menu disappears when I move the mouse over the 3rd item.

It works fine in FF.

Was this issue that was fixed recently? Can someone please show me the fix?

Thank you.

Posted by Jehan on 09/17, 12:04 PM

Stephen,
I think you were having the same problem as me. For some reason, the sub-menu just disappears as you are moving over it. This only happens in IE.

I think if there is a link behind the menu, I think that is when the problem occurs.

Any suggestions.

Posted by Jehan on 09/17, 12:25 PM

THANK YOU for this. I've been all over the place looking for a vertical dropdown that doesn't cause huge problems with IE.

You've saved me from going completely mad.

Posted by LittleKat on 09/21, 10:38 PM

How could one integrate this menu in a blueprint css grid?

Posted by Bart on 09/29, 06:37 AM

This is so.. greate..... I m Happy? .......wow

Posted by Usman Ali on 11/14, 05:41 AM

thats really greate... i m happy!

Posted by Usman Ali on 11/14, 05:41 AM

in IE6, I got an error:

document.getElementById(...) is null or not an object

any idea, please

Posted by Babs on 11/15, 02:26 AM

Comment Pages 25 of 25 pages « First < 23 24 25