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

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

{

}

}

}

else

{

}

}

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

下面给大家推荐一段代码有关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

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

FOkxkE

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。