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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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加密解密函数分享
2014/06/05 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
vue登录注册实例详解
2019/09/14 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
会计电算化专业自荐信
2014/03/15 职场文书
农民工讨薪标语
2014/06/26 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技