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 相关文章推荐
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
再谈JavaScript线程
Jul 10 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
js编写三级联动简单案例
Dec 21 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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
我的论坛源代码(七)
2006/10/09 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python注释详解
2016/06/01 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python中pip的安装与使用教程
2018/08/10 Python
Python实现分段线性插值
2018/12/17 Python
ipython和python区别详解
2019/06/26 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
材料员岗位职责
2014/03/13 职场文书
吴仁宝观后感
2015/06/09 职场文书
Mysql Show Profile
2021/04/05 MySQL