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

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

效果图：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创

    最近公司做网页用到Bootstrap的菜单功能,要实现鼠标悬停显示二级菜单,于是就研究了一下,大概有两种方法. 第一种方法:修改样式表 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css: 复制代码 代码如下: .nav > li:hover .dropdown-menu {display: block;} 这句css加在bootstrap.min.css之后出现的css中,你试下! 缺点: 1.相应的顶级菜单不可点击 2.鼠标滑到二级菜单后,顶级菜

  • Bootstrap下拉菜单更改为悬停(hover)触发的方法

    Bootstrap下拉菜单默认需要通过点击,才可以打开,在管理系统的开发过程中,使用悬停代替点击能减少一步操作,更人性化.下面是实现方式: <!DOCTYPE html> <html> <head> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src=&quo

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

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

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

    Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单. 效果图: CSS修改: <style type="text/css"> .navbar .nav > li .dropdown-menu { margin: 0; } .navbar .nav > li:hover .dropdown-menu { display: block; } <

  • 原生JS实现悬停下拉菜单

    原生JS实现悬停下拉菜单

    JS实现悬停下拉菜单,这个是前端面试中遇到的场景题,原理就是修改菜单样式的display属性的属性值从none=>block,具体实现见下,重点关注下面几个部分. 给每个section设置浮动. 将可继承属性设置在section父盒子上,字体相关的属性. 设置悬停时,悬停在section父盒子上,子元素head背景改变:也可以直接悬停在head类,写作`.head:hover`.但是会出现一个问题就是当鼠标悬停在li上的时候head会变回最初的样子,因此推荐将hover放在section上. 但

  • bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法

    bootstrap-table下表格中增加操作的btn,如果是下拉菜单,那么在每一页最后一行点击下拉菜单,会出现滚动条,解决方法: 修改这个类,但是这个类改了会有点影响toolbar的显示,不过问题不大,加个margin就可以了 .fixed-table-body{ overflow:visible !important; } 以上所述是小编给大家介绍的bootstrap table 表格中增加下拉菜单末行出现滚动条解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的

  • Bootstrap CSS组件之按钮下拉菜单

    按钮下拉菜单 结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单. 组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu,

  • Bootstrap+jfinal实现省市级联下拉菜单

    Bootstrap+jfinal实现省市级联下拉菜单

    小小一个省市级关联菜单,却耗费了一个很多时间来摸索,原因在于对jquery不熟练,既然这么辛苦完成了一个组件,自然想要共享出来,让需要的人使用. 这只是一个基础版,后续还要再进行优化. 代码:省市级关联菜单下载地址 说明: sql语句就不再说了,里面有"city.sql"."provincial.sql"两个文件. 1.先说说获取数据 public void initProcitys() { logger.info("获取所在地区"); List

  • Bootstrap下拉菜单效果实例代码分享

    Bootstrap下拉菜单效果实例代码分享

    下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种. Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站. 对于如何更改下拉菜单的背景颜色.如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释. 而且,官方网站的超级链接代码杂糅着许多没有用的参数. 笔者

  • 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫) 关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框 看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的某一项,菜单

  • vue实现导航栏下拉菜单

    本文实例为大家分享了vue实现导航栏下拉菜单的具体代码,供大家参考,具体内容如下 先看效果: 下拉菜单铺满全屏 <div class="nav">...</div> <div class="dropdown-content">...</div> .nav {     position: relative; } .dropdown-content {     position: absolute;     width:

  • BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="

随机推荐