查看本章节

查看作业目录

需求说明：

在 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. pyqt5 改写函数

    重新改写了keyPressEvent() class TextEdit(QTextEdit): def __init__(self): QtWidgets.QTextEdit.__init__(sel ...

  2. 给webapp加上一个apk外壳

    原文:http://blog.csdn.net/cmyh100/article/details/77862962 1.在Android Studio里创建一个项目 2.创建MyApplication. ...

  3. vue-cli4脚手架搭建二

    vue-cli4脚手架搭建一 vue create vue3 cd vue3 yarn serve http://localhost:8080/#/ main.js文件 import Vue from ...

  4. 最小化安装centos ubuntu基础命令

    # yum install vim iotop bc gcc gcc-c++ glibc glibc-devel pcre \ pcre-devel openssl openssl-devel zip ...

  5. Activiti工作流引擎使用详解（一）

    一.IDEA安装activiti插件 在插件库中查找actiBPM,安装该插件,如果找不到该插件,请到插件库中下载该包手动安装,插件地址 http://plugins.jetbrains.com/pl ...

  6. 【Java 基础】Collectors 使用小结

    Collectors 与集合转换 Collectors toList streamArr.collect(Collectors.toList()); List<Integer> colle ...

  7. SpringBoot环境下java实现文件的下载

    思路:文件下载,就是给服务器上的文件创建输入流,客户端创建输出流,将文件读出,读入到客户端的输出流中,(流与流的转换) package com.cst.icode.controller; import ...

  8. SpringCloud微服务-Eureka服务注册与发现

    一. Eureka 是什么? Eureka是Netflix的一个子模块,也是核心模块之一.Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移.服务注册与发现对微服务 ...

  9. spring boot 配置属性值获取注解@Value和@ConfigurationProperties比较

    功能比较 :     @ConfigurationProperties  @Value  映射赋值 批量注入配置文件中的属性 一个个指定 松散绑定(松散语法)① 支持 不支持 SpEL② 不支持 支持 ...

  10. 03 - Vue3 UI Framework - 首页

    顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...