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

how can I position menu to the left of the menu item that activated it?
Posted by keko on 06/09, 09:14 PM
Dear Sir, Your design is a masterpiece!

I have one question:

I try to copy the SCRIPT as a independent file then link to the main HTML page.

However, I was warmed by dreamweaver that there occurs a error in this line:

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

I don't know why it works well once it writes into the same HTML but error in independent file.

Please kindly indicate!

Thank you in advance!


Ally Tom
Posted by Ally Rafter on 06/12, 08:14 AM

Comment Pages 28 of 28 pages « First  <  26 27 28

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