Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
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 (268)

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 26 of 27 pages « First  <  24 25 26 27 >

Does anyone know how to make it so the top level links aren't a fixed width?

width: 90px; /*Width of top level menu link items*/

I want it to be auto width - but setting it to auto (or just getting rid of the width statement) doesn't work in IE.

Thanks for your help!

Jon
Posted by jon on 05/05, 02:02 PM
very nice menu! and no problem at mozilla
Posted by web tasarundefined#305;mundefined#305; on 05/06, 10:58 AM
There is an adjustment that needs to be made in each individual users code within the holly hack for IE to correct the actual ul list position...

/* Holly Hack for IE \*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; } /* corrected to the proper level \*/
* html .suckertreemenu ul li ul li a { height: 1%; } /* corrected to the proper level \*/
/* End */
Posted by David on 05/13, 02:52 PM
I have modified the script, and replaced by the Images, but found some problems, please help to fix. Thanks!
Posted by ITSky8 on 05/22, 09:43 AM
In IE 7 the width looks ok but in firefox the last menu
runs under the first menu. In IE I have a 1-1/4 gap at the right
A great menu if it worked in all browsers. Why posted a menu if its not compatible to firefox?
Posted by Dave Young on 05/22, 11:24 AM
I am getting at Lexical error in the Javascript.
right here:

for (var i=0; i<menuids.length; i++){

it says: Encountered:"m"(109), after;"<"

anyone have any idea?
Posted by toast on 05/22, 07:31 PM
I have used this horizontal menu in my site but problem is that it's getting upload once all images get uploaded on the page till than submenu dosen't show on the page... Is there any way to show menu on first load..

Please help
Posted by sudhir madaan on 05/23, 12:14 AM
Problem if you put two sublevel folder. There's gap under them. Do you know how to fix it ?
Posted by MoxLotus on 05/28, 12:03 PM
/* Holly Hack for IE \*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; } /* corrected to the proper level \*/
* html .suckertreemenu ul li ul li a { height: 1%; } /* corrected to the proper level \*/
/* End */

Thx :)
Posted by MoxLotus on 05/28, 12:07 PM
Hi
Can anyone suggest me what to do with this menu to look same in IE and Firefox.
In IE it hide behind the slide show and in Firefox it is working very well.Please have a look www.anishinfoways.com/TAK
Posted by satish on 06/03, 07:25 AM

Comment Pages 26 of 27 pages « First  <  24 25 26 27 >

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Supported BB codes: [b], [i], [u], [em], [strike], [strong], [pre], [code], and [blockquote].

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below ("previewing" post does not require it):


Copyright 2006-2008 Dynamic Drive Read our Usage Terms before using any of the CSS codes.
Dynamic Drive DHTML and CSS Code Library