SuckerTree Horizontal Menu

Rest of content here

所用的图片：

The CSS:

<style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    .suckertreemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    background-color: #F3F3F3; /*overall menu background color*/
    }
    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: 90px; /*Width of top level menu link items*/
    padding: 1px 8px;
    border: 1px solid black;
    border-left-width: 0;
    text-decoration: none;
    color: navy;
    }
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    }
    /*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: 160px; /*width of sub menu levels*/
    color: navy;
    text-decoration: none;
    padding: 1px 5px;
    border: 1px solid #ccc;
    }
    .suckertreemenu ul li a:hover{
    background-color: black;
    color: white;
    }
    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: #F3F3F3 url(/menupic/arrow-down.gif) no-repeat center right;
    }
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: #F3F3F3 url(/menupic/arrow-right.gif) no-repeat center right;
    }
    * 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%; }
    /* End */
    </style>
    <script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (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.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

The HTML:

<div class="suckertreemenu">
    <ul id="treemenu1">
    <li><a href="#" _fcksavedurl="#" style="border-left: 1px solid black">Item 1</a></li>
    <li><a href="#" _fcksavedurl="#">Item 2</a></li>
    <li><a href="#" _fcksavedurl="#">Folder 1</a>
    <ul>
    <li><a href="#" _fcksavedurl="#">Sub Item 1.1</a></li>
    <li><a href="#" _fcksavedurl="#">Sub Item 1.2</a></li>
    <li><a href="#" _fcksavedurl="#">Sub Item 1.3</a></li>
    <li><a href="#" _fcksavedurl="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#" _fcksavedurl="#">Item 3</a></li>
    <li><a href="#" _fcksavedurl="#">Folder 2</a>
    <ul>
    <li><a href="#" _fcksavedurl="#">Sub Item 2.1</a></li>
    <li><a href="#" _fcksavedurl="#">Folder 2.1</a>
    <ul>
    <li><a href="#" _fcksavedurl="#">Sub Item 2.1.1</a></li>
    <li><a href="#" _fcksavedurl="#">Sub Item 2.1.2</a></li>
    <li><a href="#" _fcksavedurl="#">Sub Item 2.1.3</a></li>
    <li><a href="#" _fcksavedurl="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </a>
    </li>
    <li><a href="#" _fcksavedurl="#">Item 4</a></li>
    </ul>
    <br style="clear: left;" />
    </div>
    <p id="iepara">Rest of content here</p>

Copy Rights Reserved: 所有素材均来自互联网。仅提供为学习Div+CSS布局及分享创作经验，请勿作为它用，如出现版权纠纷，均与本站无关。

SuckerTree Horizontal Menu

热门菜单