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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
vue 授权获取微信openId操作
2020/11/13 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
python time模块用法实例详解
2014/09/11 Python
Python进行数据提取的方法总结
2016/08/22 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python实现结构体代码实例
2020/02/10 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
2019年.net常见面试问题
2012/02/12 面试题
监理员的岗位职责
2013/11/13 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
应用心理学专业求职信
2014/08/04 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
大学毕业生个人总结
2015/02/28 职场文书
费城故事观后感
2015/06/10 职场文书