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

I was able to make this menu work in FF with appropriate dropdowns, but it is having major issues in IE. The links don't line up horizontally and won't display the dropdown list. Any suggestions? I'm using images rather than text for the top menus.

Posted by Emmy on 09/26, 04:07 PM

Hello,

Thanks for this scipt. It is very bice but i have a little problem.

In my site a have a lot of photos and the menu doesn't work untill the photos are loaded.

Do you know how i can resolve this problem ?

Posted by Luis on 09/30, 01:02 PM

Awesome. Just the thing I needed.

Posted by GM on 10/05, 03:45 AM

how to make the submenu dropping horizontal?

Posted by meg on 10/09, 09:38 PM

IE Menu drops BEHIND forms

Does anyone know how to configure this to work around IE. The menu drops behind forms.. in FF it works fine. Any help would be MUCH appreciated.

otherwise the menu has worked excellent for me..

example at:
http://lirebaterealtor.idxbroker.com/idx/search.cfm?clf=3&cid=9689&cnty=1866&countySorterYN=1

THanks

Posted by Peter Armenti on 10/18, 03:07 PM

This is a common IE bug, IE7 should have fixed this.
A solution is to hide all selects with javascript before opening the menu, and un-hiding them later.
I prefer to edit the page layout BTW. (Or wait for IE7 to establish)

Posted by Andrea on 10/19, 02:59 AM

Hi there! I have one problem with IE. If you'll insert some other link UNDER subfoler IE makes UNWANTED line BETWEEN subfolder and LINK which is following subfolder.
example: (via DEMO)
Folder 2
---->SubItem 2.1
---->Folder 2.1
----------->subitem 2.1.1
----------->subitem 2.1.2
- UNWANTED LINE -
---->SubItem 2.2

Posted by Konstantin on 10/22, 05:50 AM

Hi there and thanks for the code! I was wondering - could it be possible to create a menu where the "folder-content" would be horizontally displayed, just like the first level, just under the same, and aligned to the left..?

I know I've tried it before, but not succeeded with aligning it to the left...

Posted by Victor on 10/24, 05:19 AM

Is there a way to stop the menu from wrapping when the browser window is not on maximize. It does an auto-wrap and you cannot click on any of the links because they block one another out.

Posted by valerie on 10/24, 01:35 PM

Hello Everyone,

First off... great work! This is what makes the web fantastic.

My issue revolves around changing the color of the borders. I have been able to successfully accomplish this but the left border of the first menu item (left, top-most) remains black. Does anyone have any suggestions as to how to change the first menu item's left border color to anything other than black?

Thanks.

Posted by Chris on 10/24, 03:18 PM

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

Commenting is not available in this weblog entry.