查看本章节

查看作业目录

需求说明：

在 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. 为什么CTR预估使用AUC来评估模型？

    ctr预估简单的解释就是预测用户的点击item的概率.为什么一个回归的问题需要使用分类的方法来评估,这真是一个好问题,尝试从下面几个关键问题去回答. 1.ctr预估是特殊的回归问题 ctr预估的目标函 ...

  2. Linux基础命令---host域名查询工具

    host host是一个常用的DNS查询工具,经常用来查询域名.检查域名解析是否正确. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.   1.语法       ...

  3. Mybatis中 SIMPLE、REUSE、BATCH的区别

    Executor分成两大类,一类是CacheExecutor,另一类是普通Executor. 普通类又分为: ExecutorType.SIMPLE: 这个执行器类型不做特殊的事情.它为每个语句的执行 ...

  4. 线程开启的第一种方法：通过创建Thread的子类的对象的方式

    package cn.itcast.demo16.demo06.Thread;/** * @author newcityman * @date 2019/7/22 - 21:47 */public c ...

  5. scrapy爬取招聘网站，items转换成dict遇到的问题

    pipelines代码 1 import json 2 3 class TencentJsonPipeline(object): 4 def __init__(self): 5 self.file = ...

  6. 3、Spring的DI依赖注入

    一.DI介绍 1.DI介绍 依赖注入,应用程序运行依赖的资源由Spring为其提供,资源进入应用程序的方式称为注入. Spring容器管理容器中Bean之间的依赖关系,Spring使用一种被称为&qu ...

  7. Linux下安装中文字体

    目录 一.Centos系列 二.Ubuntu系列 一.Centos系列 1.安装字体库 yum -y install fontconfig 2.添加中文字体,建立存储中文字体的文件夹 mkdir /u ...

  8. 突破类型限制的“数据透视图”（Excel技巧集团）

    Excel中,图表一共16个大类,但是数据透视图却被"阉"了好几个-- 这也就是说,数据透视图无法与上图中高亮标出的图表类型并存了? 确实如此,但并不绝对,因为我们可以在" ...

  9. 什么是甘特图（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 名词解释:"甘特图(Gantt Chart)是一种图形化的项目活动及其他相关系统进度情况的水平方向的条状图.&q ...

  10. C语言程序与设计：统计素数并求和

    目录 C语言程序与设计:统计素数并求和 1.题目要求 2.分析 3.代码 C语言程序与设计:统计素数并求和 1.题目要求 输入两个正整数 m 和 n(1≤m≤n≤500),统计给定整数 m 和 n 区 ...