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

发布时间：2018-08-20 16:07:49 所属栏目：传媒来源：站长网

导读：利用 jQuery 来实现，其实就几行代码的事。即便如此，由于js语言的思维方式，还是一直没有把握好，加上一个css的问题，导致弄了好久才出来效果。这里主要是利目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示原来隐藏着的内容： Copy to

　　利用jQuery来实现，其实就几行代码的事。即便如此，由于js语言的思维方式，还是一直没有把握好，加上一个css的问题，导致弄了好久才出来效果。这里主要是利目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示原来隐藏着的内容：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] $(function(){
$(".dropdown").hover(
function(){ $("li ul").slideToggle(800);},
function(){$("li ul").slideUp(1000)}
)
})

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

　　实例：

<!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.veryhuo.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.veryhuo.com/uploads/litimg/0912/feedme.png" alt="feedme" /></a> <ul> <li><a href="http://www.veryhuo.com/" rel="RSS"><img src="http://www.veryhuo.com/uploads/litimg/0912/rss.gif" alt="RSS Feed" /></a></li> <li><a href="http://www.veryhuo.com/" class="xg" rel="nofollow">鲜果订阅</a></li> <li><a href="http://www.veryhuo.com/" class="gr" rel="nofollow">Google订阅</a></li> <li><a href="http://www.veryhuo.com/" class="zx" rel="nofollow">抓虾订阅</a></li> <li><a href="http://www.veryhuo.com/" class="yd" rel="nofollow">有道订阅</a></li> <li><a href="http://www.veryhuo.com/" class="more-rss" rel="RSS">更多方式 »</a></li> </ul> </li> </ul> </div> <script language="javascript" type="text/javascript" src="http://www.veryhuo.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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

私域用户过百万，波奇	双十二种草好物换一把
公众号内测算法推荐引	B站首次发布创作者生态