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>这行代码。

感谢各位的阅读!文章来源 张占岭

Javascript 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
在node中如何使用 ES6
Apr 22 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 #Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 #Javascript
javascript html实现网页版日历代码
Mar 08 #Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 #Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 #Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 #Javascript
javascript对象的创建和访问
Mar 08 #Javascript
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
深入分析php之面向对象
2013/05/15 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
mac系统安装Python3初体验
2018/01/02 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
优秀应届本科生求职信
2014/07/19 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
初婚未育证明样本
2015/06/18 职场文书
施工现场安全管理制度
2015/08/05 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js