查看本章节

查看作业目录

需求说明：

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

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

实现思路：

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

实现代码：

核心代码：

<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 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果的更多相关文章

  1. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  2. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  3. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  4. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  5. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  6. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  7. JQuery动画之滑入滑出动画

    1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...

  8. WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

    原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...

  9. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

随机推荐

  1. Android 利用Settings.Global属性跨应用定义标志位

    https://blog.csdn.net/ouzhuangzhuang/article/details/82258148 需求 需要在不同应用中定义一个标志位,这里介绍下系统级别的应用和非系统级别应 ...

  2. HongYun项目启动

    一个前后端分离项目的启动顺序: 数据库启动, stams 后台springboot启动 中间路由启动,比如nginx,如果有的话:有这一层,后台可以设置负载均衡,可以动态部署 前端启动

  3. spring 事务处理中，同一个类中:A方法（无事务）调B方法（有事务）,事务不生效问题

    public class MyEntry implements IBaseService{ public String A(String jsonStr) throws Exception{ User ...

  4. C++易错小结

    C++ 11 vector 遍历方法小结 方法零,对C念念不舍的童鞋们习惯的写法: void ShowVec(const vector<int>& valList) { int c ...

  5. idea maven 项目 遇到 "Module not specified" 解决方法

    1. 原因:我这边出现的原因是 其他同事在提交代码是 将  这个文件夹也提交了,idea 会加载 .idea 里的配置(即 他的配置),而我的 maven 配置不同,导致出错. 2. 解决方法:删除这 ...

  6. java实现文件压缩

    java实现文件压缩:主要是流与流之间的传递 代码如下: package com.cst.klocwork.service.zip; import java.io.File; import java. ...

  7. 如何查看Python的版本号

    一.如何查看Python的版本号 win+r输入cmd在输入:python --version回车即可

  8. InnoDB学习（五）之MVCC多版本并发控制

    MVCC多版本并发控制,是一种数据库管理系统并发控制的方法.MVCC多版本并发控制下,数据库中的数据会有多个版本,分别对应不同的事务,从而达到事务之间并发数据的隔离.MVCC最大的优势是读不加锁,读写 ...

  9. [BUUCTF]PWN——[V&N2020 公开赛]easyTHeap

    [V&N2020 公开赛]easyTHeap 附件 步骤: 例行检查,64位程序,保护全开 本地试运行一下,看看大概的情况,常见的堆的菜单 64位ida载入,main函数 最多只能申请7个ch ...

  10. 工厂为什么要进行计划排产，APS高级计划排程系统的优势作用是什么？

    我们每个人的指挥中心是大脑,大脑对我们身体发出各种各样的指令,不停的告诉我们身体去干什么. 那么,一个制造企业的指挥中心是哪里?工厂每天都会接到各种各样的订单,通过几百上千的工人,使用各种设备来生产. ...