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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 (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 21 of 28 pages « First < 19 20 21 22 23 > Last »

Excellent! Smart!

Posted by Matthias Wiede on 04/20, 01:07 AM

I used this code but I have a dark blue background and white text. Looks fine in FF but IE6(sucks) makes the text black. Is there a workaround for this problem?

Thanks in advance!
Ken

Posted by Ken on 04/29, 04:38 PM

Thanks Dynamicdrive that menu is very easy to edit and seo friendly.

thanks

Posted by SV Creation on 05/03, 11:18 AM

I have the same problem. The submenus are not showing up in Firefox

Posted by Ricardo Cuello on 05/06, 11:36 AM

I see from reading the posts on this forum that several people are try to use a second menu - without success.
I wonder if somebody could offer a solution for this.

I try to rename the css an js files for the second menu, the name for ids and classes also.

The missbehavior is always the same. While the first submenus are shown correct, the second one isn't.

This code is so usefull, that it's worth to be used twice ;-)
Maybe someone cold offer an idea?

Posted by ianus on 05/16, 04:36 AM

Nice source code. I used this website for my every such website where i use java script. ..

Posted by krishna on 05/17, 10:52 PM

I used the above script to create the main navigation for a mock up site, and tweaked it a little.

Everything functions properly with IE6 and FF2.0, however, in IE7 the submenu disappears when you try to hover over the menu items. It will not allow a smooth scroll over the items. I've tried everything that I could think of. The css and javascript are in external files. Please help.....

/*-------Main Navigation CSS-------*/
#left_navbox
{
background-color: #5C0401;
width: 174px;
float: left;
height: 730px;
border-right: #fecb00 1px solid;
border-left: #fecb00 1px solid;
border-bottom: #fecb00 1px solid;
border-top: #fecb00 1px solid;
}

/*start of nav list*/
.navdiv ul
{
margin: 0px 7px;
padding: 0;
list-style-type: none;
font-weight: bold;
text-decoration: none;
width: 160px;/* Width of Menu Items */
position: absolute;
top: 179px;
}

/*First tier item box*/
.navdiv ul li
{
position: relative;
margin-top: 5px;
margin-bottom: 5px;
background-color: #470001;
}

/*Sub level menu nav */
.navdiv ul li ul
{
position: absolute;
width: 160px;
top: 0;
visibility: hidden;
margin-left:0;
}
/*sub level item boxes*/
.navdiv ul li ul li
{
position: relative;
margin-top: 0px;
margin-bottom: 0px;
visibility:visible;
}

/* First tier link styles */
.navdiv ul li a
{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
font-size: 16px;
color: #ffcc00;
font-family: Garamond;
font-weight: bold;
padding-left: 8px;
padding-bottom:10px;
padding-top:10px;
}
/*Submenu link styles*/
.navdiv ul li ul li a
{
display: block;
overflow: auto;
color: black;
text-decoration: none;
font-size: 16px;
color: #ffcc00;
font-family: Garamond;
padding-left: 8px;
font-weight: normal;
padding-bottom: 10px;
padding-top: 10px;
margin: 0px;
}

.navdiv ul li a:visited
{
color: #fecb00;
font-weight: bold;
font-size: 16px;
font-family: Garamond;
background-color: #470001;
text-decoration: none;
padding-left: 8px;
padding-bottom: 10px;
padding-top: 10px;

}
.navdiv ul li a:hover
{
color: black;
text-decoration: none;
font-size: 16px;
color: #530002;
font-family: Garamond;
font-weight: bold;
padding-left: 8px;
padding-bottom: 10px;
padding-top: 10px;
background-color: #fecb00;
}
.navdiv ul li ul li a:visited
{
color: #fecb00;
font-weight: normal;
font-size: 16px;
font-family: Garamond;
background-color: #470001;
text-decoration: none;
padding-left: 8px;
padding-bottom: 10px;
padding-top: 10px;
}

.navdiv ul li ul li a:hover
{
background-color: #ffcc00;
font-size: 16px;
color: #530002;
font-family: Garamond;
text-decoration: none;
display: block;
font-weight: normal;
}

/* Holly Hack for IE \*/
* html .navdiv ul li { float: left; height: 1%; }
* html .navdiv ul li a { height: 1%; }
/* End */

/*----Main Navigation CSS End--------*/


<div id="left_navbox">

<div class="navdiv">

<ul id="nav">
<li>Home</li>

<li>Academics
<ul>
<li>English</li>
<li>Math</li>
<li>Science</li>
<li>Social Studies</li>
<li>P.E. / ROTC</li>
<li>Foreign Language</li>
<li>Electives</li>
<li>CTE</li>
<li>Media Center</li>
</ul>
</li>

<li>Athletics</li>

<li>Calendar of Events</li>

<li>Clubs</li>

<li>Contact Us
<ul>
<li>Administration</li>
<li>Athletics</li>
<li>Attendance</li>
<li>Discipline</li>
<li>Faculty</li>
<li>Guidance</li>
<li>Nurse</li>
<li>University High</li>
</ul>
</li>

<li>Guidance</li>

<li>Registration</li>

<li>District Home</li>
</ul>

</div>
</div>

Posted by Trudi Reyes on 05/22, 03:24 PM

Hi

when i use the menu with <select> or textbox. the menu is overlapping. is there is any solution or patch code to fix this issue.

regards
ganesh

Posted by ganesh on 05/27, 04:02 AM

Im using this, great job, but in IE the submenu is below of flash object. I tryed z-index in css but work only in FF but not in IE. Any idea ?

Posted by Pablo Davi on 05/28, 12:49 PM

Hi,
Im working on a horisontal menu, but I want it to be dynamic - in adding items and removing items to and from the menu. Does anyone have an idea on how to develop this kind of menu. Preferably without a database.
Maybe via a Administrative page of some sort. This will be used in SharePoint 3.0.

Best Regards
Snakeeye

Posted by snakeeye on 06/10, 05:22 AM

Comment Pages 21 of 28 pages « First < 19 20 21 22 23 > Last »

Commenting is not available in this weblog entry.