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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue中监听返回键问题
Aug 28 Javascript
js获取 gif 的帧数的代码实例
Sep 10 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把大写命名转换成下划线分割命名
2015/04/27 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
js读取本地文件的实例
2017/12/22 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python组合无重复三位数的实例
2018/11/13 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
清扬洗发水广告词
2014/03/14 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
工厂车间标语
2014/06/19 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书