首页 > 代码库 > 一个可以拓展的垂直多级导航栏 Demo
一个可以拓展的垂直多级导航栏 Demo
大四党忙忙碌碌找工作，博客荒废久矣，可谓：终日昏昏醉梦间，忽闻春尽强登山。因过竹院逢僧话，偷得浮生半日闲。
这是个垂直的导航栏，可以有无限多层的子级菜单，看代码注释就够了：
1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>sidebarMenu</title> 5 </head> 6 7 <ul id="menuid"> 8 <li><a href="#">1</a></li> 9 <li>10 <a href="#">2</a>11 <ul>12 <li><a href="#">Sub 2.1</a></li>13 <li><a href="#">Sub 2.2</a></li>14 </ul>15 </li>16 <li>17 <a href="#">3</a>18 <ul>19 <li><a href="#">Sub 3.1</a></li>20 <li>21 <a href="#">Sub 3.2</a>22 <ul>23 <li><a href="#">Sub 3.2.1</a></li>24 <li><a href="#">Sub 3.2.2</a></li>25 <li><a href="#">Sub 3.2.3</a></li>26 <li><a href="#">Sub 3.2.4</a></li>27 </ul>28 </li>29 </ul>30 </li>31 </ul>32 33 <style type="text/css">34 ul {margin:0;padding:0;width:180px;list-style-type:none;}35 /* 要先设置为visibility:hidden（这时<ul>才有宽度，子<ul>才能计算左距），最后用JS处理它 */36 ul ul {position:absolute;width:170px;top:0;visibility:hidden;}37 li {position:relative;border-bottom:1px solid black;}38 a {_height:1%;display:block;padding:6px;color:white;background:gray;text-decoration:none;}39 a:hover {background:black;}40 </style>41 <script type="text/javascript">42 initialMenu();43 function initialMenu() {44 var menuid = document.getElementById("menuid");45 // 主<ul>下的所有<ul>，包括二级和三级的46 var ultags = menuid.getElementsByTagName("ul");47 for(var t=0,len=ultags.length;t<len;t++) {48 // <ul>同胞<a>添加类,即hover该<a>会显示该<ul>49 ultags[t].parentNode.getElementsByTagName("a")[0].className += "subfolderstyle";50 if(ultags[t].parentNode.parentNode===menuid) {51 // 如果该<ul>是第一层Submenu,左距等于主Mainmenu宽52 ultags[t].style.left = ultags[t].parentNode.offsetWidth+‘px‘;53 } else {54 // 如不是第一层Submenu，则父<ul>下的第一个<a>的宽度，也就是上一级Submenu的宽度55 ultags[t].style.left = ultags[t-1].getElementsByTagName("a")[0].offsetWidth+‘px‘;56 }57 // parentNode是该<ul>上层的<li>58 ultags[t].parentNode.onmouseenter = function() {59 this.getElementsByTagName("ul")[0].style.display = "block";60 }61 ultags[t].parentNode.onmouseleave = function() {62 this.getElementsByTagName("ul")[0].style.display = "none";63 }64 }65 // 呼应CSS中的注释，计算完各个<ul>的left后就可以不占文档位置了66 for (var t=ultags.length-1; t>-1; t--){67 ultags[t].style.visibility="visible";68 ultags[t].style.display="none";69 }70 }71 </script>
附上：
View Demo: http://xzh-loop.github.io/Manji/lab/demo/20141024-sidebarMenu.html
My Demo Catalogue：http://xzh-loop.github.io/Manji/lab/demo/catalogue.html
一个可以拓展的垂直多级导航栏 Demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。