bootstrap实现二级下拉菜单效果


Posted in Javascript onNovember 23, 2017

本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 基本的按钮下拉菜单</title> 
 <link href=http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet"> 
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.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="btn-group"> 
 <button type="button" class="btn btn-default">原始</button> 
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
 <li><a href="#">另一个功能</a></li> 
 <li><a href="#">其他</a></li> 
 <li class="divider"></li> 
 <li class="dropdown-submenu"> 
  <a href="#">More options </a> 
  <ul class="dropdown-menu"> 
  <li> 
   <a href="#">另一个功能1</a> 
  </li> 
  </ul> 
 </li> 
 </ul> 
</div> 
 
 
</body> 
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
Javascript进制转换实例分析
May 14 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
面包屑导航详解
Dec 07 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 #Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 #Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 #Javascript
基于Bootstrap实现城市三级联动
Nov 23 #Javascript
bootstrap-Treeview实现级联勾选
Nov 23 #Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 #Javascript
sublime text配置node.js调试(图文教程)
Nov 23 #Javascript
You might like
PHP的简易冒泡法代码分享
2012/08/28 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
js实现购物车功能
2018/06/12 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
实例讲解React 组件
2020/07/07 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python排序算法实例代码
2017/08/10 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Python接口自动化测试的实现
2020/08/28 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
init进程的作用
2012/04/12 面试题
总监职责范文
2013/11/09 职场文书
教师自荐信
2013/12/10 职场文书
九年级数学教学反思
2014/02/02 职场文书
国庆横幅标语
2014/10/08 职场文书
社区工作者个人总结
2015/02/28 职场文书
红歌会主持词
2015/07/02 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python