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 11 of 32 pages « First < 9 10 11 12 13 > Last »

I solved the problem when the menu disappear on IE7 removing the next entry

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

or it's similar

I hope this can help.

Posted by Felipe on 02/03, 12:45 AM

Removing the DOCTYPE does fix the menu as Felipe has said, but it breaks the rest of the formatting in IE 7.

Anybody find a DOCTYPE that works?

Posted by jchalos on 02/05, 09:07 AM

I rather not remove the DOCTYPE . I have found that eliminating the top and bottom padding in .suckertreemenu ul li ul li a:link makes things better, BUT need the padding. I have tried adjusting the line height to create the space needed and that causes the same issue as the padding.

Anyone have any other suggestions?

Posted by Sandy on 02/05, 11:11 AM

Works fine in IE6 and IE7 (all CSS, no tables) but menus just display stuck dropped down in Firefox 2.0.0.1 Maybe Firefox isn't reading the js properly? What is wrong, anyone? (I have spent so much time on all this CSS with divs only and no tables but this menu just defeats me). Please help, thanks.

Posted by Vinnie on 02/07, 03:06 PM

THIS menu really loses it when we use FireFox - when the user does a CTRL- (minus) to reduce the font size. when that happens there is gap between the menu item and the submenu items. Once the mouse hits this 'gap' the sub menu disappears.

any fix?

Posted by Erik on 02/16, 08:43 AM

i would love to know how this work I have no ideal on whats going on please help. I want to fic this in a web page that I have been working on but do not no how

Posted by keyon on 02/19, 02:01 AM

I researched and found resolutions to the following 2 issues, which have been asked about many times on this thread.

Issues:
1) Menus hiding behind other elements when dropped-down

2) Menus would disappear in IE7 unless you navigated the menus slowly.

Resolutions:

1) If your menu drops down over any element that is positioned relatively, the dropped down menu disappears behind that relatively positioned element in IE/6+7 , regardless of what z-index you give the menu.

IN my case, I had a div with a div inside it under the dropdown. Here is the code that works where as before it didn't:

Code that works in IE 7:

#pagecell1{
display:block;
height:auto;
background-color: #ffffff;
width: 99.8%;
border: 1px solid;
}

#leftLinks{
height: auto;
/*position:absolute;*/ took out
/*height: 290px;*/ took out
width:126px;
background-color:#e2e3e3;
}

2) Add a background color to the .suckertreemenu ul li ul{
section of the css:

Code with fix:

/*1st sub level menu*/

.suckertreemenu ul li ul{

left: 0;
background-color: #F3F3F3; /*Disappearing menu fix-BP */
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

I am working on figuring out the issue Erik pointed out about the menus not repositioning correctly when you increase the font size in FF or in that case IE. There is a gap created which stops you from scrolling the drop-downs.

Any one have a fix for this?

-Bill
quantuminc1@yahoo.com
billpepitone@winn-dixie.com

Posted by Bill on 02/21, 04:47 PM

Why does this only work on one level it either shows the first "ul li" with opacity and then hides the second level of "ul li" or it doesn't show any opacity at all.

I have added this code:

.suckertreemenu ul li ul li {
filter :Alpha(opacity=90, finishopacity=0, style=0);
-moz-opacity :0.9;
}

Posted by Tommy on 02/22, 10:56 AM

Excuse me, but this </a>

</ul>
</li>
</ul>
</a>
</li>
<li>Item 4</li>

is necessary or is an error? Thanks a lot, wonderful job. Congratulations!!

Posted by http://immenso.splinder.com on 02/22, 05:37 PM

Tommy

.suckertreemenu ul li ul li {
filter :Alpha(opacity=90, finishopacity=0, style=0);
-moz-opacity :0.9;

that code leaves black streak across the screen on ffOX

Posted by Erik on 02/22, 09:36 PM

Comment Pages 11 of 32 pages « First < 9 10 11 12 13 > Last »

Commenting is not available in this weblog entry.