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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue移动端模态框(可传参)的实现
Nov 20 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
桌面中心(四)数据显示
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
网络书店创业计划书
2014/02/07 职场文书
合作意向书格式及范文
2014/03/31 职场文书
志愿者活动总结
2014/04/28 职场文书
美食节策划方案
2014/05/26 职场文书
2014年学前班工作总结
2014/12/08 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
保护地球的宣传语
2015/07/13 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python