Dynamic Drive CSS Library- SuckerTree Horizontal Menu

CSS Library: Horizontal CSS Menus: Here

SuckerTree Horizontal Menu

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

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

damned!
I used an external CSS for defining my "A:Link, A:Visited..." etc.
In Opera it works without any problem.
But with the IE there ist no menu shown, only the words under each other.

I searched and searched and searched an NOBODY told me about my mistake! :-(

After changing the css to "A.norm:Link, A.norm:Visited..." it works fine!

THANKS!

Posted by Martin on 06/04, 01:13 PM

Hi everyone!

My web site is not listed becaues it is not complete, but the Sucker Tree Horiziontal Menu is idea for the my web design in my main web page. Althoungh, my page is not complete, to the creator "Thank You" for the script and a host of ideas of developing useful menu items.

So far with the implementation of the menu items, there does not appear to be any issues of coding (copy and paste), customizing, or operation in the site.

Once again, Thank you.

Posted by carl on 06/05, 11:28 AM

Is there any way to prevent the shifting in IE when you hover over links? It is quite annoying. It doesn't do this in firefox. It seems like when you hover, it shifts the rest of the page down a notch. Thanks for your help-

Posted by Tara J. Fuller on 06/06, 11:16 AM

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

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