bootstrap~ Multi-level navigation (cascade navigation) Implementation Effect "code" _javascript tips

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, in the Uncle Backstage system display effect

Here's how it's implemented

1 reference three JS Plug-ins and a CSS class library

Copy Code code as follows:

<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>
<link href= "~/content/bootstraps/css/bootstrap-submenu.css" rel= "stylesheet"/>

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

Copy Code code as follows:

<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 href= "@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.

Thank you for your reading! Article source Zhang Jianling