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 19 of 23 pages « First < 17 18 19 20 21 > Last »
...
Instead of dropping down from the right-hand side :3
You closed folders 1.1 and 1.2 with </li> before the subitems. That is incorrect syntax, and only IE renders that.
The above was a response to the last message on the first page. I didn't see that the messages covered 19 pages until I clicked Submit. Please ignore/delete the above and this message.
I firstly like to thank the creators of this script! Its working absolutely beautifull and is very easy :)
Soon i will be making it dynamic using a database.
The only "problem" i got is that there is no delay on the MouseOut Function. Now i know this has been asked two or three times befor, but can any1 think of a way to make a OnMouseOut delay so that the menu wont inmediatly disappeer?
The site where i use my script is:
http://www.bowser18.nl/carsystem/
I had some trouble with the code. What I wanted was 2 color instead of white or transparent. In addition to more space and width. So I had to make some changes and after studying hard I finally got. I hope it helps everyone else who has had this problem with the code.Here is the css code:
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 248px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.suckerdiv ul li{
position: relative;
}
/*1st level sub menu style */
.suckerdiv ul li ul{
left: 248px; /* Parent menu width - 1*/
position: absolute;
width: 259px; /*sub menu width*/
top: 0;
display: none;
}
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{
left: 258px; /* Parent menu width - 1*/
}
/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background: #FFFFE0;
background-color: LightYellow;
padding: 3px 7px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
background-color: LightYellow;
text-decoration: none;
color: black;
}
.suckerdiv ul li a:hover{
background-color: aqua;
text-decoration: underline;
}
/* menu folder style */
.suckerdiv ul li{
background-color: LightYellow;
}
.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}
background-color: LightYellow;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
I am a begginer and i love webdesign. I am rightnow learning flash and the Dynamic drive but i have a big problem of making it activ in IE. Firefox taks everything well but in IE I must EVERY TIME activate the activX on the adressbar so that the effects ca be seen! Anything i do in flash never work :( May someone help with this activator please
Comment Pages 19 of 23 pages « First < 17 18 19 20 21 > Last »
I tried to do what someone commented.. with a <body=rtl>... but that made everything shift sides...