Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


The two bullet images used:

The CSS:


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 4 of 32 pages « First  <  2 3 4 5 6 >  Last »

Looking OK. But we have seen in somany sites this type of tuto.
Posted by Reddy on 11/03, 12:32 AM
For Folder1, Folder2 classes submenu borders not collapsing..

If I use black color for Sub Folders its showing clearing..

Can anybody Please....

Posted by Reddy on 11/03, 04:27 AM
USE xhtml with CSS?!it is a cool menu!
Posted by XHTMLSEO on 11/07, 10:00 PM
I noticed that in IE, if you have a folder with a sub folder that has three elements, it breaks the menu system. I also noticed that IE6 makes the menu a different length than other browsers. So I came up with the following solution. You put your menu css in a sepearte css and make, another one that is almost the exact same except it has a different length. You can then do the following in the head of the html file in order to get the right stylesheet to load based on the browser: (I also put the javascript in a seperate .js file to make the html a little cleaner for me)

<!-- Primary Stylesheet -->
<link rel="StyleSheet" href="stylesheets/standard.css" title="standard" type="text/css" />

<!-- Imports Regular Version of menu stylesheet IE Ignores this stylesheet-->
<link rel="StyleSheet" href="stylesheets/menu.css" title="standard" type="text/css" DISABLED />

<!-- Imports Special IE6 Version of menu stylesheet -->
<!--[if IE 6]>
<link rel="StyleSheet" href="stylesheets/ie6menu.css" title="standard" type="text/css" />

<!-- Allows IE7 to Use regular stylesheet -->
<!--[if IE 7]>
<link rel="StyleSheet" href="stylesheets/menu.css" title="standard" type="text/css" />

<!-- Menu Javascript Import -->
<script src="menu.js"></script>
Posted by Josh Pennington on 11/08, 11:29 PM
Anyone know if I go over the submenu, when I'm over the content, the menu dissapear. I can navigate on first 2 submenu, then is dissapera. It is happening in IE7, in Firefox is OK, not tested in IE 6 or lower.
Posted by Valics Lehel on 11/13, 01:27 PM
Very Good Q

How I can center ALIGN this menu on page
I tried to put this menu in table and used and align tag, but no luck. It center align text not menu. Same happened when I used align=center in DIV

Any idea?

Posted by MenuLover on 11/13, 08:53 PM
I got the script to work and everything, and have customised it a little, but the first item on the list shows a black line to the left of it, as if there is a border only on the left box. Go to my url to see what i mean. is there a css list-style command to stop this from happening?

Posted by Max on 11/14, 09:38 AM
here is the page:
Posted by Max on 11/14, 09:38 AM
DONT WORRY ABOUT ABOVE QUESTION! thanks anyway, i have figured it out with some help from a daniweb forum. One question through:

Firefox compatibility?

Submenus showing up underneath main menus in firefox (latest - just downloaded)


Posted by Max on 11/14, 12:18 PM
Nice menu, any idea why it wouldn't work in Mac Firefox? Or in Mac IE 5.0 or 5.1, which many people on OS 9 are still using?

Dropdown menu works in Win IE 6 and 7, and Win Firefox 1.5. Also in Mac Safari 2.04, Mac Opera 9, Mac Omniweb 5.5, Mac Flock 0.515, Mac Shiira 1.22, Mac Netscape 7.2, Mac Mozilla 1.712,

Also works in Win IE5.5, but shifts about 20px to the right.

Menu does not dropdown in Mac Firefox 1.5 or 2.0, Mac IE 5.0, 5.1, 5.2.
Posted by Jon on 11/15, 07:54 AM

Comment Pages 4 of 32 pages « First  <  2 3 4 5 6 >  Last »

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