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 12 of 28 pages « First < 10 11 12 13 14 > Last »
http://www.paragontravel.com/mma/test page.htm
I can't seem to get the menu to open up and also its not left aligning.
Thanks, Mathees
i am very Thankful to you ,
The give suckerdiv script is working fine but
the menu is displaying at the back of the windows media player .:-(
Please give me a suggestion as soon as possible
thanks
vijay
Jeremy
Thank you veyr much for this work.
I will use it for my catgory selecting.
Best Regards
But, do I include a second menu in my document, than the script doesn't work. I did the changes in the jscript "var menuids=["suckertree1,suckertree2"] and named the ul-ids <ul id="suckertree1"> and <ul id="suckertree2">.
But, it doesn't work. Is there any clue? Did I forget something? Please help.
Frome Right to Left Menu:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tree Menu_Vertical</title>
<style type="text/css">
/* TreeMenu Vertical - START */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.suckerdiv ul li{
position: relative;
}
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
background-color: yellow;
}
.suckerdiv .subfolderstyle{
background: url(arrow-list-right.gif) no-repeat center left;/* right or left */
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: right; height: 1%; }/* right or left */
* html .suckerdiv ul li a { height: 1%; }
/* TreeMenu Vertical - END */
</style>
<script type="text/javascript">
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.right=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.right=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
</head>
<body dir=rtl><!-- right or left dir=ltr or dir=rtl -->
<!-- Tree Menu - START -->
<div class="suckerdiv">
<ul id="suckertree1">
<li>Item 1</li>
<li>Item 2</li>
<li>Folder 1
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
</li>
<li>Item 3</li>
<li>Folder 2
<ul>
<li>Sub Item 2.1</li>
<li>Folder 2.1
<ul>
<li>Sub Item 2.1.1</li>
<li>Sub Item 2.1.2</li>
<li>Sub Item 2.1.3</li>
<li>www.ad3.co.il</li>
</ul>
</li>
</ul>
</li>
<li>Item 4</li>
</ul>
</div>
<!-- Tree Menu - END -->
</body>
</html>
Comment Pages 12 of 28 pages « First < 10 11 12 13 14 > Last »
Commenting is not available in this weblog entry.