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:
Rate this code:
Date Posted: 11/08/2006
Revision History: Updated Nov 8th, 06' to version 1.1
Usage Terms: Click here
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 »
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>
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
Looks great. Could you post a link to your CSS on the page above, or include it in a reply here?
Cheers,
Chris
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 { margin: 0; padding: 0; list-style-type: none; }
.suckerdiv ul li { position: relative; float:left; display:block; width:150px; background:white; }
.suckerdiv ul li ul { position: absolute; width: 160px; padding-top:1px; display: none; }
.suckerdiv ul li ul li ul{ left: 149px; top:0; padding-top:0; padding-left:1px; }
.suckerdiv ul li a { display: block; color: black; text-decoration: none; background: #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 { color: black; }
.suckerdiv ul li a:hover { background-color: yellow; }
.suckerdiv .subfolderstyle { background: url(arrow-list.gif) no-repeat center right; }
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
I apologize! It was very lazy of me
not to have viewed your source.
Thanks for responding.
Chris
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?
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?
/* 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;
}