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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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

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 9 of 28 pages « First < 7 8 9 10 11 > Last »

I've got the same problem with the horizontal menu.
Here is the solution:

.suckertreemenu ul li ul li{
display:table-row;
float: none;
}

Posted by Robbie on 01/30, 01:58 PM

Thanks, Robbie. I haven't tried your suggestion out yet but will do. Looking at the code you have provided suggests it is for a horizontal menu as you were having the problem with. Would this mean that i would change the code to the following for a vertical menu.

.suckertreemenu ul li ul li{
display:table-row;
float: none;
}

Change to:

.suckertreemenu ul li ul li{
display:table-column;
float: none;
}

your response is much appreciated.

Many Thanks

ps. these codes are currently implented in an external .css file.

Posted by Farhad Miah on 01/31, 05:24 AM

Hi, Robbie

In regards to the above suggestion you've made. I have just tried to implent you solution but unfortunately the problem remains. Unfortunately i do not have a website to show you the problem. Like I've mentioned earlier the problem only lies when you put the CSS in an external file.

ot sure if anyone else had this problem. Please do let me know.

Many thanks
Farhad

Posted by Farhad on 01/31, 07:54 AM

How do I get the pop-up sub menus to appear over the top of the rest of the page content?

Posted by Eliot Walker on 02/05, 07:08 AM

Does anyone have trouble with this menu in Netscape? If so, is there a fix? Thanks.

Posted by Kevin on 02/05, 11:57 AM

i have already used your horizontal suckertree menu and i like it very much...
as for this vertical menu...how can i make the submenu appear below the main menu instead of sliding out to the side of the main menu?the event is like this->when i cliked the main menu..the submenu appear below it and stay plus the other main menu below the submenu is still visible...i hope you can understand what i mean...:-)
Thanks.

Posted by eyezal on 02/05, 08:50 PM

is there a way to prevent the 'flyout' menus being displayed until the user has clicked on the menu item?

so rather than as you hover over the menu's the 'flyouts' are displayed, they are not visible until there is an .onclick command rather than an .onmouseover

i have tried the .onclick but have yet to find a way of clearing the 'flyouts' when you move to another menu item, as they are either blank (using .onmouseout) or if you remove this filter then the flyouts overlap each other.

Please assist.

Posted by mike on 02/15, 08:38 AM

Great stuff. It works well on one page. But I put it in a frameset (left_frame); What can I do, that this tree will "flow" over die frame border into the main_frame, that every submenue is visible?
Thanks a lot.
Anna

Posted by Anna on 02/16, 11:53 AM

It's really usefull for people who are new to webdesigninig like me

..GREAT........

............Bobby

Posted by Bobby on 02/19, 01:08 PM

Hi there,

I need to use 2 menus on the same page. For some reason it only works in IE and not FF (the flyout menus don't work and links will not open in a new window).

Any thoughts??
Thanks!!
Jennie

Posted by Jennie on 02/24, 04:40 PM

Comment Pages 9 of 28 pages « First < 7 8 9 10 11 > Last »

Commenting is not available in this weblog entry.