Bootstrap多級導航欄(級聯(lián)導航)的實現(xiàn)代碼_

1、Bootstrap多級導航欄(級聯(lián)導航)的實現(xiàn)代碼_ 在bootstrap官方來說，導航最多就是兩級，兩級以上是無法實現(xiàn)的，大叔找了一些第三方的資料，最終找到一個不錯的插件，用法上和效果上都還不錯，現(xiàn)在和大家分享一下 先看一下，在后臺系統(tǒng)上的顯示效果 下面說一下實現(xiàn)的方式 .引用三個JS插件和一個CSS類庫 script src=/Content/bootstraps/JS/bootstrap-submenu.js/script script src=/Content/bootstraps/JS/highlight.min.js/script script src=/Content/boots

2、traps/JS/docs.js/script link href=/Content/bootstraps/CSS/bootstrap-submenu.css rel=stylesheet / .插入對應的HTML代碼塊,本例子沒有用法遞歸生成代碼，用法了靜態(tài)的三級結構，這樣看著更清楚，真正的生產(chǎn)環(huán)境建議用法遞歸去生產(chǎn)菜單 ul class=nav nav-pills foreach (var item in Model) if (item.Sons != null item.Sons.Count 0) li class=dropdown a data-submenu= data-toggle

3、=dropdown tabindex=0item.MenuNamespan class=caret/span/a ul class=dropdown-menu foreach (var sub in item.Sons) if (sub.Sons != null item.Sons.Count 0) li class=dropdown-submenu a tabindex=0sub.MenuName/a ul class=dropdown-menu foreach (var inner in sub.Sons) li a href=inner.LinkUrlinner.MenuName/a /

4、li /ul /li li class=divider/li else lia href=sub.LinkUrlsub.MenuName/a/li /ul /li else lia href=item.LinkUrlitem.MenuName/a/li /ul 最終的效果就是第一個圖了，值得留意的是，假如盼望每個菜單之間用法分割線，可以添加 li class=divider/li這行代碼。 下面給大家推舉一段代碼有關Bootstrap多級級聯(lián)菜單 div class=navbar navbar-fixed-top div class=navbar-inner div class=contain

5、er-fluid a data-target=.nav-collapse data-toggle=collapse class=btn btn-navbar span class=icon-bar/span span class=icon-bar/span span class=icon-bar/span /a a href=# class=brandProject name/a div class=nav-collapse ul class=nav li class=active a href=#Home/a /li li a href=#Link/a /li li a href=#Link

6、/a /li li a href=#Link/a /li li class=dropdown a data-toggle=dropdown class=dropdown-toggle href=# Dropdown b class=caret/b /a ul class=dropdown-menu li class=dropdown-submenu a href=#More options/a ul class=dropdown-menu li a href=#Second level link/a /li li a href=#Second level link/a /li li a hre

7、f=#Second level link/a /li li a href=#Second level link/a /li li class=dropdown-submenu a href=#Second level link/a ul class=dropdown-menu li a href=#3333333333/a /li /ul /li /ul /li li a href=#Another action/a /li li a href=#Something else here/a /li li class=divider/li li class=nav-headerNav heade

8、r/li li a href=#Separated link/a /li li a href=#One more separated link/a /li /ul /li /ul form action= class=navbar-search pull-left input type=text placeholder=Search class=search-query span2 /form ul class=nav pull-right li a href=#Link/a /li li class=divider-vertical/li li class=dropdown a class=

9、# href=#Menu/a /li /ul /div!- /.nav-collapse - /div /div /div hr / ul class=nav nav-pills li class=active a href=#Regular link/a /li li class=dropdown a href=# data-toggle=dropdown class=dropdown-toggle Dropdown b class=caret/b /a ul class=dropdown-menu id=menu1 li class=dropdown-submenu a href=#Mor

10、e options/a ul class=dropdown-menu li a href=#Second level link/a /li li a href=#Second level link/a /li li a href=#Second level link/a /li li a href=#Second level link/a /li li a href=#Second level link/a /li /ul /li li a href=#Another action/a /li li a href=#Something else here/a /li li class=divider/li li a href=