Bootstrap multi-level navigation bar (cascade Navigation) implementation code _JAVASCRIPT skills

In bootstrap official, navigation is two level, more than two is impossible to achieve, the uncle looked for some third party information, finally found a good plug-in, use and effect are not bad, and now share with you

Plugin Address: http://vsn4ik.github.io/bootstrap-submenu/

First look at the display on the background system

Here's how it's implemented

1. Reference three JS Plug-ins and a CSS class library

<script src= "~/content/bootstraps/js/bootstrap-submenu.js" ></script>
<script src= "~/content/" Bootstraps/js/highlight.min.js "></script>
<script src=" ~/content/bootstraps/js/docs.js ">< /script>

2. Inserts the corresponding HTML code block, this example does not use the recursive generation code, uses the static level three structure, thus looks clearer, the real production environment proposed uses the recursive production menu

 <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= "dropdown" tabindex= "0" > @item. Menuname<span 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= "0" > @sub. menuname</a> <ul class= "Dropdown-menu" > @foreach (var inner in sub. Sons) {<li> <a href= "@inner. Linkurl "> @inner. Menuname</a> </li>} </ul> </li> <li class= "divider" ></li>} else {<li><a h Ref= "@sub. Linkurl "> @sub. menuname</a></li>} </ul> </li>} else {<li><a href= "@item. Linkurl "> @item. menuname</a></li>} </ul> 

The final effect is the first diagram, and it is worth noting that if you want to use a split line between each menu, you can add <li class= "divider" ></li> this line of code.

Here's a piece of code for you. Bootstrap Multilevel cascading menu

<div class= "NavBar navbar-fixed-top" > <div class= "Navbar-inner" > <div class= "Container-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= "brand" >project 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</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 href= "#" >second level link</a> </li> <li> <a href= "#" >second level link</ a> </li> <li class= "Dropdown-submenu" > <a href= "#" >second level link</a> <ul "
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-header" >nav header</li > <li> <a href= "#" >separated link</a> </li> <li> <a href= "#" >one more separated Li
nk</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= "#" href= "#" >Menu</a> </li> </ul> </div><!--/.nav-collapse--> </div> </div> </div>  

The above is a small set to introduce the bootstrap multi-level navigation bar (cascade Navigation) of the implementation code, I hope to help you!