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

Got it :) ,. i just went to the CSS, i just over looked the css code. added a background attribute, and i think its just the positioning of the image. the hieght of first background image i put was not that high. reffered to the http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/

/* menu links style */
.suckerdiv ul li a{
display: block;
color: #fff;
font-weight:bold;
text-decoration: none;
background: #fff;
padding: 5px 7px 0px 5px;
border: 1px solid #000000;
border-bottom: 0;
background: url(glossyback.gif) top right;
}
Posted by Andrew on 08/21, 12:05 AM
Hi Andrew,

Thank you for your quick reply. Unfortunately, the change did not make a difference. I did however find the problem. It was not a css thing, but rather a list thing. I'd done this...

<li><a href="#">Folder 1</a>
  <
ul>
  <
li><a href="#">Folder 1.1</a></li>  <!-- wrong /li termination -->
<
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> <!-- wrong /li termination -->
<
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

...when I should have done below.
FF is not as forgiving with lists as IE,
but it certainly forces you to do it right.

<li><a href="#">Folder 1</a>
  <
ul>
  <
li><a href="#">Folder 1.1</a>
<
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> <!-- right /li termination -->
  <
li><a href="#">Folder 1.2</a>
<
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>
  </
li> <!-- right /li termination -->
  </
ul>
</
li
Posted by Chris on 08/21, 07:04 AM
Hi,

I liked this menu alot but i needed it to be horizontal so i tweaked it a bit.

http://www.zorker.de/dynamic_menu_horizontal.html

wbr,
Erik - Germany
Posted by Erik on 08/24, 06:09 AM
Erik,

Looks great. Could you post a link to your CSS on the page above, or include it in a reply here?

Cheers,

Chris
Posted by Chris on 08/24, 06:20 AM
Eh...

Dear Chris, all the CSS is included in the HTML file, as you can see no external CSS file is linked in the source code.

Well no problem i cleaned the code up a bit and here we go:

.suckerdiv ul { margin0padding0; list-style-typenone}
.suckerdiv ul li { positionrelativefloat:leftdisplay:blockwidth:150pxbackground:white}
.suckerdiv ul li ul { positionabsolutewidth160pxpadding-top:1pxdisplaynone}
.suckerdiv ul li ul li ul{ left149pxtop:0padding-top:0padding-left:1px}
.suckerdiv ul li a { displayblockcolorblacktext-decorationnonebackground#fff; padding: 1px 5px; border: 1px solid #ccc; margin-right:1px; }
.suckerdiv ul li ul li a { margin-bottom:1px}
.suckerdiv ul li a:visited { colorblack}
.suckerdiv ul li a:hover { background-coloryellow}
.suckerdiv .subfolderstyle { backgroundurl(arrow-list.gifno-repeat center right}

/* Holly Hack for IE \*/
html .suckerdiv ul li { floatleftheight1%; }
html .suckerdiv ul li a { height1%; }
/* End */ 
Posted by Erik on 08/24, 06:59 AM
Erik,

I apologize! It was very lazy of me
not to have viewed your source.
Thanks for responding.

Chris
Posted by Chris on 08/24, 07:12 AM
I've a little problem with my suckertree menus... with IE, of course :S
When I put the mouse over the folders for the first time, the submenus have no border... if I do it one more time the border is ok. It's horrible.
It happens when the border is defined for <ul>. If you define the border for links it's ok, but I don't like it so much :( I preffer the tag <ul> borders
¿Can someone help me?
Posted by John on 08/24, 11:22 AM
Hi Erik

I tried to visit your link to the horizontal but the server could not be found. Can i just plop your css edit into this one?
Posted by Lance on 08/27, 11:53 AM
Nevermind Erik, i asked too soon. It did work. Now i'll have to code this into mine. Yay - fun.
Posted by Lance on 08/27, 11:55 AM
HELP! Every time I go to a sub menu page the sub menu becomes transparent and therefore you cannot click on it. What am I doing wrong?
Posted by Georgina on 09/25, 06:22 AM

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