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

Hi there,

For the above example, if we do not want to display one menu Item for eg:Item 2 on a particular page but needed on another page, does anyone have an idea how to do that?

Posted by mask on 06/09, 10:17 AM

how do you alight the links or text to the left in this menu? tried simple <align="left"> in the html code but it didn't seem to function right

Posted by Andy Scolaro on 06/27, 10:38 AM

Hi guys,
this might be easy but I can't figure it out.
How to drop UP instead of drop down the sub-menus ?
It seems to me there is something about tweaking this line:
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"

any help/direction is appreciated, thanks.

Posted by Giorgio on 06/29, 11:05 AM

For the submenus that have folders (shoot out to the right) the gap inbetween (not shown in this example) is very large, and when you mouse over it the entire drop down closes. This is not related to a padding CSS Style because I rewrote nearly all of it.

This has been a good menu, but there are problems with it that will drive you crazy!

Posted by Brian Fancett on 06/29, 06:30 PM

when i minimize the web browser why does the menu slide to the left and not maintain it's position on the screen? how do i fix this? need to resolve this issue anybody know what i'm talking about here?

Posted by Andy Scolaro on 07/02, 11:45 AM

Hi I really like this. I will definetly use this in my future layout :D It really sounds great!

Posted by Jenny on 07/07, 07:38 PM

This problem occurs in Firefox 3 with the following menu structure

Root
- Child 1
- - Child 1.1
- - Child 1.2
- - Child 1.3
- Child 2
- - Child 2.1
- - Child 2.2
- - Child 2.3
- - Child 2.4

When you put the mouse over Root - Child 1 and 2 appear, and when you do the same to Child 1 its children appear. However if you put the mouse over Child 2, Child 1.1 still appears!!

Thanks

Posted by Fred on 07/14, 10:02 AM

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

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

Commenting is not available in this weblog entry.