Bootstrap多级导航栏(级联导航)的实现代码

前端技术 2023/09/09 JavaScript

在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，终于找到一个不错的插件，使用上和效果上都还不错，现在和大家分享一下

插件地址：http://vsn4ik.github.io/bootstrap-submenu/

先看一下，在后台系统上的显示效果

下面说一下实现的方式

１.引用三个JS插件和一个CSS类库

<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\" />

２.插入对应的HTML代码块,本例子没有使用递归生成代码，使用了静态的三级结构，这样看着更清晰，真正的生产环境建议使用递归去生产菜单

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

最后的效果就是第一个图了，值得注意的是，如果希望每个菜单之间使用分割线，可以添加 <li class=\"divider\"></li>这行代码。

下面给大家推荐一段代码有关Bootstrap多级级联菜单

<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 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-header\">Nav header</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=\"#\" 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=\"#\">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>
<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=\"#\">Separated link</a>
</li>
</ul>
</li>
<li class=\"dropdown\">
<a href=\"#\">Menu</a>
</li>
<li class=\"dropdown\">
<a href=\"#\">Menu</a>
</li>
</ul>

以上所述是小编给大家介绍的Bootstrap多级导航栏(级联导航)的实现代码，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/24213

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案