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

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 28 of 30 pages « First < 26 27 28 29 30 >

Eli Perelman,

Thank you very much for the center div help! I now have my text center correctly. Yeah!

Posted by chill on 07/20, 11:50 PM

I am currently using the horizontal menu and have everything working fine in IE7, but in FF2 when I have an iframe with a google map in it the drop down menu portion no longer works.

I removed the iframe and everything is okay as well as changed z-index to no avail.

Could someone please help me shed some light on this problem?

Posted by dwelsh on 07/25, 12:41 PM

Bug:
when is display the sub menu as bellow

1- display on the right

2- display on the left

3- display on the right

....

impossible to display the sub menu on the left

if any parent are current display, the sub menu

cannot show.

Posted by CHAMNAN on 08/05, 07:57 PM

Hey, thanks man. Jchalos it helped much to me, because i am making one web page, that i need to complete ASAP, and i am using this tree menu script. Thanks.

Posted by Edgars on 08/14, 06:54 AM

I found this menu is useful for my project

Posted by Arif on 08/16, 12:58 AM

I am using the menu above an embedded Flash movie. It seems to work alright in Safari and Firefox but not in IE PC. The menu seems to open behind the Flash movie on the PC. Is there anything I can do?

Posted by Jerry Tucker on 08/19, 09:42 AM

I have the same problem - in IE submenu disappears when trying to go down in menu.. How can I fix this ? Help !

Posted by Justine on 08/22, 06:30 AM

Hi all

I'm really pleased with this menu, have a look at the link, I've been able to modify it to a very individual look. (Well I think so...)

BUT...

How would you go about having multiple menus on a page?

How would you get it to respond to seperate css?

Regards

Dave

PS - A trick for getting the menu to get the Z-Index to work in IE 6&7:

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font-size: small;
font-style: normal;
z-index: 50;
position: relative; /* This causes the Z-Index to work correctly in IE6&7 */
}

Posted by Dave on 08/28, 10:19 AM

Hi... Right I've started to try and get to grips with this..

I would like to have both a horizontal and a vertical menus on the same page...

It would seem that the two sets of JavaScript do not coexist on the same page.

The Vertical seems to be dominant and as soon as its added it seems to stop the horizontal menu from working.

I'm not a JavaScript programmer (Yet...?!?!)

Is it possible to have both Horzontal and Vertial Menus coexting on the same page?

Thanks

Dave

Posted by Dave on 08/28, 11:36 AM

OK.. Done It...

simply change the "var menuids" id's to be different so I made one "var menuid":

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

var menuid=["suckerfish1"] //Enter id(s) of SuckerTree UL menus, separated by commas

If you follow...

Regards

Dave

Posted by Dave on 08/28, 12:47 PM

Comment Pages 28 of 30 pages « First < 26 27 28 29 30 >