在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

查看本章节

查看作业目录

需求说明：

用户将光标移动到“最新动态页”或“帮助查询”菜单上时，其二级菜单滑入显示当鼠标从“最新动态页”或“帮助查询”菜单上移出时，其二级菜单滑出隐藏

实现思路：

新建 HTML 页面，在页面上使用无序列表显示一级菜单
在“最新动态页”和“帮助查询”菜单中加入二级菜单，二级菜单默认状态为隐藏
当鼠标悬浮在一级菜单上时，菜单的背景色变为红色，字体颜色变为白色
为一级菜单的鼠标移入、移出事件绑定方法，实现二级菜单的滑入滑出效果
当鼠标悬浮在二级菜单上时，菜单的背景色变为红色，字体颜色变为白色

实现代码：

核心代码：

<script type="text/javascript">$(function(){$("#menu>li:has(ul)").hover(function(){$(this).find('ul').slideDown(500);},function(){$(this).find('ul').slideUp(500);})})
</script>

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 14px;}ul{list-style: none;}a{text-decoration: none;color: #000;}#wrap{position: relative;top: 0px;width: 876px;height: 34px;line-height: 34px;margin: 0 auto;}#menu li{float: left;display: block;width: 92px;height: 37px;line-height: 37px;text-align: center;margin-right: 2px;}#menu li a{display: block;background: #edebec;font-size: 14px;color: #333;width: 92px;height: 37px;line-height: 37px;}#menu li a:hover{background: red;color: white;}#menu li ul{position: absolute;top: 37;width: 90px;display: none;border: 1px solid #ce070e;border-top: none;background: #fff;}#menu li ul li{float: left;width: 90px;height: 37px;line-height: 37px;}#menu li ul ll a:link{width: 90px;height: 37px;line-height: 37px;}#menu li ul li a:hover{color: white;text-decoration: none;}</style><script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#menu>li:has(ul)").hover(function(){$(this).find('ul').slideDown(500);},function(){$(this).find('ul').slideUp(500);})})</script></head><body><div id="wrap"><ul id="menu"><li><a href="#">网站首页</a></li><li><a href="#">最新动态页</a><ul><li><a href="#">源码爱好者</a></li><li><a href="#">编程导航</a></li><li><a href="#">网页特效</a></li></ul></li><li><a href="#">产品预订</a></li><li><a href="#">帮助查询</a><ul><li><a href="#">时速快递</a></li><li><a href="#">太空一号</a></li><li><a href="#">蜘蛛侠前传</a></li><li><a href="#">未来战士</a></li><li><a href="#">蟒蛇之灾</a></li></ul></li><li><a href="#">会员俱乐部</a></li><li><a href="#">凯撤论坛</a></li></ul></div></body>
</html>

在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果相关推荐

jQuery二级下拉导航菜单插件适用手机端
下载地址一款非常时尚的jQuery和css3二级下拉导航菜单插件.该导航菜单插件中带有二级子菜单,也可以以图文方式展示或图标加文字方式组合展示,非常灵活方便.HTML结构html结构使用一个嵌套的无 ...
js读取div从html中导入,在html中div+css布局的简单应用...-js+div+css下拉导航菜单完整代...-CSS文件的条件导入 - Gene Li_169IT.COM...
方案一: 在HTML文档中使用条件导入,如在HEAD中插入如下代码: 1: 4: .csharpcode, .csharpcode pre{font-size: small;color: black; ...
一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
jquery效果显示隐藏滑入滑出
jquery jquery效果 jquery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 滑入滑出:slideDown() / sl ...
JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: ...
css上滑事件,css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
android底部滑出view,Android CoordinatorLayout与NestedScrollView基于Behavior几行代码实现底部View滑入滑出...
Android CoordinatorLayout与NestedScrollView基于Behavior几行代码实现底部View滑入滑出在CoordinatorLayout的Behavior出现之前 ...

在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

查看本章节

查看作业目录

需求说明：

实现思路：

实现代码：

在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果相关推荐

最新文章

热门文章