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


Posted in Javascript onMarch 08, 2016

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

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

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

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

下面说一下实现的方式

1.引用三个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" />

2.插入对应的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多级导航栏(级联导航)的实现代码,希望对大家有所帮助!

Javascript 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
javascript html实现网页版日历代码
Mar 08 #Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 #Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 #Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 #Javascript
javascript对象的创建和访问
Mar 08 #Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 #Javascript
使用JQuery实现智能表单验证功能
Mar 08 #Javascript
You might like
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP经典面试题集锦
2015/03/19 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python中的字符串替换操作示例
2016/06/27 Python
python实现淘宝购物系统
2019/10/25 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
会议室标语
2014/06/21 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
单位工作证明
2014/10/07 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
消防安全培训工作总结
2015/10/23 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书