Dynamic Drive CSS Library- SuckerTree Vertical Menu (v1.1)

CSS Library: Vertical CSS Menus: Here

SuckerTree Vertical Menu (v1.1)

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:

<style type="text/css">

.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(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 */

</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.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>

The HTML:

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><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><a href="#">Item 3</a></li>

<li><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><a href="#">Item 4</a></li>
</ul>
</div>

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 (219)

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 4 of 22 pages « First < 2 3 4 5 6 > Last »

I just posted another memo about using the vertical menus. I wouold like to see an example of it so sending me a URl would work. I am using an external CSS style sheet which the instructions do not address. If anyone knows of a URL where this vertical menu is used in an external style sheet, I would be thankful

Posted by Steve Seideman on 10/09, 02:26 PM

Hello,
Bob, I think that if the menu hits the side of the frame, it will stop or cut off...that is what it does if it needs "page up" or "over" or "page down" in one window. It also has an alignment thing within the parent tabs...have to REALLY watch the <li> tags!

Steve, I had it working perfectly and the horizontal, too, but I did something...I have no idea what...I have missed my deadline (today)... the preliminary post is:

http://www.dnashopper.com/cccc/cccc-home-pr.html
Any comments are greatly appreciated! It was working perfectly, then I did something(?) and the drop-down links nor the vertical parent links work properly and it has the same transparent background for each of the parent menu tabs as I just told Georgiana how to fix! Well, maybe not so fast, Georgiana...I guess I do not know what I am talking about after all, sorry!

Here is a link for what you may be looking for, Steve, possibly what I need, too?
http://www.milonic.com/mfa/2003-January/001643.html

Thanks in advance to everyone, it is a beautiful menu...4um

Posted by Anita on 10/09, 09:39 PM

can it be from right to left man ????
i want ur help
waiting for reply

Posted by mahmoudd on 10/12, 10:01 AM

Great work.It is Popup blocker restricting me when I use this code. Can you plz give me some suggesition to overcome this problem.

Posted by raghava on 10/13, 08:03 AM

Yes, pop-up blocker is a major annoyance in many ways. I forgot about that - could be my problem, too...Of course, if we have the problem, we need to design around it. Thank you for mentioning, raghava.
4um

Posted by 4um-facade on 10/13, 07:36 PM

I used this vertical menu and thought it was successful . Then I changed the color of the background to red. Any main menu item without a folder or subfolder would change to a red background but once you attach a submenu it stays white. I have spent numerous hours on this. One person told sent me an example of their use of this menu and they had the same problem. I even used the code of the demo and I get the same thing. Does anyone have an idea of how to fix this??

Posted by Steve Seideman on 10/16, 01:04 PM

Can you please help, what should be included in the CSS to create menu/submenus for Netscape & Firefox, Mozilla browsers. It works fine in IE.

Posted by tanu on 10/17, 04:46 AM

I am really proud to say that u have done a very good job. I have been searching for such a code for few days. Thanks

Posted by shamnar on 10/17, 10:41 PM

Im new in this and was really happy to use it but i use a cms which uses only php codes (with "content=" on startup).
I edited the code to what i need it, added backgrounds and rollovers but after converting the code to php the script wont show me sub menus.
Could anyone help me?

Posted by Sebastian on 10/28, 04:11 PM

There are problems with IE7. not show the slide o menu

hi

Posted by dadepax on 11/01, 05:27 AM

Comment Pages 4 of 22 pages « First < 2 3 4 5 6 > Last »