Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Horizontal CSS Menus: Here

SuckerTree Horizontal Menu

Author: Dynamic Drive

SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus. 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 and positioning behavior to them. You can even have multiple SuckerTree menus on the same page.

See also: SuckerTree Vertical Menu.

Demo:

The two bullet images used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 09/14/2006

Revision History: None

Usage Terms: Click here

Your Comments (314)

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 32 of 32 pages « First  <  30 31 32

line 26 of html code there is a </a> that doesn't close anything... you should remove it
Posted by Louis-M C. on 05/16, 10:54 AM
very good nice menu and work very well please tell me how i can do to turn this menu in black, thank`s
Posted by elmix on 05/23, 07:21 PM
i've got the same problem, and i found the solution here to Fix BSOD Error, just for reference.
Posted by Regcure on 05/23, 07:27 PM
I'm working on a site and had the site all ready to go. We had someone here looking at the site using IE 6 and the menu navigation is funky. It works great in IE 7, IE 8, FF and Safari. Of course, MS would prove to make me want to pull all my hair out! .

http://swift.m45.com/home.htm - Look at the OUR SERVICES drop down.

Something is weird with the CSS. Maybe I didn't copy something correctly, or this menu doesn't work in IE6?
CSS:
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 100px; /*Width of top level menu link items*/
height: 18px;
padding: 3px;
border: 0px;
border-left-width: 0;
text-decoration: none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
vertical-align:middle;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
list-style-type: none;}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}


/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 150px; /*width of sub menu levels*/
color:#333333;
text-decoration: none;
padding: 3px;
border-top: 1px solid #666666;
background-image:url(images/trans-white-menu.png);
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
vertical-align:middle;
}

.suckertreemenu ul li a:hover{
background-color:#CCCCCC;
color:#333333;
}


/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #FFFFFF url(images/trans-white-menu.png);
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
/* End */
Posted by Tara on 06/05, 06:07 AM

Comment Pages 32 of 32 pages « First  <  30 31 32


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.