非常简洁的网页导航菜单

日期：2007年12月10日作者：查看:[大字体中字体小字体]

本文详细介绍非常简洁的网页导航菜单,用CSS和javascript制作的非常简洁的网页导航菜单，而且还具有下拉的功能啊！呵呵

<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>
[1] [2] 下一页
非常简洁的网页导航菜单相关文章：
·巧用名称框选择过宽的Excel单元格区域
·简单分析2007年11月十大网络安全漏洞
·简单分析Script脚本跨站攻击漏洞技术
·平板电视工程菜单进入方法汇总
·保护隐私实现网络监控的简单方法
·Linux操作系统下用单网卡捆绑双IP
·QQ的黑名单有什么用？
·简单七步最大限度优化你的博客文章
·添加和删除HTML节点的简单示例
·AutoCAD三维造型：弹簧的简单画法
非常简洁的网页导航菜单相关软件
·爱上单身妈妈
·《黑名单上的人》05蘑菇行动（198303版）
·《黑名单上的人》04地下印刷所（198212版）
·《黑名单上的人》03叛徒（198210版）
·《黑名单上的人》02夜袭车库（198209版）
·《黑名单上的人》01特别行动小组（198208版）
·《魔兽争霸》：《天地劫》地图冰璃单通录象
·《传奇单机演示版》试玩
·《最终幻想12》主题曲单曲欣赏
·《单词火车》超难单词挑战试玩

上一篇:XHTML教程,简单认识XHTML基础知识

下一篇:DB中查询Table占用空间的大小

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

非常简洁的网页导航菜单

精品推荐

热点TOP10

特别推荐