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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
js实现自定义滚动条的示例
Oct 27 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
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
简单解决Python文件中文编码问题
2015/11/22 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
keras之权重初始化方式
2020/05/21 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
建党伟业的观后感
2015/06/01 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android