Dynamic Drive CSS Library- SuckerTree Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

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

Nice one, congratulations!

Posted by Fabricio on 01/15, 01:44 PM

Hi,

the menu gos behind my images with a dropshadow. Example http://www.shortwave.de/mitglieder.html. Select About Guild and then Characters to see what I mean. How can I fix this ?

Greetings Manfred

Posted by Manfred on 01/17, 10:32 AM

thanks for the best of CSS, I am windring how can i use These CSS for ather languages like Arbic to display sub_sub_Menu from right to left.

Best regards

Posted by Saleh asimi on 01/20, 02:22 AM

This is a nice implementation of a CSS menu.
Not sure were the name comes from though :)

Posted by Jason on 01/20, 06:26 AM

Iam running FF 2.001, the menu seems to function well. I will test it in a webpage and let you know.

I like it, clean and seems to be easy to make custom.

Posted by Ed on 01/23, 05:41 PM

To make it so the submenu of the submenu doesn't inherit the first submenu's code. Throw this in the script...

/* Sub Sub level menu links style */
.suckertreemenu ul li ul li ul a{
display: block;
width: 180px; /*width of sub menu levels*/
color: white;
font-family: Comic Sans MS;
font-size: 14px;
font-weight: bold;
text-align: left;
text-decoration: none;
padding: 3px 5px;
border: 0px solid #ccc;
}

The text changes are added in as well.

My question. I don't understand how to offset submenus? It does not work, says it is done by the script. I just want to make the sub menu and sub sub menu offset up about 20px and left about 20px.

Posted by Shagster on 01/25, 11:17 AM

i want to implement the menu inside the element <td> when i wrote this code it showed me an unordered list but not the one that is shown in the example.let me know what to do

Posted by kris on 01/25, 12:06 PM

How to you get rid of the float left property without the menu borking?

Posted by Shagster on 01/25, 01:11 PM

i got the menu all in place and i have everything linked from the menu into the table below which contains an iframe. for some reason though, i'm finding it impossible to select below the first submenu link. the drop down menu disappears when you scroll any further below that first submenu link. i'm operating windows XP home and using netscape 8.1.2. any pointers? i'm not even sure what would cause this.

Posted by andrew Medium on 01/28, 08:46 PM

Hi - I'm having an issue with this menu in IE 7 (testing on XP). I have an image (that has a link associated to it) directly under one of the nav drop-downs and when i hover over the drop-down menu the drop-down disappears once the cursor is over the drop-down and the image (underneath). When hovering over one of the drop-down menus that do not have anything under (image, test, link) it works fine.

The menu works great in all other browsers tested (IE6, Netscape 7, Opera, Safari, Firefox, etc...)

Is anyone familiar with this issue? If so, do you know how to resolve?

Posted by Sandy on 02/02, 03:11 PM

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

Commenting is not available in this weblog entry.