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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
Yii中表单用法实例详解
2016/01/05 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
javascript getElementsByTagName
2011/01/31 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Vue精简版风格概述
2018/01/30 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python 用下标截取字符串的实例
2018/12/25 Python
python调用支付宝支付接口流程
2019/08/15 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
python 如何快速复制序列
2020/09/07 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
基本款天堂:Everlane
2017/05/13 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
刚毕业大学生自荐信范文
2014/02/20 职场文书
给小学生的新年寄语
2014/04/04 职场文书
社会学专业求职信
2014/07/17 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL