Dynamic Drive CSS Library- SuckerTree Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

SuckerTree Horizontal Menu

Author: Dynamic Drive

SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus. 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 and positioning behavior to them. You can even have multiple SuckerTree menus on the same page.

See also: SuckerTree Vertical Menu.

Demo:

The two bullet images used:

The CSS:

<style type="text/css">

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids<i>).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids<i>){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (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.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

The HTML:

<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">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>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</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>
</a>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left;" />
</div>

<p id="iepara">Rest of content here</p>

Code Info

Rate this code:

Date Posted: 09/14/2006

Revision History: None

Usage Terms: Click here

Your Comments (314)

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 5 of 32 pages « First < 3 4 5 6 7 > Last »

This code is discustingly long. Although good, it's very long.

Posted by Clint on 11/15, 12:39 PM

I would love some help here. My code seems to break the suckertree menu both in IE v6.0.2900 and Firefox
v1.5.0.8. I am using Windows XP. I have put in the hacks that have been mentioned, but they don't work for me :-(

Firstly my second level menu will only allow me to have the following padding line:
padding: 0px 5px;
When I changed the 0 to a 1, the second level menu would disappear because it can't find the link.

Secondly, if I don't put the cursor over the actual link text, the sub level menu disappears. Shouldn't the menu remain displayed when I am inside the width of the link?

Thirdly, the biggest problem I have is when I have text under the sublevel menu. This happens on both the home page and on the corporate page. On the corporate page, the other two sub level menu items can't be selected because the menu disappears. As for the home page, I just moved the "Welcome to Floriart" further down the page to make the problem go away. I would love this text to be positioned higher up but if I do that now, the sub level menu items can't all be selected.

In firefox, nothing can be selected on the sub level menu.

Can anyone tell me what I have done wrong?

Thanks, Kylie

Posted by Kylie on 11/18, 11:42 PM

Here is the home page:-
http://home.exetel.com.au/jebbie/index2.html

Posted by Kylie on 11/19, 12:00 AM

guys i do have a problem, the menu doesnt work if there is a falsh animation below the menu, that is the menu appears behind the flash and if somehow you refresh the page then it appears actually, thats weird! can somehow advise?

Posted by David on 11/20, 06:10 AM

Moving too quickly when using IE 7 causes the drop-downs/pop-out menus to disappear.

Any idea what would cause this?

Also, have any of the browser hacks been put into the code for this, or is it still the original version?

Posted by J on 11/20, 04:41 PM

Same here, moving fast over drop down in IE7 have menu dissapear, unusable.

Posted by Valics Lehel on 11/20, 05:22 PM

Have <select> below the menu. When expand sub-folder, menu is covered by <select>. How to resolve ?

Posted by May on 11/21, 03:28 AM

I am experiencing the same problem with IE 7. It was fine with all other versions.

If you hover on a sub menu, and then move and hover on another submenu (of same parent) the previous stays in the hover state. Then, when you move away from menu completely, then return, the submenu is clear - except for border.

For demo: http://www.chefs2go.net

Posted by Ryan on 11/21, 12:58 PM

Referring to comment on Page 2 posted by Peter Armenti. he has same problem as me and i think he resolved the problem because the link http://lirebaterealtor.idxbroker.com/idx/search.cfm?clf=3&cid=9689&cnty=1866&countySorterYN=1 given is working.
That is, hover over 'Rebate Info' and the submenu appears in front of the selection 'Property Type'.

How to do that ? please help.

I tried using z-index, but it is not working. And I have searched the web and there is no solution to this.

Posted by May on 11/21, 09:26 PM

If I add Sub-Item 2.2 under Folder 2.1, there is a gap between Sub-Item 2.2 and Folder 2.1. How to remove the gap ?

Posted by May on 11/22, 03:17 AM

Comment Pages 5 of 32 pages « First < 3 4 5 6 7 > Last »

Commenting is not available in this weblog entry.