基于Bootstrap3制作响应式布局网站（五）

前言

原创文章，欢迎转载，请保留出处。
有任何错误、疑问或者建议，欢迎指出。
我的邮箱:[email protected]

前一篇介绍了页面的跳转，自第三篇开始好像就没更新过源码，这星期对源码改动了比较多，本来打算介绍盒子pannel，不过还是紧接着上一篇继续介绍一下如何利用Bootstrap3的自带特性制作垂直二级菜单。

补充内容

另外要补充一下，用上篇的方法实际是把多个页面一起编译成一个servlet送到服务器，这样做会使得所有的css和js都是公有的，每个网页都能访问，不过要注意引入css和js的位置。

实现效果

未点击：

点击展开：

点击子菜单：

HTML代码

下面对比两种菜单的写法：

主要使用了Bootstrap3的data-toggle="collapse"特性来实现垂直二级菜单。

 <li>
    <a href="#l2_Menu" class="nav-header menu-first collapsed" data-toggle="collapse" name="menu-ctrl">     
        <span class="glyphicon glyphicon-menu-down">&nbsp;</span>
        二级菜单
    </a>
    <ul id="l2_Menu" class="nav nav-list collapse menu-second">
        <li><a href="#template" data-toggle="tab" name="menu-second-ctrl"><span class="glyphicon glyphicon-menu-right">&nbsp;</span>测试模板</a></li>
        <li><a href="#" data-toggle="tab" name="menu-second-ctrl"><span class="glyphicon glyphicon-menu-right">&nbsp;</span>子菜单</a></li>
    </ul>
</li>

CSS代码

由于破坏了原来的菜单结构，需要重新为二级菜单添加CSS样式，稍微修改一下之前的CSS代码即可：

/* 二级菜单 */
.nav-sidebar>li>ul>li>a{ color: #ffffff; padding-right: 20px; padding-left: 40px; }

/* 二级菜单当前选中的的样式 */
#l2_Menu>.active>a,
#l2_Menu>.active>a:hover,
#l2_Menu>.active>a:focus{ color: #C80027; background-color: #ffffff; }

JS代码

由于使用了和nav-sidebar不一样的类，所以要写一段JS代码来调整，以防出现下面的问题：

代码如下，注意是写在点击事件中，可以参考上一篇：

    /* 对二级菜单点击做调整 */
    var second = document.getElementById("l2_Menu");
    if($(e.target).attr('name')!= "menu-second-ctrl")
    {
        second.setAttribute("class","nav nav-list menu-second collapse");
    }

    var s_arr = document.getElementsByName("menu-second-ctrl");
    for(var i=0;i<s_arr.length;i++)
    {
        s_arr[i].parentNode.setAttribute("class","");
    }

点击逻辑

点击按钮发生的事件逻辑如下图（下图是处于点击了“crud展示”后点击二级菜单按钮出现的截图）：

后记

源码下载（已经包含本篇的所有源码）：
http://download.csdn.net/detail/maxwell_nc/8799959
由于旧版的源码没有二级菜单这部分的源码，而且这份源码相对上一版本区别比较大，建议下载这份新的代码。

我这周更新了比较多的东西，比如新增了登录界面，crud，权限配置等等，记得配置默认欢迎页为login.jsp，登录账号和密码可以参考login.js，这些我都会在后面逐一讲解。

另外新版源码中借鉴了下面的开源代码：
https://github.com/marcuswestin/store.js
http://www.oschina.net/code/snippet_1179828_22832
非常感谢他们。