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

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

Awesome work!!!!!

Posted by TheJazz on 03/09, 11:08 PM

Thx, it worked very nice in my app.

Posted by alvaro on 03/12, 08:28 AM

the fly out dosnt work . any advise

Posted by lisa on 03/14, 11:37 AM

Chris, on Page 2, figured out why the flyout doesn't work in Firefox (improper <li> termination).. dunno if that's your problem.

Posted by Matt on 03/18, 10:02 AM

This menu does not work well in Mozilla 5.0 (Windows)
Eg. can go from parent to child menu

Posted by Miki on 03/19, 11:12 PM

css on : http://www.kannis.co.uk/style.css

Dear Author .
I implemented your solution which doesnt works on my webspage. it has a conflict problem with the existing css file the links are
css file :http://www.kannis.co.uk/style.css
website : http://www.kannis.co.uk/indextempcopy.html

i want to show action , comedy and thriller under why kannis vertical menu .

waiting for your reply - ash2382@gmail.com

Posted by ash on 03/28, 08:38 PM

I am not the author but
Ignace, I can tell you a lot of people are having problems with IE in Vista. Things just do not show correctly half the time.

Now ash I had a problem with using 2 styles before and I just left 1 as style.css and named the other style2.css and it worked create.

Posted by Veronica Taylor on 04/02, 11:58 AM

If there is a flash next to the menu when the menu is expanded if hides behind the flash. The same happens if there is a javascript scroller next to the menu.
Any way we can get around this problem?

Posted by John on 04/08, 06:47 AM

I tried this in IE 6 and 7, firefox and it works great, but I am having trouble with it working on netscape 7.2....>.<

Posted by Diana on 04/14, 03:12 PM

Hi Chris, u should look at your nested <ul>.

<li>Item 1</li>
<li>Item 2</li>
<li>Folder 1
<ul>
<li>Folder 1.1</li> /*this is wrong for FF*/
<ul>
<li>Sub Item 1.1.1</li>
<li>Sub Item 1.1.2</li>
<li>Sub Item 1.1.3</li>
</ul>

it shud b like this :
<ul>
<li>Parent item
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
</ul>
</li> /*this is what I mean - a closing tag*/
</ul>

closing 'li' must b placed at the right order.
the nested 'ul' must be placed inside 'li'.

u can't close the 'li' and then put your nested 'ul' after closing 'li'.

yeah, I'm facing the same problem ^^.
I hope it useful.

Posted by dennisa on 04/15, 02:34 AM

Comment Pages 20 of 25 pages « First < 18 19 20 21 22 > Last »