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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP 中dirname(_file_)讲解
2007/03/18 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
深入理解node.js http模块
2018/01/24 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
详解如何利用Cython为Python代码加速
2018/01/27 Python
python opencv读mp4视频的实例
2018/12/07 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
2014年冬季防火方案
2014/05/21 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
立春观后感
2015/06/18 职场文书
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL