Bootstrap鼠标悬停下拉导航总结

以bootstrap.js未压缩版本V3.3.7为例。

Bootstrap的导航条为适应移动设备，都是click弹出二级下拉菜单，没有鼠标hover的特效；

所以为了实现鼠标hover弹出下拉菜单，提升网站用户体验和满足一般网站特效需求，将直接改动bootstrap的源码。

方案一 · 源码修改

找到下图，第908~913行：

修改为：

  $(document).off('click.bs.dropdown.data-api', clearMenus).off('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }).off('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle).on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown).on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)

意思是：关闭该鼠标点击事件！
鼠标滑过的效果就可以通过写CSS，来直接实现。

之后，在页面添加如下css代码，即可:

添加css代码

<style>.navbar .nav > li:hover .dropdown-menu {display: block;}
</style>

方案二 · 不改动源码

也可以在自己的页面中覆盖原来的js

$(document).ready(function(){$(document).off('click.bs.dropdown.data-api');
});

之后，添加上述CSS代码 !

附件：压缩版本 de 源码修改

Ctrl+F全局查找目标：click.bs.dropdown.data-api

找到图片中的代码片段

a.fn.dropdown.noConflict=function(){return a.fn.dropdown=h,this},a(document).on("click.bs.dropdown.data-api",c).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",f,g.prototype.toggle).on("keydown.bs.dropdown.data-api",f,g.prototype.keydown).on("keydown.bs.dropdown.data-api",".dropdown-menu",g.prototype.keydown)}(jQuery)

将图中箭头所指，红色矩形框中的on替换为off，之后添加上文中的CSS代码即可。

以上就是“ Bootstrap鼠标悬停下拉导航总结 ” 的全部内容。

Bootstrap鼠标悬停下拉导航总结相关推荐

Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
bootstrap悬停下拉导航的实现
为了减轻用户操作行为,提升用户体验,往往会将点击下拉导航改为悬停下拉的效果. 本文就讲述一下,bootstrap悬停下拉导航的实现先不说那么详细,围观先: 1. css代码设置如下: /*悬停下拉导 ...
css创建鼠标悬停下拉菜单样式
下拉菜单在网站中到处可见. 下面用css设置下拉菜单样式. <!DOCTYPE html> <html> <head> <title>淘宝</ti ...
bootstrap4.3.1 导航栏鼠标悬停下拉显示
在css中加入以下代码即可:
【html】【13】特效篇--下拉导航
html代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Ty ...
CSS 制作下拉导航
下拉菜单仍然是Web上流行的界面元素,虽然有一些纯Javascript 解决方案,但在禁用Javascript 的浏览器下,它却无能为力.因此,纯CSS的下拉菜单才是最好的选择. 这种技术及其简单,只 ...
关于网站下拉导航的设置
网站的导航很多都是下拉的方式,如下图所示: 就是一种下拉菜单,导航的数据是以ul.li相互嵌套的方式存在的. ------------------------------------------ &l ...
一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...

Bootstrap鼠标悬停下拉导航总结

文章目录

Bootstrap鼠标悬停下拉导航总结

方案一 · 源码修改

添加css代码

方案二 · 不改动源码

附件：压缩版本 de 源码修改

Bootstrap鼠标悬停下拉导航总结相关推荐

最新文章

热门文章