jQuery实现的淡入淡出二级菜单效果代码


Posted in Javascript onSeptember 15, 2015

本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码。分享给大家供大家参考。具体如下:

这是一款加入了jQuery的菜单,一个看似平凡菜单突然有味道、有生机起来,这里将jQuery1.3.2引用进来,让弹出的二级菜单具备淡入淡出的效果,虽然就效果本身来说并不起眼,但比起无任何效果的菜单,从体验上来说,已经强了很多倍。

运行效果截图如下:

jQuery实现的淡入淡出二级菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>bar</title>
<style type="text/css">
*{margin:0px;padding:0px;font-size:12px;}
ul{list-style-type:none;}
a{text-decoration:none;color:#000;}
#nav{line-height:30px;}
#nav li{float:left;width:100px;}
#nav li a{display:block;width:100px;background:#ccc;text-align:center;}
#nav li a:hover{background:#666;color:#fff;font-weight:bold;}
#nav li ul{line-height:20px;position:absolute;display:none;}
#nav li ul li{float:left;width:130px;}
#nav li ul li a{display:block;width:130px;background:#eee;text-align:left;padding-left:30px;}
#nav li ul li a:hover{background:red;font-weight:normal;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
  var key=$("#nav>li");
   key.mouseover(function(){
    $(this).children(".nn1").fadeIn();
   });
   key.mouseout(function(){
    $(this).children(".nn1").fadeOut();
   });
});
</script>
</head>
<body>
<div>
<ul id="nav">
<li><a href="#">第一个</a>
<ul class="nn1">
<li><a href="#">1.0001</a></li>
<li><a href="#">1.0002</a></li>
<li><a href="#">1.0003</a></li>
</ul>
</li>
<li><a href="#">第二个</a>
<ul class="nn1">
<li><a href="#">2.0001</a></li>
<li><a href="#">2.0002</a></li>
<li><a href="#">2.0003</a></li>
</ul>
</li>
<li><a href="#">第三个</a>
<ul class="nn1">
<li><a href="#">3.0001</a></li>
<li><a href="#">3.0002</a></li>
<li><a href="#">3.0003</a></li>
</ul>
</li>
<li><a href="#">第四个</a>
<ul class="nn1">
<li><a href="#">4.0001</a></li>
<li><a href="#">4.0002</a></li>
<li><a href="#">4.0003</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
js实现日历
Nov 07 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 #Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 #Javascript
jquery图片轮播特效代码分享
Apr 20 #Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
You might like
建立文件交换功能的脚本(一)
2006/10/09 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
cssQuery()的下载与使用方法
2007/01/12 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python中sys模块是做什么用的
2020/08/16 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
公司道歉信范文
2014/01/09 职场文书
精神文明建设标语
2014/06/16 职场文书
村委会贫困证明范文
2014/09/21 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
运动会宣传稿100字
2015/07/23 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android