Dynamic Drive CSS Library- SuckerTree Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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 (293)

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 24 of 30 pages « First < 22 23 24 25 26 > Last »

Hi,

This is probably really simple, but i can't find it!

Everything works fine. When i set it up, the colours of the links are like a dark red type colour which is exactly what i want. However, when i changed the link values, the link colours changed to the regular blue. I can't find anywhere on the CSS to alter the fonts/font colours...

Posted by Greg on 03/10, 05:07 PM

Hi, I have 2 questions.

How do I modify it such that I do not need to set a width for the 1st level menu tabs? I want the width to be dependent on the length of the text that I type into each tab.

How do I make the sub menu horizontal ?

Posted by Jermyn on 03/11, 09:04 AM

It is a nice menu. Like the sub menus. My only problem is i can not get it to use the width that is needed for a link. They all need to be the same size. I fixed it for Firefox by not specifying width and using the padding instead but in IE it dose not work. Any ideas on how to do fix it?

Posted by everything-network on 03/11, 04:11 PM

I have had all the same issues as most of you with IE 7 and the menu dropping out after the 3rd item on the menu.

Well someone earlier posted this fix....

/*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;
background:#fff; /* Added this line */
}

This fix has worked great for me. My menu does not drop out anymore!

Hope this works for you guys!

Posted by Rob on 03/19, 10:11 PM

how does one center the menu bar? will the submenus shift also?

Posted by Derek on 03/24, 01:05 PM

Wondered how you fix the first sub-level menu to drop down directly below (aligned with) the top level menu . . . mine is offsetting about 50 pixels to the right. Maybe I'm just not seeing the piece of code that adjusts this??

Posted by Andrea on 04/01, 03:00 PM

It works fine in firefox and the sub menu is gone behind the images in IE.

Anyone have fixed this issue????

Posted by Yespee on 04/06, 11:47 PM

I read all the posts but have not read anything regarding a second menu other than in the description. I've managed the main drop down menu and tried to add a similar style link bar at the base of the page which does not expand. I tried various naming conventions for .suckertreemenu and "var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas"
I require the second menu to be 130px wide rather than the 125px I have with the first.

Posted by John McAdam on 04/07, 12:33 AM

wigs out in IE 7.00.6 running Vista Home Premium. Have not tested on any other browser. Pretty surprised, most everything on DD works. Hope you get it fixed.

Posted by Derrick on 04/07, 02:31 PM

Instead of using the following solution (it did not work for me)
Ok, I managed to fix it myself by using the following for IE compatability:

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

Replace with the following solution. It worked great for me...

*.suckertreemenu ul li { float: left; height: 20px;}

Posted by Sylvain Desforges on 04/08, 01:43 PM

Comment Pages 24 of 30 pages « First < 22 23 24 25 26 > Last »