CSS Vertical Menu with Submenus [Archive]

squal

23rd April 07, 01:10 PM

Hello everyone,

I'm trying to make a vertical menu with pull down menus. I'm basing it on this one:

http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/

Still, my version needs more space, since they will look like buttons:

http://www.brechen.com/we_love_css_example/buttons.htm

This is mainly for IE 6 (and for 7 too, since they might be swithchint soon). The job is for an intranet, that's why compatibility should only be for IE (unfortunately).

The difference is that in my CSS (as opposed to the original sumbenu from dynamicdrive) I've added a height for the boxes of each li item (the main lists, not the nested ones). There seems to be a little movement when you hover over the items which have submenus.

Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<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.left=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.left=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>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="suckerdiv">
<ul id="suckertree1">
<li class="menu"><a href="#">Item 1</a></li>
<li class="menu"><a href="#">Item 2</a></li>
<li class="menu"><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li class="menu"><a href="#">Item 3</a></li>

<li class="menu"><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu"><a href="#">Item 4</a></li>
</ul>
</div>

</body>
</html>

And here's the CSS file:

a, li, ul, div{
margin: 0px;
}

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1em;
}

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 220px; /* Width of Menu Items */
height: 600px
}

.suckerdiv ul li{
position: relative;
height: 40px;
}

.menu {
background-image: url(src/Images/button_bknd.png);
background-repeat: no-repeat;
}

/*Sub level menu items */
.suckerdiv ul li ul{
height: 20px;
position: absolute;
width: 120px; /*sub menu width*/
top: 0;
visibility: hidden;
background-color: #FFFFFF;
line-height: 1em;
}

/* Sub level menu links style */
.suckerdiv ul li a{
height: 20px;
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 0px 0px;
border-bottom: 0;
width: 100%;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
font-weight: bold;
}

.suckerdiv .subfolderstyle{
/*background: url(file:///C|/Documents and Settings/borat soret/Desktop/media/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 */

Thanks very much in advance.
:D