Bootstrap ~ Implementation of multi-level navigation (cascade navigation) and bootstrap navigation

Bootstrap ~ Implementation of multi-level navigation (cascade navigation) and bootstrap navigation

Back to directory

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

    <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.

<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 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!

 

Back to directory