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

This code is discustingly long. Although good, it's very long.
Posted by Clint on 11/15, 12:39 PM
I would love some help here. My code seems to break the suckertree menu both in IE v6.0.2900 and Firefox
v1.5.0.8. I am using Windows XP. I have put in the hacks that have been mentioned, but they don't work for me :-(

Firstly my second level menu will only allow me to have the following padding line:
padding: 0px 5px;
When I changed the 0 to a 1, the second level menu would disappear because it can't find the link.

Secondly, if I don't put the cursor over the actual link text, the sub level menu disappears. Shouldn't the menu remain displayed when I am inside the width of the link?

Thirdly, the biggest problem I have is when I have text under the sublevel menu. This happens on both the home page and on the corporate page. On the corporate page, the other two sub level menu items can't be selected because the menu disappears. As for the home page, I just moved the "Welcome to Floriart" further down the page to make the problem go away. I would love this text to be positioned higher up but if I do that now, the sub level menu items can't all be selected.

In firefox, nothing can be selected on the sub level menu.

Can anyone tell me what I have done wrong?

Thanks, Kylie
Posted by Kylie on 11/18, 11:42 PM
Here is the home page:-
http://home.exetel.com.au/jebbie/index2.html
Posted by Kylie on 11/19, 12:00 AM
guys i do have a problem, the menu doesnt work if there is a falsh animation below the menu, that is the menu appears behind the flash and if somehow you refresh the page then it appears actually, thats weird! can somehow advise?
Posted by David on 11/20, 06:10 AM
Moving too quickly when using IE 7 causes the drop-downs/pop-out menus to disappear.

Any idea what would cause this?

Also, have any of the browser hacks been put into the code for this, or is it still the original version?
Posted by J on 11/20, 04:41 PM
Same here, moving fast over drop down in IE7 have menu dissapear, unusable.
Posted by Valics Lehel on 11/20, 05:22 PM
Have <select> below the menu. When expand sub-folder, menu is covered by <select>. How to resolve ?
Posted by May on 11/21, 03:28 AM
I am experiencing the same problem with IE 7. It was fine with all other versions.

If you hover on a sub menu, and then move and hover on another submenu (of same parent) the previous stays in the hover state. Then, when you move away from menu completely, then return, the submenu is clear - except for border.

For demo: http://www.chefs2go.net
Posted by Ryan on 11/21, 12:58 PM
Referring to comment on Page 2 posted by Peter Armenti. he has same problem as me and i think he resolved the problem because the link http://lirebaterealtor.idxbroker.com/idx/search.cfm?clf=3&cid=9689&cnty=1866&countySorterYN=1 given is working.
That is, hover over 'Rebate Info' and the submenu appears in front of the selection 'Property Type'.

How to do that ? please help.

I tried using z-index, but it is not working. And I have searched the web and there is no solution to this.
Posted by May on 11/21, 09:26 PM
If I add Sub-Item 2.2 under Folder 2.1, there is a gap between Sub-Item 2.2 and Folder 2.1. How to remove the gap ?
Posted by May on 11/22, 03:17 AM

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


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