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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
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下载文件的代码示例
2012/06/29 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
python列表与元组详解实例
2013/11/01 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python reduce()函数的用法小结
2017/11/15 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
什么是Python变量作用域
2020/06/03 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
年度考核自我鉴定
2014/02/02 职场文书
一岗双责责任书
2014/04/15 职场文书
公司晚会策划方案
2014/05/17 职场文书
80后婚前协议书范本
2014/10/24 职场文书
考研复习计划
2015/01/19 职场文书
投诉信回复范文
2015/07/03 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
《花钟》教学反思
2016/02/17 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技