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

I'd like to know if someone can combine this with any method of Sliding Doors or Image Tabs so the initial menu is graphically pleasing using tabs, and then the drop downs are basically the same... Thanks!

Posted by Ramsey Sowers on 11/30, 03:26 PM

So, how do I get each horizontal menu link box to have a different background color?
Like the menu on this page...how would you make the background of
"item 1" brown,
"item 2" black,
"Folder 1" green,
"item 3" brown,
"Folder 2" black,
"item 4" green

Anyone here know how to do that?
Thanks,
Tiik

Posted by Tiik on 12/03, 09:49 PM

I don't know if jchalos will read this ever, but the change in the Holly Hack, saved me from doing the whole site over.
So thank you for your input and expertise!!!!

Posted by sscottincanyon on 12/04, 10:30 AM

I think I am having a very unique problem.

I have used this code and it works fine for me in FF 2.0 and IE7. here is the link first off. http://www.acerdesign.com/projects/diversified/index.html

ok, so what happens is when you go to the first submenu, Products, when you initially roll over the word Products, the submenu appears and is gigantic. Then when you go down onto the submenu it resizes to the correct size.

Any ideas on a fix? I've altered just about everything in the styles to find a solution and nothing so far.

Posted by Kevin on 12/06, 02:09 PM

In IE7 Products not work, same as our problem on http://www.mures.ro

Posted by Valics Lehel on 12/06, 02:25 PM

I think the fix for IE is

* html .suckertreemenu ul li ul li a{ margin-top:-2px; }

10x to jchalo ;) who gave the idea.

Posted by Joro on 12/06, 02:43 PM

just tried that code Joro and it still didn't work for the dissapearing act the drop downs do in IE7.

Posted by Kevin on 12/06, 03:30 PM

Found a partial solution to the IE7 sub menu disappearing.

It seems that the problem lies with the top and bottom padding values in:

.suckertreemenu ul li ul li
.suckertreemenu ul li ul li a

if you set these to 0 you dont get rid of the dissapearing menu in IE7. Only draw back, you can't have padded menu cells :(

Hope this helps someone

Posted by Tom on 12/07, 10:23 AM

Sorry that should say:

if you set these to 0 you get rid of the dissapearing menu in IE7. Only draw back, you can't have padded menu cells :(

Posted by Tom on 12/07, 10:24 AM

Work perfect with Safari. See it here:
http://www.acrista.com/menutest.html

Unfortunately, my design requires to put the menu on the bottom of the page.
Does anyone know how to modify it, so that the sub menu items go up, NOT down below the base items?

Posted by Alexander Grantcharov on 12/09, 12:09 PM

Comment Pages 7 of 32 pages « First < 5 6 7 8 9 > Last »
Commenting is not available in this weblog entry.