jquery实现的淡入淡出下拉菜单效果


Posted in Javascript onAugust 25, 2015

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

这是一款jQuery带有淡入淡出效果的下拉菜单,可作为一个下拉导航菜单的模板,移动鼠标到一级主菜单上看一看,在有包括二级子菜单的菜单项上悬停时,二级菜单渐变显示出来,兼容性也是很不错的,希望大家喜欢哈。

运行效果截图如下:

jquery实现的淡入淡出下拉菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉菜单效果</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal}
ol, ul{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }
a { color: black }
#nav li { float: left; position: relative; }
#nav li a { background: #d6cfbd; border: 3px solid #4f4026; color: #333; display: block; margin: 0 5px 0 0; padding: 5px 8px; }
#nav li a:hover { background: #f7f7f7; text-decoration: none; }
#nav { display: block; height: 35px; padding: 10px 0; width: 500px; z-index: 100; position: absolute;}
#nav > li > a { border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;}
#nav li ul { background: #e1ddd3; border: 3px solid #4f4026; color: #333; display: none; margin: -3px 0 0 0; width: 200px; position: absolute; }
#nav li ul li { width: 100% }
#nav li ul li a { background: none; border: none; line-height: 30px; margin: 0; padding: 0 0 0 5px; }
#nav li ul li a:hover { background: #f7f7f7;}
#nav li.current > a { background: #f7f7f7; }
#nav li:hover > ul.child { display: block; }
</style>
<!--<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>-->
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){ 
 $("#nav ul.child").removeClass("child");
 $("#nav li").has("ul").hover(function(){
  $(this).addClass("current").children("ul").fadeIn();
 }, function() {
  $(this).removeClass("current").children("ul").hide();
 });
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="content">
<h2>jQuery sub-navigation with CSS fall-back</h2>
<ul id="nav">
<li><a href="#">网站主页</a></li>
<li><a href="#">开源源码</a>
<ul class="child">
 <li><a href="#">PHP源码</a></li>
 <li><a href="#">ASP源码</a></li>
 <li><a href="#">JSP源码</a></li>
 <li><a href="#">Ajax源码</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul class="child">
 <li><a href="#">广告业务</a></li>
 <li><a href="#">Installations</a></li>
 <li><a href="#">Setups</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
json原理分析及实例介绍
Nov 29 Javascript
Javascript实现计算个人所得税
May 10 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
js实现百度搜索提示框
Feb 05 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
js实现轮播图特效
May 28 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 #Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 #Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 #Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 #Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 #Javascript
js文本框走动跑马灯效果代码分享
Aug 25 #Javascript
jQuery实现图片左右滚动特效
Apr 20 #Javascript
You might like
PHP 常见郁闷问题答解
2006/11/25 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
json的前台操作和后台操作实现代码
2012/01/20 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
JS常见算法详解
2017/02/28 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
pow在python中的含义及用法
2019/07/11 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
解除聘用合同证明书范本
2014/09/11 职场文书
预备党员介绍人意见
2015/06/01 职场文书
运动会主持词大全
2015/07/02 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android