查看本章节

查看作业目录

需求说明：

在 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. Linux上用Jexus部署Asp.Net网站：常规部署与Docker部署

    (一)常规部署 一.把 jexus压缩包下载到linux临时文件夹中. cd /tmp wget linuxdot.net/down/jexus-6.2.x-arm64.tar.gz (不同的操作系统 ...

  2. 关于for与forEach遍历集合中对集合进行操作的问题

    遍历List集合,在循环中再对List集合进行操作,有时候会遇到ConcurrentModificationException(并发修改异常);其实只有在forEach循环集合再对集合操作会发生异常: ...

  3. 机器学习——sklearn中的API

    import matplotlib.pyplot as pltfrom sklearn.svm import SVCfrom sklearn.model_selection import Strati ...

  4. webapck搭建环境，让你知道vue中的h函数的作用和虚拟节点如何上树！

    搭建环境 npm init 初始化项目 npm i -D snabbdom 安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 简单介绍 ...

  5. 1 - 基于ELK的ElasticSearch 7.8.x 技术整理 - 基础语法篇 - 更新完毕

    准备工作 0.什么是ElasticSearch?它和Lucene以及solr的关系是什么? 这些是自己的知识获取能力,自行百度百科 1.下载ElasticSearch的window版,linux版后续 ...

  6. pipeline脚本管理

    目录 一.代码仓库 二.远程拉取 一.代码仓库 1.使用gitlab做pipeline脚本的存储,新建一个仓库 2.新建文件,把代码放进去 脚本名可以按照规律填写,环境_应用名_类型,例如:test_ ...

  7. 「Python实用秘技03」导出项目的极简环境依赖

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第3期 ...

  8. 联盛德 HLK-W806 (十二): Makefile组织结构和编译流程说明

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...

  9. Linux下编译生成SO并进行调用执行

    Linux下编译生成SO并进行调用执行 参考博客的博客: C编译: 动态连接库 (.so文件) - Vamei - 博客园 (cnblogs.com) C 多个动态库存在同名函数问题处理方法:-fvi ...

  10. LuoguP7337 『MdOI R4』Fun 题解

    Content 有 \(n\) 个人去打比赛.给出第 \(i\) 个人的交通方式 \(t_i\) 和颓废值 \(q_i\)(均以 \(0/1\) 表示).如果 \(t_i=1,q_i=1\) 的人数 ...