查看本章节

查看作业目录

需求说明：

在 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实现网络监听

    一.Android Wifi常用广播 网络开发中主体会使用到的action: ConnectivityManager.CONNECTIVITY_ACTION WifiManager.WIFI_STAT ...

  2. oracle中的控制语句

    一.条件语句1.流程控制-if else(1)ifif 判断条件 then      ...end if;(2)if-elseif 判断条件 then      ...else      ...end ...

  3. springboot-使用AOP日志拦截实现

    一 前言 借助spring的AOP功能,我们可以将AOP应用至全局异常处理,全局请求拦截等,本篇文章的核心功能就是使用AOP实现日志记录,比如哪些用户进行了哪些操作,对于一个成功的项目这是必须记录的, ...

  4. 在调用系统相册时,UIIMagePickerController使用中偷换StatusBar颜色的问题

    在调用系统相册时,UIIMagePickerController使用中偷换StatusBar颜色的问题 此时解决办法是 #pragma mark - UIImagePickerController D ...

  5. Non-terminating decimal expansion; no exact representable decimal result.

    Non-terminating decimal expansion; no exact representable decimal result.  翻译为:非终止十进制扩展; 没有确切的可表示的小数 ...

  6. 进程(process)和线程(thread)

    来源:阮一峰 进程(process)和线程(thread)是操作系统的基本概念,但是它们比较抽象,不容易掌握. 其实做一个很好的类比,就可以把它们解释地清晰易懂. 1.计算机的核心是CPU,它承担了所 ...

  7. 转：StoryBoard快速上手

    由于最近才接触到IOS,苹果已经建议storyboard来搭建所有界面了,于是我也追随时尚,直接开始使用storyboard.(不料在涉及到页 面跳转的时候,遇到的问题是:点击后没有任何反应)众所周知 ...

  8. 一个使用 asyncio 开发的网络爬虫（译文）

    原文地址:https://www.aosabook.org/en/500L/a-web-crawler-with-asyncio-coroutines.html 作者简介 A. Jesse Jiryu ...

  9. 保留重复项（Power Query 之 M 语言）

    数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...

  10. manjaro（arch系）Linux使用（一）

    # manjaro的使用 ## 配置源 先切换国内的镜像源仓库 `sudo pacman-mirrors -i -c China -m rank` 在弹出的窗口中选择延迟最小的源 ### 添加arch ...