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

In regards to the gap, I have that too, it does bother me a bit, but I can live with it.
Posted by Mitchell on 10/25, 04:25 AM
I resolved the top-most, first menu item left border issue:

<li>Item 1</li>
Posted by Chris on 10/25, 08:03 AM
That didn't look too good...

style="border-left: 1px solid #YOUR COLOR HERE"
Posted by Chris on 10/25, 08:08 AM
This script works great. I am new to CSS so this question is probably an easy one, but I am trying to move the menu to an specific position on my page.

If I add:
top: 140px;
left: 160px;

To this portion of the script:
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
top: 140px;
left: 160px;
display: inline;
float: left;
background-color: #0000ff; /*overall menu background color*/
}

I can get the Top level menu moved to the position I want but then all of the sub menus are off by about 100px

The submenus work they just appear way below the top menu. Is there an easy fix to this?
Posted by gusto on 10/27, 10:44 AM
I had this same problem at first.. you might want to check your markup and make sure you don't have any open tags as I found an open font tag that was throwing it off.

An easier solution might be to position a table and place it within the table. Although, I realize this might defeat the reason some people are using css.

I realize it might defeat the purpose of CSS.. but you COULD
Posted by Peter Armenti on 10/27, 12:23 PM
I double checked the markup and it all look ok. I did figure out if I add left: -160px; to the 1st sub level menu it negates the left: 160px; command from the top level menu. But I still can't get it to come up. My submenu is 140px below the top menu. If I try top: -140px; it doesn't change anything.

I noticed in the Javascript that the line:
ultags[t].style.top=ultags[t][removed].offsetHeight+"px"

Is suppose to dynamically position first level submenus to be the height of main menu. What am I missing? I am testing this page in IE7 Final Release as my old html and javascript menu isn't working right.
Posted by gusto on 10/27, 04:46 PM
There is an issue I discovered - I hope I can explain this right. There is an extra line placed below any box that triggers a 2nd level menu. You can see the error on this page if you select all (Ctrl+A) and hover over the "Folder 2" box above and look at the very bottom of the drop-down menu. Compare it to the bottom of the drop-down on "Folder 1" (while keeping "select all" going).

The reason the extra pixel on the menu above doesn't affect the menu is because the 2nd level menu trigger is the last item on the drop down. But if you have a 2nd level menu trigger which isn't the last item on the menu then that extra pixel width creates a 1 pixel gap between that box and the box below it.

This is happening in IE6 but not firefox.
Posted by Kieran Kiely on 10/29, 07:11 PM
P.S. - I set this menu up so that the top items wouldn't be clickable. This had the unwanted effect of changing the cursor to a text selector cursor which was ugly. I changed this by adding in

cursor: default;

in the main div. So now it looks like there are non-clickable images triggering the drop-down even though there aren't.

P.P.S. - Is there a way to surround a WHOLE drop-down DIV with a border without having individual borders on each drop-down box?

P.P.P.S. - The menu is the last thing to load on the page. Does anyone know how to change this?
Posted by Kieran Kiely on 10/29, 07:18 PM
I have the same problem... Can anybody help us. ?
Posted by Konstantin on 10/30, 10:00 AM
Works fine in IE6 for me.
Posted by Mario on 11/02, 09:56 PM

Comment Pages 3 of 32 pages  <  1 2 3 4 5 >  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.