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

Love this menu. I've got it working in FF and IE for windows, but I'm having trouble with macs. In Safari, the submenus are not folding out (wonder if it is a issue with the javascript) and ie:mac is also not folding out as well as the styling is not interpreting correctly (text color and width/height of "buttons"). Any ideas?

Posted by Ryan Petrik on 01/10, 12:41 PM

Thanx for your menu, I Luv this menu, but i hv one problem with this. This will works perfectly on IE but In Opera all the Menu and their sub-menus shows in one column.

Please help if any one knows, how to rectify it?
Thanks again

Posted by Bhupinder K Dhawan on 01/11, 09:13 AM

Have you tried this in Netscape 8.x? Any sub dropout menu li link AFTER the first one cannot be selected. Nice work. Wish I could figure it out! :)

Posted by Mister Peabody on 01/11, 01:47 PM

hi,
really good .. i am trying make this dynamic .. the sub menus will the made through Ajax.. have anybody tried it out?

Posted by Abdel on 01/11, 11:52 PM

I luv the menu. However, i'm facing problem when tried made it as database driven menu using PHP and Mysql, i manage to retrieve data for main menu, however, i failed to retrieve data for sub_menu. Any idea on how to do this.

Posted by michelle on 01/16, 04:59 AM

michelle - email me on ben AT unisupuk DOT com and ill show you hot to use recursive PHP to get all categories and sub categories from a mySQL database.

I wrote one to pull this menu, if you wanna see examples on it try:

unisupuk.selfip.com
unisupuk.selfip.com/slimcms

If anyone would like to know how to create these menues dynamically drop me an email and Ill try to help you!

Ben Duffin, Universal Support UK

Posted by Ben Duffin on 01/18, 08:55 AM

Is there a way to make the sub menus nested under the main ones and have them expand and contract as needed?

Posted by Michael on 01/26, 12:16 PM

What should I do, if I would like to use the vertical and the horizontal menu on the same page?

Posted by Robbie on 01/29, 06:08 AM

I could solw the problem, I had to rename "menuids".

Thanks

Posted by Robbie on 01/29, 06:55 AM

Great code, unfortunately only works if CSS code remains in <HEAD> of the HTML codes. If you use the CSS code as and in a external .css file, it creates a gap between the 'Menu' and 'Sub Menu' therefore it does not allow the users to select any options in the lower level of the menu.

If anyone has a solution, i would much appreciate the help.

thanks

Posted by Farhad Miah on 01/30, 09:38 AM

Comment Pages 8 of 25 pages « First < 6 7 8 9 10 > Last »