Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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 1 of 32 pages  1 2 3 >  Last »

Stylish AND lightweight... definitely worth the use!
Posted by Nathan on 09/14, 07:37 PM
Nice menu. What about a compatibility list on IE,FF,Opera and Safari?
Posted by Andrea on 09/15, 02:49 AM
The menu was successfully tested in IE6, Firefox 1.5, Opera 9, and IE7 RC1. Not sure about Safari yet, though appreciate any feedback on that and other browsers.
Posted by ddadmin on 09/15, 03:09 AM
seems all good in safari
Posted by ixley on 09/15, 11:40 AM
It doesn't work properly in IE6 or 7 for me. If i move my cursor down the submenu, when it gets to bottom it wigs out. Then if i move my cursor back up the list, all the links stay on the hover state.

This is what I see viewing this page in IE(6 & 7)
Posted by Miz on 09/17, 03:33 AM
I agree with "Posted by Miz on 09/17, 01:33 AM". Even i tried to make it run on IE 6 and spend almost a whole day to figure out but it didnt work.
Posted by Deepak on 09/20, 11:43 AM
For those having problems, please provide as much info on your system as possible (ie: OS, any other useful info), and whether the issue occurs with the demo you see here as well.
Posted by ddadmin on 09/20, 03:20 PM
In IE(this works fine in firefox) Each "folder" has a space of a few pixels underneath it if you add 3 or more sub-menus. Is this a problem with the script or stylesheet?
Posted by jchalos on 09/21, 01:58 PM
It seems as though the gap is present even in a single sub-menu. The space cosmetically doesn't bother me, but when there is text in the layer underneath, the menu is hidden when you bring the mouse over one of these gaps. I am not very familiar with the css nor the many bugs in ie's css processing, so any help is appreciated. I am using WinXP sp2, and ie 6.0.2900.
Posted by jchalos on 09/22, 03:12 PM
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 */


Hopefully this helps someone else.
Posted by jchalos on 09/25, 09:36 AM

Comment Pages 1 of 32 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.