Jquery实现下拉菜单滑动效果

关于下拉菜单的布局以及原始采用jquery的写法详见这篇博客：(1条消息) Jquery案例-下拉菜单_setTimeout()的博客-CSDN博客_jquery下拉菜单案例

上面这篇博客的下拉菜单案例虽然可以实现下拉效果但是效果并不好，如果想要下拉的时候有滑动效果可以采用jquery里面自带的方法slideUp(),slideDown(),slideToggle()即可。

同时完成简易的滑动效果还需要一个事件切换函数hover，这个函数需要两个参数，参数就是两个函数，格式为：

$(element).hover(function(){},function(){}) ,当鼠标移动到元素上的时候会执行第一个函数，当鼠标离开的时候会执行第二个是函数。

这里要注意如果后面只有一个函数的话，鼠标经过和离开都会执行这个函数。

那么完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jq下拉菜单</title><script src="../JS/jquery.min.js"></script><style lang="">* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;color: black;}.nav {margin: 100px 500px;float: left;font-size: 12px;}.nav>li {float: left;text-align: center;}.nav>li a {display: block;padding: 10px 21px;}.nav>li ul li {cursor: pointer;padding: 10px 20px;border-left: 1px solid #efd8af;border-right: 1px solid #efd8af;border-bottom: 1px solid #efd8af;}.nav>li ul {display: none;}.nav>li ul li:hover {background-color: #fff4d8;}</style>
</head><body><script>$(function() {// 鼠标经过nav里面的li// hover是事件切换，鼠标移动到元素上触发事件，鼠标离开也会触发事件。// hover的标准格式是$(element).hover(function(){},function(){})// 如果hover里面只有一个函数，那么鼠标经过和离开都会触发这个函数$('.nav>li').hover(function() {$(this).children('ul').slideToggle()})})</script><ul class="nav"><li><a href="#">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li><li><a href="#">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li><li><a href="#">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li><li><a href="#">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li></ul>
</body></html>

Jquery实现下拉菜单滑动效果相关推荐

用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
html下拉菜单插件,简单的jQuery大型下拉菜单插件
booNavigation是一款简单的jQuery大型下拉菜单插件.通过该插件可以制作3列大型下拉菜单,并带有平滑过渡效果,以及鼠标滑过菜单项时的动画效果. 使用方法在页面中引入jquery和boo ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
jQuery练习——下拉菜单
哈喽大家好,本次是jQuery案例练习系列第一期,本期是用jQuery实现下拉菜单. 笔者还是前端的菜鸟,还请大家多多指教呀~ 欢迎大佬指正,一起学习,一起加油! 第一期--下拉菜单的实现文章目录 ...
jquery 下拉菜单 html,jQuery实现下拉菜单的实例代码
基本效果是这样的~~ * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; ...
jquery 实现下拉菜单
为什么80%的码农都做不了架构师?>>> 该文章属于原创:转载注明出处:http://www.pm-road.com/index.php/2014/12/09/276/ Jqu ...
使用jQuery完成下拉菜单
开发工具与关键技术:Adobe Dreamweaver CC 2017 jQuery 作者:孙水兵撰写时间:2019年2月21 用jQuery实现下拉菜单是一件很简单的事,主要是进行css的编写,将 ...
jquery php下拉列表,JQuery三级下拉菜单
摘要: jQuery三级下拉菜单首页内容动画动画2 3级菜单→ 我是3级菜单我是3级菜单我是3级菜单动画2 3级菜单→ 我是3级菜单我是3级菜单 4级菜单→ 我是4级菜单我是4级菜单 ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...

Jquery实现下拉菜单滑动效果

Jquery实现下拉菜单滑动效果相关推荐

最新文章

热门文章