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 7 of 25 pages « First < 5 6 7 8 9 > Last »

excuse me is not this menu, im talkin about the one that has background images

Posted by Jose on 12/18, 11:05 PM

Thanks for a very tidy and lightweight menu, I'd never be able to chew through this much CSS!

I am however learning PHP at the mo, and I have written a function that populates this menu on the fly with categories and unlimited sub categories.

It needed a java tweak to work (but dont ask me why)

I changed:
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
to be:
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"

If anyone would like the function to write out the menu then please feel free to ask, and if you want to see the menu workin on my local test server then its available at unisupuk.selfip.com (when im at home).

Now to get the horizontal version doing the same....Iv been at this for ove ten hours now, so maybe ill leave that till the morning! ;)

Posted by Ben Duffin on 12/19, 07:55 PM

Love the menu, but am having a slight problem after attempting to customize it. Any chance someone could take a look at my source code and see if they can spot the mistake?

Here's the page with the navigation:

http://www.cymru66.com/runningetc/navtest.php

The problem is with the mouseover on the "Directions" and "Specials" links. See how the sub categories jump to the top of the DIV? Tried all sorts of things to fix it but with no success.

Many thanks in advance,

Steve

Posted by steve on 12/20, 12:21 PM

Okay, two things:
1. For some reason, the submenus will only show up in IE if you go back and then forward. It'll mess up if you refresh.
2. I want the submenus to have rounded corners, like the rest of the site. How would I do that?

http://www.sicksoft.com/phptest5

Posted by MarioGamer99 on 12/20, 05:10 PM

Hi,

I really like this menu but I have two small problems:

1. A small 7-8px transparent gap appears at the end of the menu when there are sub links.
2. My border-bottom does not join up with the border-right on the outside of the menu.

I have spent ages trying to fix these but have had no luck, I don't know whether it is my div tags or the menu css. This problem occurs in ff and ie7 but not ie6. If you go to the 'school life' page you get a better view of what I mean.

Thanks alot.

http://www.cardinal-heenan.org.uk

Posted by Mike on 12/21, 05:15 AM

I can help with the transparent background issue. I thought I had posted here, but must have been on the horizontal, which I find a LOT more challenging, too-in fact had to replace it for a while.

In the text CSS, whereever applicable add a background color, I am using the 6 digit codes or CSS names such as maroon #800000, red #ff0000, orange #ffa500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080

background-color: #FFFFFF;

I added a background to almost every option. I am not as skilled as most of you, so that is what worked for me. (I tried using #fff, but it did not work for me.)

hover color - just change the yellow

image change from arrows, keep same size, make sure they're in the correct directory for the path

watch the path on EVERYTHING & make sure your opening AND closing <ul> <liL </li> </ul> tags are in the right order.

Does anyone have BOTH the matching horizontal and vertical menus running? I had it and lost it... I also would like to keep the menu on a remote call, so the changes only need to be done once. I can only keep the horizontal (not this menu) one that way right now. Love this menu! Thank you again for creating it! Happy Holidays!
4um

Posted by 4um-facade on 12/24, 06:52 PM

Hello MarioGamer99,
"...
2. I want the submenus to have rounded corners, like the rest of the site. How would I do that?
http://www.sicksoft.com/phptest5
..."

Hope this helps with the rounded corners:
http://webdesign.about.com/od/css/a/aa072406.htm
4um

Posted by 4um-facade on 12/31, 04:10 PM

Thanks. Niftycube seems promising.

Arrg... I've even seen that article before, I just forgot about it.

Posted by MarioGamer99 on 01/02, 06:53 AM

This menu is not working with IE7. When mouseover, there is a white space below.

Posted by ieWilk on 01/03, 10:43 AM

I was wondering if there is a way to fix the menu, it will not work at all in IE7, its driving me insane lol

Posted by nikki on 01/05, 07:16 PM

Comment Pages 7 of 25 pages « First < 5 6 7 8 9 > Last »