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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
javascript生成随机数的方法
May 16 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
php短信接口代码
2016/05/13 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
python遍历目录的方法小结
2016/04/28 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
建筑专业自荐信范文
2014/01/05 职场文书
骨干教师培训制度
2014/01/13 职场文书
股东合作协议书
2014/09/12 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
光荣之路观后感
2015/06/12 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书