用CSS制作的很不错的简洁的网页导航下拉菜单

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

/*URL: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/</a> */

.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(media/arrow-down.gif) no-repeat center right;

}

/*Background image for subsequent level menu list links */

.suckertreemenu .subfoldericon{

background: #F3F3F3 url(media/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: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/</a>

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>

<div class="suckertreemenu">

<ul id="treemenu1">

<li><a href="#" style="border-left: 1px solid black">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>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</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>

</a>

</li>

<li><a href="#">Item 4</a></li>

</ul>

<br style="clear: left;" />

</div>

<p id="iepara">Rest of content here</p>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航