`
天梯梦
  • 浏览: 13729784 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns

 
阅读更多

Bootstrap v3′s navigation has menus toggle enabled by default — you have to click to have them open/show, and click again to them shut (hide).

 

Wouldn’t it be nice to also have menus open through hovering your mouse over them?

It's a simple CSS addition.

 

Use the below CSS to have both toggling and hovering for menus.

.dropdown:hover .dropdown-menu {
display: block;
}

 

Told you it was simple!

原文:http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns

 

或者使用插件:

引用插件 bootstrap-hover-dropdown.min.js 后,Just add data-hover="dropdown" where you'd put data-toggle="dropdown", 你也可以添加延迟 data-delay="1000"

原文:https://cameronspear.com/demos/bootstrap-hover-dropdown/

下载插件:bootstrap-hover-dropdown-master

项目地址:https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/

 

转自:Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns

 

 

分享到:
评论

相关推荐

    Bootstrap左侧下拉三级菜单导航

    在实际项目中,可能还需要引入Bootstrap的CSS和JS库,以及jQuery(Bootstrap 3需要),以便正确地处理下拉菜单的交互。 在实现过程中,确保所有的Bootstrap类名、数据属性和JavaScript引用都是最新版本的,因为...

    Bootstrap多级下拉菜单插件

    在Bootstrap中,Dropdowns组件是非常常用的一种元素,用于创建下拉菜单,通常用在导航栏中。然而,原生的Bootstrap Dropdowns只支持一级下拉,对于需要展示更复杂层级结构的菜单,如多级子菜单,就需要额外的插件来...

    炫酷Bootstrap下拉菜单鼠标滑过动画特效

    这是一款基于Bootstrap的炫酷下拉菜单鼠标滑过动画特效jQuery插件。该插件在鼠标滑过Bootstrap dropdown组件的时候,下拉面板会以指定的Animate.css中的CSS3动画出现。

    bootstrap 导航栏下拉菜单,居右下拉菜单

    `<li class="nav-item dropdown">`表示一个下拉菜单项,`<a class="nav-link dropdown-toggle">`是触发下拉菜单的链接,`data-toggle="dropdown"`和`aria-labelledby`属性用于与Bootstrap的JavaScript插件交互。...

    16.Bootstrap按钮下拉菜单.rar

    这个"16.Bootstrap按钮下拉菜单.rar"压缩包文件显然包含了关于如何在Bootstrap中创建和使用按钮下拉菜单的资源。这包括一个视频教程(16.Bootstrap按钮下拉菜单.mp4)和可能是一个演示文稿(新建 PPT 演示文稿.ppt)...

    bootstrap2 多级下拉菜单

    在Bootstrap 2中,多级下拉菜单是实现复杂导航结构的关键元素,尤其在创建具有多层次菜单的网站时非常实用。本篇文章将深入探讨如何在Bootstrap 2中创建和自定义多级下拉菜单。 首先,Bootstrap的下拉菜单依赖于...

    HTML5 Bootstrap响应式手机导航下拉菜单代码

    本资源是一个专门针对手机导航的下拉菜单代码,适用于那些希望在移动设备上提供良好用户体验的开发者。 Bootstrap是一个流行的开源前端框架,由Twitter开发,它包括CSS样式表、JavaScript插件和HTML组件,旨在简化...

    Bootstrap4 下拉菜单

    Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。 实例 Dropdown button Link 1 Link 2 Link 3 实例解析 .dropdown 类用来...

    Bootstrap实现下拉菜单多级联动

    Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架,它提供了许多实用的组件和工具,使得开发者可以快速构建漂亮的网页。今天,我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 ...

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

    在使用Bootstrap构建网页时,下拉菜单是一种常见的交互元素,它允许用户在单个按钮下访问多个选项。然而,有时可能会遇到下拉菜单点击后无法显示的问题,这通常是由于JavaScript库加载顺序错误导致的。本篇文章将...

    Bootstrap鼠标右键下拉菜单特效

    在这个特定的项目中,我们关注的是一个独特的功能——"Bootstrap鼠标右键下拉菜单特效"。这个特效允许用户在网页的特定区域内通过鼠标右键点击触发一个下拉菜单,提供了丰富的交互体验。 首先,我们要了解Bootstrap...

    解决bootstrap中下拉菜单点击后不关闭的问题

    Bootstrap是一款流行的前端开发框架,它提供了许多方便的组件,其中包括下拉菜单(Dropdown Menu)。在Bootstrap的默认设置中,当你点击下拉菜单的任何部分,菜单会自动关闭。然而,在某些场景下,如实现筛选查询...

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

    Bootstrap是一款流行的前端开发框架,它提供了许多便捷的组件,其中包括Dropdown下拉菜单。在构建响应式导航条时,Dropdown组件通常被广泛使用。默认情况下,Dropdown菜单需要用户点击才能展开,但这可能会降低交互...

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

    Bootstrap是一款流行的前端开发框架,它的导航条组件提供了丰富的样式和交互功能,包括下拉菜单。然而,默认情况下,带有下拉菜单的导航项在点击时只会显示下拉菜单,而不会跳转到链接地址。以下是如何解决这个问题...

    Bootstrap 中下拉菜单修改成鼠标悬停直接显示 <font color=red>原创</font>

    Bootstrap的下拉菜单默认使用JavaScript事件来控制其可见性,但我们可以覆盖这些默认设置,使得在鼠标悬停时显示二级菜单。 ```css .nav &gt; li:hover .dropdown-menu { display: block; } ``` 将这段代码添加到...

    Bootstrap下拉菜单Dropdowns的实现代码

    Bootstrap 下拉菜单Dropdowns 的实现代码 Bootstrap 是一个流行的前端框架,提供了许多实用的UI组件,包括下拉菜单Dropdowns。下拉菜单Dropdowns 是一个常用的交互组件,可以帮助用户快速选择选项。本文将详细介绍...

    HTML5 Bootstrap响应式手机导航下拉菜单代码.zip

    为了实现响应式下拉菜单,Bootstrap利用了HTML5的&lt;nav&gt;元素和CSS3的媒体查询。在HTML中,我们通常会创建一个&lt;nav&gt;元素,并在其中嵌套和元素来构造菜单项。同时,我们还会添加一些Bootstrap特有的类,比如`.navbar`, ...

Global site tag (gtag.js) - Google Analytics