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 18 of 25 pages « First < 16 17 18 19 20 > Last »

update to FF 2.0

Posted by xelor on 11/12, 03:39 PM

I've got this menu in use and like it very much.
Now, I'd like to add three menus to this menu with different CSS styles and can't get it to work.
(1) In the js, I havevar menuids=["menutree1,menutree2"]
(2) In the css, I duplicated all the styles, but appended a "1" after the menudiv to get menudiv1 with different colors.
(3) On the webpage, I used something like this, but the top ones, link1 and link2, won't display at all.

<div class="menudiv1">

<ul id="menutree2">

<li>Link1</li>

<li>Link2</li>

</ul></div>



<div class="menudiv2">

<ul id="menutree">

<li>Link3</li>

<li>Link4</li>

</ul></div>

Can you help.

Posted by Blitzen on 11/14, 09:57 AM

Can some one help me to make it Right - Left menu. Now this menu is left - Right.

I mean can some one help me to make in such a way that the menu will reside on Right hand side and the sub menu will appear on left hand side.

Thanks.

Posted by Justin on 12/03, 05:26 AM

Hi guys!
I'm using this menu for quite a while now. Unfortunately theres a small problem. I've modified the menu so the items are really button like. Instead of text in a list item, i've put an image in it. Works great and well on Firefox, Opera and IE7. But NOT on IE6. I've gone through a lot of forums already and rewritten the code, but no success.

Problem: When you go over an item with a submenu, the item you move over is repeated underneat the item, as many times as the submenu has buttons. I think theres a class or ID problem, but I can't find it. Probably theres someone here to help me out?

main page: http://www.oxygym.nl/index.php
menu css: http://www.oxygym.nl/html/menu.css

Hope you can help me out!
Thanks!

Posted by Boss on 12/10, 05:51 AM

Great script! However, the client I am using it for isn't happy that it doesn't work in IE 5. The menu items are not showing up and the height of each item is collapsed. ANy ideas?

Posted by John on 12/11, 10:02 AM

I'm trying to use this on my site, but I am using it in a div that is about 200 px and sticks to the left. Whenever I hover over a folder, it opens up the next row, but it is always cut off where the div ends. Is there any way I could help this?

Posted by Mitchell on 12/15, 12:56 PM

Can this work with images as well?
I have a vetical navbar I'm working on with image buttons, and I'd like to click on one of them andfour more show up on a second line (hope this makes sense)

Thanks in advance!

Posted by Mike Dragonetti on 12/19, 09:01 AM

yes

Posted by kamal kant on 12/26, 01:23 AM

I used this code and customized it on my page, and the menu works fine in IE. However, only one submenu shows in FF and Netscape Nav9. Please help!!

Posted by carmen rhone on 01/08, 02:33 PM

Hi, Chris:

I downloaded the code, but the image (arrow) didn't show up. How can I fix it?

Also, the sublist items are transparent until you move over. Can I make it not transparent?

Thanks.
Jen

Posted by Jen on 01/09, 02:43 PM

Comment Pages 18 of 25 pages « First < 16 17 18 19 20 > Last »