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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
原生js实现日期选择插件
May 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
一种JavaScript的设计模式
2006/11/22 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
人事部专员岗位职责
2014/03/04 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
诚信考试标语
2014/06/24 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js