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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
代码生成器 document.write()
2007/04/15 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
python实现textrank关键词提取
2018/06/22 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python新手学习装饰器
2020/06/04 Python
python 自动识别并连接串口的实现
2021/01/19 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
社区禁毒宣传活动总结
2015/05/07 职场文书
拉贝日记观后感
2015/06/05 职场文书
遗失证明范文
2015/06/19 职场文书
汶川大地震感悟
2015/08/10 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python