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 3 of 32 pages < 1 2 3 4 5 > Last »

In regards to the gap, I have that too, it does bother me a bit, but I can live with it.

Posted by Mitchell on 10/25, 04:25 AM

I resolved the top-most, first menu item left border issue:

<li>Item 1</li>

Posted by Chris on 10/25, 08:03 AM

That didn't look too good...

style="border-left: 1px solid #YOUR COLOR HERE"

Posted by Chris on 10/25, 08:08 AM

This script works great. I am new to CSS so this question is probably an easy one, but I am trying to move the menu to an specific position on my page.

If I add:
top: 140px;
left: 160px;

To this portion of the script:
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
top: 140px;
left: 160px;
display: inline;
float: left;
background-color: #0000ff; /*overall menu background color*/
}

I can get the Top level menu moved to the position I want but then all of the sub menus are off by about 100px

The submenus work they just appear way below the top menu. Is there an easy fix to this?

Posted by gusto on 10/27, 10:44 AM

I had this same problem at first.. you might want to check your markup and make sure you don't have any open tags as I found an open font tag that was throwing it off.

An easier solution might be to position a table and place it within the table. Although, I realize this might defeat the reason some people are using css.

I realize it might defeat the purpose of CSS.. but you COULD

Posted by Peter Armenti on 10/27, 12:23 PM

I double checked the markup and it all look ok. I did figure out if I add left: -160px; to the 1st sub level menu it negates the left: 160px; command from the top level menu. But I still can't get it to come up. My submenu is 140px below the top menu. If I try top: -140px; it doesn't change anything.

I noticed in the Javascript that the line:
ultags[t].style.top=ultags[t][removed].offsetHeight+"px"

Is suppose to dynamically position first level submenus to be the height of main menu. What am I missing? I am testing this page in IE7 Final Release as my old html and javascript menu isn't working right.

Posted by gusto on 10/27, 04:46 PM

There is an issue I discovered - I hope I can explain this right. There is an extra line placed below any box that triggers a 2nd level menu. You can see the error on this page if you select all (Ctrl+A) and hover over the "Folder 2" box above and look at the very bottom of the drop-down menu. Compare it to the bottom of the drop-down on "Folder 1" (while keeping "select all" going).

The reason the extra pixel on the menu above doesn't affect the menu is because the 2nd level menu trigger is the last item on the drop down. But if you have a 2nd level menu trigger which isn't the last item on the menu then that extra pixel width creates a 1 pixel gap between that box and the box below it.

This is happening in IE6 but not firefox.

Posted by Kieran Kiely on 10/29, 07:11 PM

P.S. - I set this menu up so that the top items wouldn't be clickable. This had the unwanted effect of changing the cursor to a text selector cursor which was ugly. I changed this by adding in

cursor: default;

in the main div. So now it looks like there are non-clickable images triggering the drop-down even though there aren't.

P.P.S. - Is there a way to surround a WHOLE drop-down DIV with a border without having individual borders on each drop-down box?

P.P.P.S. - The menu is the last thing to load on the page. Does anyone know how to change this?

Posted by Kieran Kiely on 10/29, 07:18 PM

I have the same problem... Can anybody help us. ?

Posted by Konstantin on 10/30, 10:00 AM

Works fine in IE6 for me.

Posted by Mario on 11/02, 09:56 PM

Comment Pages 3 of 32 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.