Bootstrap ~ Implementation of multi-level navigation (cascade navigation) [Code], bootstrap

Bootstrap ~ Implementation of multi-level navigation (cascade navigation) [Code], bootstrap

On the bootstrap official website, navigation is at most two levels, which cannot be achieved at two or more levels. Uncle found some third-party information and finally found a good plug-in. Both the Use and effect are good, now, let's share it with you.

Plug-in address: http://vsn4ik.github.io/bootstrap-submenu/

Let's take a look at the display effect on Uncle's background system.

The implementation method is as follows:

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

Copy codeThe Code is 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. Insert the corresponding HTML code block. In this example, the code is not generated recursively, and the static three-level structure is used. This makes it clearer. We recommend that you use recursion to produce menus in a real production environment.
Copy codeThe Code is as follows:
<Ul class = "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 result is the first figure. It is worth noting that you can add <li class = "divider"> </li> this line of code if you want to use a split line between menus.

Thank you for reading this article! Source: Zhang zhanling