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: Vertical CSS Menus: Here

SuckerTree Vertical Menu (v1.1)

Author: Dynamic Drive

Nov 8th, 06: Fixed rendering issue in IE7, plus added support for automatic detection of sub menus width. No more configuring the "left" attributes!

This is a vertical, predominantly CSS based (with a touch of JavaScript) multi-level menu. It supports as many sub levels as you desire, plus multiple Suckertree menus on the same page. The CSS and JavaScript automatically adopts to your HTML code in each case.

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 behavior to them. This differs from Suckerfish menu, which merely uses JavaScript to compensate for IE's shortcomings when it comes to CSS, so the menu is more rigid and requires manual changes to the CSS as the number of levels in your menu changes.

Demo:

The single image:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 11/08/2006

Revision History: Updated Nov 8th, 06' to version 1.1

Usage Terms: Click here

Your Comments (272)

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

For IE7 you need to add width to
.suckerdiv ul li a {
width: 100%;
}
Posted by Greg on 08/05, 07:31 AM
is there a way to put a background on this?
Posted by dragon on 08/07, 04:48 PM
Great stuff. Was trying to do just this yesterday.
Posted by George on 08/11, 03:07 AM
what's the best way to highlight the parent when hovering over a a child?
Posted by Jacob on 08/17, 03:52 AM
Hi ...

Can we get data dynamically for this menu?

Thnx
Brajendu
Posted by Brajendu on 08/17, 06:14 AM
Yes you can, just write code using a for or loop statement to write out the <ul> and <li> tags.

here's a start in asp.net:

if (dataSource != null) {

_html.Append("<ul>");

foreach (object dataObject in dataSource) {

_html.Append("<li>");

_html.Append(dataObject.ToString());

_html.Append("</li>");

}

_html.Append("</ul>");

}
Posted by Jacob on 08/17, 08:29 PM
Can you make this into a horizontal menu in a few code changes or does it need the whole thing to be redesigned?
Posted by KoH on 08/18, 05:48 PM
('cause i can't find any easy horizontal menus with dropdowns)
Posted by KoH on 08/18, 05:54 PM
How do i put a background image on this? i mean i got the codes, and it works on FF but the stupid IE doesnt. help please.
Posted by Andrew on 08/20, 02:23 PM
Greetings:

The below list structure will work swell in IE, but will not show any submenus from Folder 1.2 in FF. I'm stumped.

Any work-arounds for this?

Cheers,

Chris

<div class="suckerdiv">
<
ul id="suckertree1">
<
li><a href="#">Item 1</a></li>
<
li><a href="#">Item 2</a></li>
<
li><a href="#">Folder 1</a>
  <
ul>
  <
li><a href="#">Folder 1.1</a></li>
<
ul>
<
li><a href="#">Sub Item 1.1.1</a></li>
<
li><a href="#">Sub Item 1.1.2</a></li>
<
li><a href="#">Sub Item 1.1.3</a></li>
</
ul>
  <
li><a href="#">Folder 1.2</a></li>
<
ul>
<
li><a href="#">Sub Item 1.2.1</a></li>
<
li><a href="#">Sub Item 1.2.2</a></li>
<
li><a href="#">Sub Item 1.2.3</a></li>
</
ul>
  </
ul>
</
li>
<
li><a href="#">Item 3</a></li>
<
li><a href="#">Folder 2</a>
  <
ul>
  <
li><a href="#">Sub Item 2.1</a></li>
  <
li><a href="#">Folder 2.1</a>
    <
ul>
    <
li><a href="#">Sub Item 2.1.1</a></li>
    <
li><a href="#">Sub Item 2.1.2</a></li>
    <
li><a href="#">Sub Item 2.1.3</a></li>
    <
li><a href="#">Sub Item 2.1.4</a></li>
    <
li><a href="#">Sub Item 2.1.5</a></li>
    <
li><a href="#">Sub Item 2.1.6</a></li>
    </
ul>
  </
li>
</
ul>
</
li>
<
li><a href="#">Item 4</a></li>
</
ul>
</
div
Posted by Chris on 08/20, 09:54 PM

Comment Pages 1 of 28 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.