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

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.


The single image:

The CSS:


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

I was wondering if there was any way to make the submenus always appear on top of text on the website? I need the menu to override any existing text if the user desires to view the full menu bar
Posted by David on 09/26, 12:39 PM
Javascript pop-up menus do not show over form items. It's probably true too of flash and java user controls too. Lesson: place your form elements far away from Javascript menus.
Posted by Chris on 09/26, 12:52 PM
I am merely try to get it to appear over text(not a text box)
Posted by David on 09/26, 12:54 PM
Is the text in a layer or css classed div?
That may be the problem.
Posted by Chris on 09/26, 01:13 PM
Hello, I was wondering if there is a way to make the drop out menus have like a 2second delay before disapearing.

I saw it on this web site and it would really help if someone could tell me how to do this to make it easier to navigate.

Thanks in advance
Posted by Tim on 10/05, 07:36 AM
I love this menu! Thank you for making it. Is there any way to get the pageup feature to work or to get the tree to reverse up when the menu gets to the bottom of the page? Any Holly Hacks greatly appreciated. I will post if I get it. Thanks!
Posted by 4um-facade on 10/07, 04:22 PM
Georgiana, change the background on the submenu from being transparent to white or whatever... then make sure that you did not hack it up trying (like i always do)--I had changed a 0 to a 1 in one spot on the values of the submenus and had the same problem...I was thinking I had made a negative 0 a positive 1, but it was really making the background white that did it for me - and watch the sequence of the li tags for sure... Here is a little red, white and black variation-except the page nor the menu moves to accomodate the edge of the screen either way. You have to manually "page up" or "page over" to see the entire menu...this between style tags:

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;

.suckerdiv ul li{
position: relative;

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 149px; /* Parent menu width - 1*/
position: absolute;
width: 160px; /*sub menu width*/
top: 0;
display: none;

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{
left: 159px; /* Parent menu width - 1*/

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background: #ffffff;
background-color: white;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;

.suckerdiv ul li a:visited{
background-color: white;
text-decoration: none;
color: black;

.suckerdiv ul li a:hover{
background-color: red;
text-decoration: underline;

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
background-color: white;

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

Posted by 4um-facade on 10/07, 04:42 PM
If I use this vertical menu on a frame on the left-hand side of my web page and if I expand the menu out to a sub item that extends past the right-hand edge of the frame will it extend into the frame to its right or will it not be visible? Just wondering...
Posted by Bob Bessette on 10/09, 08:23 AM
I am using this code to generate some company intranet pages. When I open up a sub menu which causes the vertical window to increase in size it is difficult at best to scroll through the submenu using a mouse... Is there anything I can add to the code to make this work better....
Posted by Tom on 10/09, 02:09 PM
I am new to this and am trying to use the vertical menu but it doesn't seem to work in many aspects. Can someone send me the URL to a website where they actually used this cascading menu. I can check the code and see what I am doing wrong.
Posted by Steve Seideman on 10/09, 02:21 PM

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