Bootstrap3多级下拉菜单


Posted in Javascript onFebruary 24, 2017

本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下

效果图:

Bootstrap3多级下拉菜单

- 需要引用bootstrap.min.css和bootstrap.min.css.js
- 代码如下

<head>
 <meta charset="UTF-8">
 <title>Bootstrap 3 的多级下拉菜单示例</title>
 <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
 <script type="text/javascript" src="~/Content/bootstrap.min.css.js"></script>
 <style type="text/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;
    }
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <h2>Bootstrap 3多级下拉菜单</h2>
   <hr>
   <div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" href="javascript:;">
     下拉多级菜单 <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
     <li class="dropdown-submenu">
      <a tabindex="-1" href="javascript:;">总经理</a>
      <ul class="dropdown-menu">
       <li><a tabindex="-1" href="javascript:;">经理1</a></li>
       <li><a tabindex="-1" href="javascript:;">经理2</a></li>
      </ul>
     </li>
     <li class="dropdown-submenu">
      <a tabindex="-1" href="javascript:;">研发部</a>
      <ul class="dropdown-menu">
       <li><a tabindex="-1" href="javascript:;">主管</a></li>
       <li class="divider"></li>
       <li class="dropdown-submenu">
        <a href="javascript:;">员工</a>
        <ul class="dropdown-menu">
         <li><a href="javascript:;">互    评</a></li>
         <li><a href="javascript:;">不互评</a></li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </div>
  </div>
 </div>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中的public和private对象,即static修饰符
Jan 18 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
js使用ajax读博客rss示例
May 06 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
使用原生的javascript来实现轮播图
Feb 24 #Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 #Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 #Javascript
JavaScript中值类型和引用类型的区别
Feb 23 #Javascript
canvas绘制环形进度条
Feb 23 #Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 #Javascript
js实现文字跑马灯效果
Feb 23 #Javascript
You might like
php列出一个目录下的所有文件的代码
2012/10/09 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python设计模式之装饰模式实例详解
2019/01/21 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
基于python操作ES实例详解
2019/11/16 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
工程造价自荐信
2013/10/09 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
倡议书格式及范文
2015/04/29 职场文书
员工福利申请报告
2015/05/15 职场文书
单位综合评价意见
2015/06/05 职场文书
2016年国陪研修感言
2015/11/18 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Spring整合Mybatis的全过程
2021/06/28 Java/Android