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

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

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 27 of 28 pages « First < 25 26 27 28 >

This Script not workin in mozilla firefox

Posted by Arun on 02/15, 12:31 AM

Hi
Great menu over all, but it has a small issue
If I set for submenus a negative margin (I need this)
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
margin-left:-20px;
}
see "margin-left:-20px" then a weird thing happens, In the first submenu, the first item is ok, but second has a wrong zIndex, however for 3 level this works ok.
Can't figure out what can be wrong?
Any idea?
thx

Posted by Eugen on 02/15, 05:57 PM

I'm trying to use this approach in two files, but the css file doesn't work correctly.

Posted by David Vitoria on 02/23, 05:57 AM

SuckerTree Vertical Menu (v1.1) submenu not display in firefox

Posted by senthilkumar on 02/28, 02:26 AM

how to put this code in the blogger template and how to use it?

Posted by kashif salman on 04/16, 09:56 AM

Excelent this is what i was looking for. I have made a search over the internet for pure CSS vertical menu. but its always come up with javascript file, and i don't want to use that. Thanks for the code also.

Posted by karel zaman on 04/21, 08:28 PM

I'm having a small issue with IE6, and I'm presuming it's a CSS issue.

If I look at the source of the page I can see the menu just fine - but it doesn't display.

It doesn't even appear to be a color issue because I can't even highlight the text on the page.

Needless to say it displays fine on non-IE browsers and I can see it on IE7 as well.

Any thoughts or pointers as to where to look to fix this?

Thanks - by the way, I do appreciate the system as it works well.

You can see this at http://charlesneilwoodworking.com. It's the menu on the right of the page. You should see brown on blue with grey borders (and you will with everything but IE6 :)

Posted by Ken Weinert on 04/30, 04:06 PM

It doesnt work with Google Chrome and Mozilla ..What shud i do ?

Posted by Apeksha on 05/07, 01:27 PM

Ur in for a tough ride,
u will have to modify code provided by microsoft to alter en hook up with the sharepoint link datasources.

sharepoint top menu code cannot be directly modified.

check this link for more info

See: http://blogs.msdn.com/ecm/archive/2006/12/02/customizing-the-wss-3-0-moss-2007-menu-control-mossmenu-source-code-released.aspx

Posted by fred on 06/02, 07:51 AM

how can i use it in blogger template?

Posted by Red Gear on 06/03, 04:05 AM

Comment Pages 27 of 28 pages « First < 25 26 27 28 >

Commenting is not available in this weblog entry.