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 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
使用jquery如何获取时间
Oct 13 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
微信小程序自定义toast的实现代码
Nov 16 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 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生成静态HTML速度快类库
2007/03/18 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python configparser模块应用过程解析
2020/08/14 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
门卫岗位安全职责
2013/12/13 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
师德师风建设方案
2014/05/08 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技