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

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

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

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

下面说一下实现的方式

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

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

@foreach (var item in Model)
{
if (item.Sons != null && item.Sons.Count > 0)
{

@item.MenuName

@foreach (var sub in item.Sons)
{
if (sub.Sons != null && item.Sons.Count > 0)
{

@sub.MenuName

@foreach (var inner in sub.Sons)
{

@inner.MenuName

}



}
else
{
@sub.MenuName
}
}


}
else
{
@item.MenuName
}
}
 

最后的效果就是第一个图了，值得注意的是，如果希望每个菜单之间使用分割线，可以添加

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

Project name



Home


link


link


link



Dropdown




More options


Second level link


Second level link


Second level link


Second level link


Second level link


3333333333






Another action


Something else here


Nav header

Separated link


One more separated link







link



Menu









Regular link



Dropdown




More options


Second level link


Second level link


Second level link


Second level link


Second level link




Another action


Something else here



Separated link




Menu


Menu

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