jQuery 渐变下拉菜单

这里主要是利目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示原来隐藏着的内容：复制代码代码如下: $(function(){ $(".dropdown").hover( function(){ $("li ul").slideToggle(800);}, function(){$("li ul").slideUp(1000)} ) }) 复制代码代码如下:<!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=utf-8" /> <title>jQuery 渐变下来效果</title> <style type="text/css"> a{text-decoration:none;color:#333;} a:hover{color:#f33;} a.gr{color:#227CE8;} a.xg{color:#f30;} a.zx{color:#690;} a.yd{color:#f00;} a.more-rss{color:#f60;} a img{border:none;} a.rssfeed{display:block;height:60px;width:160px;cursor:pointer;} .wrapper{width:700px;margin:0 auto;height:460px;position:relative;} .wrapper small{position:absolute;bottom:0;left:0;border-top:1px dotted #b3b3b3;display:block;width:700px;line-height:30px;text-align:right;} ul li{list-style:none;} ul li.dropdown{position:relative;width:160px;} ul li.dropdown ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:160px;padding:15px 15px 20px;} ul li.dropdown ul li{padding:5px 0;border-bottom:1px dotted #ddd;} </style> </head> <body> <div class="wrapper"> <h1><a href="">jQuery 渐变下拉菜单</a></h1> <p>使用slideToggle和slideUp来实现.当然,也可以使用hide/show, fadeIn/fadeOut等来实现,只是效果不同,实现的方法还是相同的.需要注意的是,要给.dropdown加上position:relative;防止闪烁.</p> <ul class="fir"> <li class="dropdown"> <a class="rssfeed"><img src="feedme.png" alt="feedme" /></a> <ul> <li><a href="#" rel="RSS"><img src="rss.gif" alt="RSS Feed" /></a></li> <li><a href="#" class="xg" rel="nofollow">鲜果订阅</a></li> <li><a href="#" class="gr" rel="nofollow">Google订阅</a></li> <li><a href="#" class="zx" rel="nofollow">抓虾订阅</a></li> <li><a href="#" class="yd" rel="nofollow">有道订阅</a></li> <li><a href="#" class="more-rss" rel="RSS">更多方式 »</a></li> </ul> </li> </ul> </div> <script language="javascript" type="text/javascript" src="jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(function(){ $(".fir .dropdown").hover( function(){ $("li ul").slideToggle(800); },function(){ $("li ul").slideUp(1000) }) }) </script> </body> </html>测试代码打包下载

　　推荐阅读

　　jquery自动完成插件(autocomplete)应用之PHP版

于工作中需要用到自动提示这个功能，呵呵，自己又是js小菜，于是百度了一下，找到一个用jquery与其插件autocomplete开发的.net版的自动完成功能，于是down下来了改成了php版的，并加了支持向上/向下选择文字等功能>>>详细阅读

本文标题：jQuery 渐变下拉菜单

地址：http://www.17bianji.com/kaifa2/JS/27490.html

1/2 1