您当前位置：首页 > web前端 > jquery > jQuery 打造的渐变下拉菜单效果

jQuery 打造的渐变下拉菜单效果

来源：程序员人生发布时间：2013-11-07 21:53:28 阅读次数：3728次

　　利用jQuery来实现，其实就几行代码的事。即便如此，由于js语言的思维方式，还是一直没有把握好，加上一个css的问题，导致弄了好久才出来效果。这里主要是利目标在鼠标经过时（.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=GBK" /><title>jQuery 渐变下来效果 - liehuo.net</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="http://www.wfuyu.com/">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="http://www.wfuyu.com/uploads/litimg/0912/feedme.png" alt="feedme" /></a><ul><li><a href="http://www.wfuyu.com/" rel="RSS"><img src="http://www.wfuyu.com/uploads/litimg/0912/rss.gif" alt="RSS Feed" /></a></li><li><a href="http://www.wfuyu.com/" class="xg" rel="nofollow">鲜果订阅</a></li><li><a href="http://www.wfuyu.com/" class="gr" rel="nofollow">Google订阅</a></li><li><a href="http://www.wfuyu.com/" class="zx" rel="nofollow">抓虾订阅</a></li><li><a href="http://www.wfuyu.com/" class="yd" rel="nofollow">有道订阅</a></li><li><a href="http://www.wfuyu.com/" class="more-rss" rel="RSS">更多方式 »</a></li></ul></li></ul></div><script language="javascript" type="text/javascript" src="http://www.wfuyu.com/uploads/common/jquery-1.3.2.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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 巧用百度贴吧推广网站获取大量流量的另类手段

下一篇 JavaScript：跳转页面的几个方法

分享到:

------分隔线----------------------------