一个可以拓展的垂直多级导航栏 Demo

最新推荐文章于 2024-05-19 09:58:49 发布

aems6644

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量173

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xzhang/p/4049600.html

版权

大四党忙忙碌碌找工作，博客荒废久矣，可谓：终日昏昏醉梦间，忽闻春尽强登山。因过竹院逢僧话，偷得浮生半日闲。

这是个垂直的导航栏，可以有无限多层的子级菜单，看代码注释就够了：

 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

转载于:https://www.cnblogs.com/xzhang/p/4049600.html

aems6644

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个可以拓展的垂直多级导航栏 Demo

大四党忙忙碌碌找工作，博客荒废久矣，可谓：终日昏昏醉梦间，忽闻春尽强登山。因过竹院逢僧话，偷得浮生半日闲。这是个垂直的导航栏，可以有无限多层的子级菜单，看代码注释就够了： 1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>sidebarMenu&...
复制链接

扫一扫