Bootstrap导航条鼠标悬停下拉菜单


Posted in Javascript onJanuary 04, 2017

Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单。

效果图:

Bootstrap导航条鼠标悬停下拉菜单

CSS修改:

<style type="text/css"> 
 .navbar .nav > li .dropdown-menu { 
 margin: 0; 
 } 
 .navbar .nav > li:hover .dropdown-menu { 
 display: block; 
 } 
</style>

实例源码:

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Bootstrap导航条鼠标悬停下拉菜单</title> 
 <link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 
 <script id="jquery_172" type="text/javascript" class="library" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
 <script id="bootstrap_221" type="text/javascript" class="library" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 <style type="text/css"> 
 .navbar .nav > li .dropdown-menu { 
 margin: 0; 
 } 
 .navbar .nav > li:hover .dropdown-menu { 
 display: block; 
 } 
 </style> 
</head> 
<body> 
 <div class="container"> 
 <div class="navbar"> 
 <div class="navbar-inner"> 
 <ul class="nav nav-pills"> 
  <li class="active"><a href="#">Home</a></li> 
  <li class="dropdown"><a href="#">SVN<span class="caret"></span></a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">sub SVN1</a></li> 
  <li><a href="#">sub SVN2</a></li> 
  </ul> 
  </li> 
  <li><a href="#">iOS</a></li> 
  <li><a href="#">VB.Net</a></li> 
  <li class="dropdown"><a href="#">Java<span class="caret"></span></a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">sub Java1</a></li> 
  <li><a href="#">sub Java2</a></li> 
  </ul> 
  </li> 
  <li><a href="#">PHP</a></li> 
 </ul> 
 </div> 
 </div> 
 </div> 
</body> 
</html>

 Find it more from:http://runjs.cn/detail/k4ahmcgc

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

Javascript 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
js编写的treeview使用方法
Nov 11 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 #Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 #Javascript
手机端js和html5刮刮卡效果
Sep 29 #Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 #Javascript
laydate.js日期时间选择插件
Jan 04 #Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 #Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 #Javascript
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Ubuntu下安装PyV8
2016/03/13 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python实现简单http服务器功能
2018/09/17 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python3 re返回形式总结
2020/11/20 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
入党思想汇报
2014/01/05 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
工资收入证明
2014/10/07 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
使用pytorch实现线性回归
2021/04/11 Python
Redis主从复制操作和配置详情
2022/09/23 Redis