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 相关文章推荐
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JS ES6异步解决方案
Apr 29 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
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
python3爬取各类天气信息
2018/02/24 Python
使用Scrapy爬取动态数据
2018/10/21 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
详解python内置模块urllib
2020/09/09 Python
python 下载文件的几种方法汇总
2021/01/06 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
上班睡觉检讨书
2014/01/09 职场文书
英文商务邀请信
2014/01/22 职场文书
大学运动会通讯稿
2014/01/28 职场文书
一夜的工作教学反思
2014/02/08 职场文书
学生安全教育材料
2014/02/14 职场文书
诚信承诺书范文
2014/03/27 职场文书
综艺节目策划方案
2014/06/13 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书