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

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

 <!DOCTYPE html>

 <head>

 <meta charset="UTF-8">

 <title>sidebarMenu</title>

 </head>

 <ul id="menuid">

     <li><a href="#">1</a></li>

     <li>

         <a href="#">2</a>

         <ul>

             <li><a href="#">Sub 2.1</a></li>

             <li><a href="#">Sub 2.2</a></li>

         </ul>

     </li>

     <li>

         <a href="#">3</a>

         <ul>

             <li><a href="#">Sub 3.1</a></li>

             <li>

                 <a href="#">Sub 3.2</a>

                 <ul>

                     <li><a href="#">Sub 3.2.1</a></li>

                     <li><a href="#">Sub 3.2.2</a></li>

                     <li><a href="#">Sub 3.2.3</a></li>

                     <li><a href="#">Sub 3.2.4</a></li>

                 </ul>

             </li>

         </ul>

     </li>

 </ul>

 <style type="text/css">

     ul {margin:0;padding:0;width:180px;list-style-type:none;}

     /* 要先设置为visibility:hidden（这时<ul>才有宽度，子<ul>才能计算左距），最后用JS处理它 */

     ul ul {position:absolute;width:170px;top:0;visibility:hidden;}

     li {position:relative;border-bottom:1px solid black;}

     a {_height:1%;display:block;padding:6px;color:white;background:gray;text-decoration:none;}

     a:hover {background:black;}

 </style>

 <script type="text/javascript">

     initialMenu();

     function initialMenu() {

         var menuid = document.getElementById("menuid");

         // 主<ul>下的所有<ul>，包括二级和三级的

         var ultags = menuid.getElementsByTagName("ul");

         for(var t=0,len=ultags.length;t<len;t++) {

             // <ul>同胞<a>添加类,即hover该<a>会显示该<ul>

             ultags[t].parentNode.getElementsByTagName("a")[0].className += "subfolderstyle";

             if(ultags[t].parentNode.parentNode===menuid) {

                 // 如果该<ul>是第一层Submenu,左距等于主Mainmenu宽

                 ultags[t].style.left = ultags[t].parentNode.offsetWidth+'px';

             } else {

                 // 如不是第一层Submenu，则父<ul>下的第一个<a>的宽度，也就是上一级Submenu的宽度

                 ultags[t].style.left = ultags[t-1].getElementsByTagName("a")[0].offsetWidth+'px';

             }

             // parentNode是该<ul>上层的<li>

             ultags[t].parentNode.onmouseenter = function() {

                 this.getElementsByTagName("ul")[0].style.display = "block";

             }

             ultags[t].parentNode.onmouseleave = function() {

                 this.getElementsByTagName("ul")[0].style.display = "none";

             }

         }

         // 呼应CSS中的注释，计算完各个<ul>的left后就可以不占文档位置了

         for (var t=ultags.length-1; t>-1; t--){

             ultags[t].style.visibility="visible";

             ultags[t].style.display="none";

         }

     }

 </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的更多相关文章

  1. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  2. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  3. 使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏

    由于工作变动,新的项目组,可能会涉及到更多的类似于后台管理系统这一类的项目,而且开发可能更加偏向于传统型的开发,希望今后能够在新的项目中能够用得上vuejs吧! 接手项目的时候,就是一个后台管理系统, ...

  4. 固定导航栏demo

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  5. 1+X学习日志——导航栏demo

    初级菜鸟的作品,各位大佬见笑了   <!DOCTYPE html> <html lang="en"> <head>     <meta c ...

  6. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  7. CSS 导航栏

    实例: 导航栏 Home News Articles Forum Contact About 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...

  8. CSS：CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

  9. iOS导航栏的正确隐藏方式【转】

    简介:在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如 ...

随机推荐

  1. 获取设备、APP的一些信息

    获取设备的一些信息: UIDevice *device = [UIDevice currentDevice]; @property(nonatomic,readonly,strong) NSStrin ...

  2. 单光纤udp通信

    环境:      两块板子,拥有独立系统(Linux),通过单光纤连接(数据只能单向发送,无反馈).两块板子采用udp协议通信. 问题: 发送板子发送数据后,接收板子上的进程收不到数据. 确认两块光纤 ...

  3. 关于cookie的使用

    cookie的属性 domain:域名,即cookie所能使用的范围,当然当前域下可以在当前域下cookie,还有一个就是该域名的父级域名(子级的域名下是可以访问父级域名下的cookie,父级域名是不 ...

  4. UVA 10375 Choose and divide

    n! 分解素因子 快速幂 ei=[N/pi^1]+ [N/pi^2]+ …… + [N/pi^n]  其中[]为取整 ei 为数 N!中pi 因子的个数: #include <iostream& ...

  5. web安全测试工具介绍---webscarab

    webscarab: 这主要是一款代理软件或许没有其它的工具能和OWASP的WebScarab如此丰富的功能相媲美了,如果非要列举一些有用的模块的话,那么他们包括HTTP代理,网络爬行.网络蜘蛛,会话 ...

  6. python bool值要注意的一些地方

    1.像(),[],{}这三个是可以通过bool(()),bool([]),bool({})转化为bool值的:且它们转化后的结果为False.但是这三个值它本身并不等于False.切记不可以与Fals ...

  7. python安装完毕后，提示找不到ssl模块的解决方示

    python安装完毕后,提示找不到ssl模块: [root@localhost ~]# python2.7.5 Python 2.7.5 (default, Jun 3 2013, 11:08:43) ...

  8. Dollar Dayz（大数母函数，高低位存取）

    Dollar Dayz Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5655   Accepted: 2125 Descr ...

  9. java整合easyui进行的增删改操作

    首先发一下效果图 显示全部用户信息 加入用户信息 删除用户信息 编辑用户信息 以下就来介绍一下easyui的crud,在java中是怎么与后台进行交换的 前台html页面,我将它命名为crud1.ht ...

  10. cql

    创建keyspace :CREATE KEYSPACE keyspace1 WITH replication = {'class': 'NetworkTopologyStrategy', 'DC1': ...