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

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

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:

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

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 24 of 25 pages « First < 22 23 24 25 >

Oops, I put a link to the wrong page in my previous post.
It should have been:

http://reflectionsphotographybyroxanne.com/test-new.html

Posted by Roxanne on 08/29, 07:45 PM

Rox
Your code is a little mixed up I think.

You've got one too many </li>'s and some odd <centre> tags...

However it worked for me in firefox when I removed the following code:

<font face="verdana" size="3" color="#e2e2e2">

I usually put the minimum amount of code in and get things working and then style it afterwards. If it stops working I know I've done something.

So take out all the <Font> <Centre> tags etc check your <li></li> pair up correctly and it should work.

By the way I have a problem with the same menu not functioning in IE8. There seems to be a z-index issue.

The flop out second level menus drop below pictures.

Regards

Dave

Posted by Dave on 09/01, 07:22 AM

Thanks for your help. I did as you suggested and it's working now if I take out my flash movie, but it won't work if I have have flash on the page.
I saw in a lot of the other comments people have made that they have had the same problem, and I haven't seen a solution to it.

Posted by Roxanne on 09/01, 06:49 PM

many thanks.
this code is clear and understandable.
it toke me forever to find this kind of code.

another request... if you can diract me to css filter example it will be great.
again thank you.

Posted by mazal on 09/02, 02:34 AM

Rox

I see what you mean, I suspect your menu is working its just that the Flash is covering it...

Try putting the following in your flash object:

Worked for me here:
http://www.paritymedical.com/test/e-learning.html

Note: I was pleased to be able to get both horizontal and vertical menus coexistant on teh same page....

Regards

Dave

Posted by Dave on 09/02, 09:46 AM

Dave

Thanks for you help, but you didn't say what I should put in my flash object.
Could you please tell me what I should put, and were I should put it in my flash code?

Thanks

Roxanne

Posted by Roxanne on 09/02, 09:57 PM

Rox

Must be loosing it... Sorry...

It's this bit which does the trick....

Heres the code from my page.. So you know where it goes...

<object id="flash1" data="http://www.infologix.com/assets/anatomy-of-care/the-anatomy-of-care.swf" height="300" type="application/x-shockwave-flash" width="400">

</object>

Regards

Dave

Posted by Dave on 09/03, 01:57 AM

Rox

Oh...It doesnt show up.... So I'm not as daft as I thought...

I'll put round brackets instead of the pointed ones if you get me...

(param name="wmode" value="transparent" /)

(object id="flash1" data="http://www.infologix.com/assets/anatomy-of-care/the-anatomy-of-care.swf" height="300" type="application/x-shockwave-flash" width="400")
(param name="movie" value="http://www.infologix.com/assets/anatomy-of-care/the-anatomy-of-care.swf" /)(param name="wmode" value="transparent" /)
</object>

You can "View Source" on my page to see what I did..

Regards
Dave

Posted by Dave on 09/03, 02:02 AM

in Firefox if you add padding to the menus it leaves a nice gap(transparent) in between, & you can move the mouseover without the sub menu disappearing as though you have taken pointer off. This is not the case in IE7. Regardless of if you make the <a> tag height bigger.
Any ideas?

Posted by errol187 on 09/04, 05:57 AM

Dave

Thanks for you help again.

I tried changing my code and putting it the way you suggested, but it still didn't work. I noticed that the code for your flash was a little bit different from mine, so I think I probably used a different version of flash than you did. Also, the photos in my flash are linked to sections of my website, so I suspect that one of these things (probably the links) are causing the problem.

I'm changing the main page of my site, and I am going to be using different graphics on it. I would still like to have flash on the page, but I may not put links in it, so when I get the new flash made I will try it and see what happens.

Roxanne

Posted by Roxanne on 09/05, 02:00 PM

Comment Pages 24 of 25 pages « First < 22 23 24 25 >