Dynamic Drive CSS Library- SuckerTree Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

:/ blah...
it really sux this dissapearing.
if the java script has a delay to hide the menu, I think the problem should be solved, but I`m not good at java scripting.

Posted by Jor on 12/09, 02:49 PM

So removing the top/bottom margin helps the problem, it doesn't fix it, as you still need to move slowly over each item and you lose the ability to bad the list items.

If anyone finds an actual fix, please post it here. In the meantime, I added these 4 lines to ".suckertreemenu ul li ul li a{" to take care of ie7 users using the aforementioned methods...

*padding-top: 0px;
*padding-bottom: 0px;
_padding-top: 5px;
_padding-bottom: 5px;

This allows the menu to look the same for all users other than IE7.

Posted by jchalos on 12/11, 04:30 PM

I found a DHTML menu maker that did a great job, but the menu alone was 25k and hundreds of lines :-(

Fast, tiny. This is a great menu!
Thank you very much!

Posted by David on 12/11, 05:11 PM

finally went and found another drop down that works much much much better. It's a modified version of the original suckerfish menus.

http://www.htmldog.com/articles/suckerfish/dropdowns/

I think the javascript works correctly in this one because it works in every browser I have tried with unlimited margins,padding and borders. Good luck to all.

Posted by Kevin on 12/11, 11:06 PM

used this menu in website.. changed some code so as to show image instead of text.. it works perfect when offline.. but once online, it loads differently.. i mean instead of horizontal it sometimes loads in vertical lines or sometime in two lines.. but once refreshed it gets back to horizontal form..

please is thr anyway tweak to solve this issue..
website is www.drishtee.com

Posted by KP on 12/14, 02:52 AM

sucker tree horizontal sub menu is not dropping down on me.

I visited some site listed on this forum and it seems that javascript and css is being used. I rather not use Javascript if I can help. Can someone please help.
Dwaiba@yahoo.com

I would really appreciate it.

Posted by Daniel on 12/19, 03:29 AM

I found a few problems using the suckermenu above a inner div displaing form contents...

When droped, the menu stay beneath some objects (like select inputs, applet charts,...)...
I tried to ad the style:z-index to the objects to make sure they'll stay under the menu, but seems not work..
Any idea how to guarantee the drop down will always be ontop other elements?

Posted by Marcelo on 12/20, 12:36 PM

it works fine for me on my site and the demo here and i am using internet explore but not sure which version it is but it works just fine.

Posted by Rick on 12/23, 04:13 AM

the drop down menu will not show on IE 6.0.2900

as the adaption to my menu didn;t work I just tried the exact example of yours.

I tried other sub menus on all have JS script and my guess that there lies the problem
anyone can help

Posted by Shoshannah on 12/24, 01:33 PM

Works great on AppleWebKit (Nokia E61 - Symbian 9)
Thanks a lot for sharing the code
ciao

Posted by carmine on 12/29, 06:46 PM

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

Commenting is not available in this weblog entry.