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

Any fix for the select box issue?

Posted by Clarence on 10/29, 06:50 AM

i want to display the submenu at level 2 towards left,
not towards right.
pl. help me soon.

Posted by vishal on 11/02, 12:36 AM

If placed in a small frame the main menu will show up vertical. The submenu opens under the mainmenu. is it possible to make the submenu overlay the main menu? i thought z-index would do the job, but it didn't.

Posted by Martin Verstegen on 11/07, 04:35 AM

Is there an "if" statement that could effectively change the size of the menu bar and buttons when a different size screen is used?

i.e. 800 x 600 ==smaller buttons to fit screen, 1078 x ??? ==larger buttons/menu bar.

Posted by greg on 11/27, 08:34 AM

i am sorry...but i dont like these stuff..mr.rigmey is making us do lots of stuff!!!

Posted by i dont like this stuff on 12/03, 12:57 PM

Why is a javascript activated menu included in the CSS section? Horizontal expanding Javascript menus with far more features are available all over the place, do the same using only CSS and you have something worth posting. As a menus it's great, as a CSS menu it does not qualify.

Posted by Jeepers on 12/05, 09:16 AM

A great concept and something I've been looking to find for ages BUT I'm having the same issues with the dropdown menus flittering much too much when mousing down the selections in IE7 running Windows XP. In fact, the Folder 2 submenus flicker so fast that you can't even read the menu options most of the time. It's a crapshoot but I'd say it happens 4 out of 5 times when I mouse through the menu selections that have sub menus (dropdowns). I did try inserting the fix listed above. It did not help at all. Everything seems to work fine on this site's demo above and in Firefox but not in IE7. Any suggestions? It's SOOOOOO close!

Posted by mallan on 12/10, 09:38 PM

It would help if I had read through all the other postings. I didn't realize there were 23 pages of them! I thought they were all on one. How stupid! Anyway, the one suggestion that seemed to work for me making the dropdowns stay visible in IE7 is the padding suggestion of changing them to "0" as shown below in the little snippet. Hope this helps others too and thanks for the suggestion. Much appreciated.

/* 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: 0px 0px;
border: 1px solid #ccc;
}

Posted by mallan on 12/11, 08:15 AM

having trouble getting this badboy throught w3c validation...the ; is not allowed after length...
any ideas how to sort it? not the best at fiddling with script

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){

Posted by mdk on 12/15, 01:43 PM

I just learned today that it this does not look right with firefox 2.0 I am not very good at this whole code thing so if someone could please help me patch it to make it with firefox 2.0 i would appreciate it

Posted by Chris on 01/15, 01:27 PM

Comment Pages 22 of 30 pages « First < 20 21 22 23 24 > Last »