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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
JS中Attr的用法详解
Oct 09 Javascript
js精确的加减乘除实例
Nov 14 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
js实现特别简单的钟表效果
Sep 14 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 图片上添加透明度渐变的效果
2009/06/29 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
详解JS中的立即执行函数
2017/02/24 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
CSS3 边框效果
2019/11/04 HTML / CSS
自荐信需注意事项
2014/01/25 职场文书
表彰先进的通报
2014/01/31 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
学校读书活动总结
2014/06/30 职场文书
2014年工商所工作总结
2014/12/09 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
法制教育主题班会
2015/08/13 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书