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 26 of 32 pages « First < 24 25 26 27 28 > Last »

I have modified the script, and replaced by the Images, but found some problems, please help to fix. Thanks!

Posted by ITSky8 on 05/22, 09:43 AM

In IE 7 the width looks ok but in firefox the last menu
runs under the first menu. In IE I have a 1-1/4 gap at the right
A great menu if it worked in all browsers. Why posted a menu if its not compatible to firefox?

Posted by Dave Young on 05/22, 11:24 AM

I am getting at Lexical error in the Javascript.
right here:

for (var i=0; i<menuids.length; i++){

it says: Encountered:"m"(109), after;"<"

anyone have any idea?

Posted by toast on 05/22, 07:31 PM

I have used this horizontal menu in my site but problem is that it's getting upload once all images get uploaded on the page till than submenu dosen't show on the page... Is there any way to show menu on first load..

Please help

Posted by sudhir madaan on 05/23, 12:14 AM

Problem if you put two sublevel folder. There's gap under them. Do you know how to fix it ?

Posted by MoxLotus on 05/28, 12:03 PM

/* Holly Hack for IE \*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; } /* corrected to the proper level \*/
* html .suckertreemenu ul li ul li a { height: 1%; } /* corrected to the proper level \*/
/* End */

Thx :)

Posted by MoxLotus on 05/28, 12:07 PM

Hi
Can anyone suggest me what to do with this menu to look same in IE and Firefox.
In IE it hide behind the slide show and in Firefox it is working very well.Please have a look www.anishinfoways.com/TAK

Posted by satish on 06/03, 07:25 AM

damned!
I used an external CSS for defining my "A:Link, A:Visited..." etc.
In Opera it works without any problem.
But with the IE there ist no menu shown, only the words under each other.

I searched and searched and searched an NOBODY told me about my mistake! :-(

After changing the css to "A.norm:Link, A.norm:Visited..." it works fine!

THANKS!

Posted by Martin on 06/04, 01:13 PM

Hi everyone!

My web site is not listed becaues it is not complete, but the Sucker Tree Horiziontal Menu is idea for the my web design in my main web page. Althoungh, my page is not complete, to the creator "Thank You" for the script and a host of ideas of developing useful menu items.

So far with the implementation of the menu items, there does not appear to be any issues of coding (copy and paste), customizing, or operation in the site.

Once again, Thank you.

Posted by carl on 06/05, 11:28 AM

Is there any way to prevent the shifting in IE when you hover over links? It is quite annoying. It doesn't do this in firefox. It seems like when you hover, it shifts the rest of the page down a notch. Thanks for your help-

Posted by Tara J. Fuller on 06/06, 11:16 AM

Comment Pages 26 of 32 pages « First < 24 25 26 27 28 > Last »

Commenting is not available in this weblog entry.