前言
原創文章，歡迎轉載，請保留出處。
有任何錯誤、疑問或者建議，歡迎指出。
我的郵箱:[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"> </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"> </span>測試模板</a></li>
<li><a href="#" data-toggle="tab" name="menu-second-ctrl"><span class="glyphicon glyphicon-menu-right"> </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
非常感謝他們。