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 31 of 32 pages « First < 29 30 31 32 >

Works properly on Safari 4 beta.

Posted by someone on 04/22, 09:02 AM

Hi,

I am having the same issues as Justin, plus i get this error message for IE, any help would be great thanks!

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727)
Timestamp: Thu, 23 Apr 2009 17:37:31 UTC

Message: 'document.getElementById(...)' is null or not an object
Line: 109
Char: 5
Code: 0

Posted by trevor on 04/23, 10:39 AM

I am having a problem with this line..

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"

It's the t-1 bit that Firefox can't seem to process. Any suggestions?

Posted by Mark Henry on 04/28, 01:38 PM

First this is a great menu to work with. Easy to modify and all. I have two questions. The first one is I'm actually using this menu for a website already built but when I resize it and everything, the menu is too short in IE but fits perfect in Firefox. Is there a way to size it so it is the same in both Firefox and IE. Also how do I get the second sub menu to show on the left side of the first sub menu. Help is much appreciated in this matter. Thanks.

Posted by cwak on 05/05, 12:31 PM

hellow every body ...

i have a problem with the munu,
when i take the mouse over the second link in the sub menu, it's just Disappear

there is a code under the menu it's a just words:

<p style="font-size:18px;padding:0 10px 5px 10px;">
<font style="FONT-SIZE:30px;color:#b80005;font-weight:bold">Encart Chimy;</font>  an Egyptian Fine Art Publisher, manufacturer and  wholesale distributor of Fine Art Prints, Poster, Greeting cards, Lithography,  Specialized gallery in Oil painting of Egyptian Art & Other Subjects, Water colors, Engraving, Matted Prints and Framed Pictures.
</p> 

when i remove this part, the menu work well, so what i can do ??

Posted by mostafa megahed on 05/06, 02:46 AM

hi,
when i cross mouse over the sub links,
it's just disappear

note: under the menu there is a text in <div>, when i remove it, menu works good ...

Posted by mostafa megahed on 05/07, 02:26 AM

Splendid and useful!!!

Posted by photo colorization on 05/10, 11:18 PM

I'm not sure why the last tab of the navbar menu isn't loading in correctly. Am I overlooking something?

Posted by sara on 05/12, 12:28 PM

Nice work but i have a question. I insert this menu in a webiste and below there is a div with a photo slider(jquery). So the submenu is go back from the photos. Any suggestion?

Thanks a lot.

Posted by st4 on 05/13, 10:22 AM

This menu works great on my website. I've tested it in FireFox, Internet Explorer, my Nintendo DSi that uses Opera, and my Nintendo Wii that uses Opera.

I haven't seen it in Safari or Google Chrome yet. The menu will bug out on IE sometimes, but other than that it's reliable in getting the job done.

I've also tested how the menu looks when disabling JavaScript in FireFox and it looks good. Most of the time when JavaScript is disabled in other menus they would show up weird or not show up at all.

Posted by SauloA on 05/14, 11:07 AM

Comment Pages 31 of 32 pages « First < 29 30 31 32 >

Commenting is not available in this weblog entry.