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代码
Aug 13 Javascript
初学Javascript的一些总结
Nov 03 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
javascript时间差插件分享
Jul 18 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
使用Mock.js生成前端测试数据
Dec 13 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/06/05 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python中的变量和作用域详解
2016/07/13 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
pytorch SENet实现案例
2020/06/24 Python
python 进程池pool使用详解
2020/10/15 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
洗发露广告词
2014/03/14 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
投标承诺书怎么写
2014/05/24 职场文书
元旦晚会活动总结
2014/07/09 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
用JS创建一个录屏功能
2021/11/11 Javascript