jquery实现的淡入淡出下拉菜单效果
更新时间：2015年08月25日 12:09:00 作者：企鹅
这篇文章主要介绍了jquery实现的淡入淡出下拉菜单效果,涉及jquery操作页面属性的动态添加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery实现的淡入淡出下拉菜单效果。分享给大家供大家参考。具体如下：
这是一款jQuery带有淡入淡出效果的下拉菜单，可作为一个下拉导航菜单的模板，移动鼠标到一级主菜单上看一看，在有包括二级子菜单的菜单项上悬停时，二级菜单渐变显示出来，兼容性也是很不错的，希望大家喜欢哈。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/
具体代码如下：
<!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程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery实现碰到边缘反弹的动画,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
本文主要介绍jquery仿ps颜色拾取功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取，具体示例代码如下，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-05-05
这篇文章主要为大家详细介绍了jQuery实现简单的抽奖游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
下面小编就为大家带来一篇jquery 删除节点 添加节点 找兄弟节点的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
本篇文章主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了JQuery+drag.js上传图片并且实现图片拖曳,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
打开空白新窗口，再给新窗口的localtion赋值，需要的朋友可以参考下2012-08-08
为jquery的ajax请求添加超时timeout时间的操作方法
这篇文章主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法，文中通过一段简单的代码给大家介绍jquery ajax超时设置方法，感兴趣的朋友跟随脚本之家小编一起看看吧2018-09-09
本文给大家分享的是个人关于jQuery中事件的理解，主要向大家介绍了jQuery中事件的绑定，合成、以及事件冒泡、阻止事件等内容，希望大家能够喜欢。2015-03-03
最新评论