文档章节

bootstrap 多级菜单解决方案

internetafei
 internetafei
发布于 2016/05/23 17:42
字数 199
阅读 446
收藏 11

html例子

             <li class="dropdown-submenu">
                    <a  href="##"  class="unClose">一级菜单</a>
                    <ul class="dropdown-menu">
                        <li><a href="##">二级菜单</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu">
                            <a href="##"   class="unClose">二级菜单</a>
                            <ul class="dropdown-menu">
                                <li><a href="##">三级菜单</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>

css 样式


    .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }
        .dropdown-submenu.pull-left {
            float: none;
        }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

js 添加

+function ($){
     $(document) .on('click.bs.dropdown.data-api', '.unClose', function (e) { e.stopPropagation() })
}(jQuery);

© 著作权归作者所有

internetafei

internetafei

粉丝 16
博文 147
码字总数 34558
作品 0
郑州
高级程序员
私信 提问
bootstrap3 多级下拉菜单

Bootstrap 3 的多级下拉菜单示例

两天三顿
2017/10/12
0
0
【iGeek手册】如何使用jQuery制作渐变缩放式样的响应式导航菜单?

响应式设计(Responsive Design) 的导航菜单,相信对于做web相关UI设计 或者开发的朋友来说一定不陌生, 在这个遍地都是Bootstrap框架的互联网web世界, 标准Bootstrap类型导航菜单,肯定是...

Janet_zyh
2017/11/15
0
0
基于 Vue2 的菜单解决方案 - v-selectmenu

v-selectmenu - 基于 Vue2 的简洁、易用、高定制化的菜单解决方案 插件支持 i18n 国际化、多级菜单 、多分组菜单、快速搜索、键盘快速选择、自定义渲染、嵌入式、鼠标右键激活等特性 文档、D...

TerryZ
2018/07/11
1K
0
Bootstrap~多级导航(级联导航)的实现

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

mcy247
2017/12/06
0
0
JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

原文地址:JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) 前言:最近园子里多了许多谈语言、谈环境、谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵...

引鸩怼孑
2016/07/16
195
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
34分钟前
5
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
52分钟前
94
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0
正则表达式基础(一)

1.转义 转义的作用: 当某个字符在表达式中具有特殊含义,例如字符串引号中出现了引号,为了可以使用这些字符本身,而不是使用其在表达式中的特殊含义,则需要通过转义符“\”来构建该字符转...

清自以敬
今天
4
0
idea中@Data标签getset不起作用

背景:换电脑以后在idea中有@data注解都不生效 解决办法:idea装个插件 https://blog.csdn.net/seapeak007/article/details/72911529...

栾小糖
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部