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

发布时间：2018-08-19 19:52:38 所属栏目：业界来源：站长网

导读：操作 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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

宏光MINI GAMEBOY全面	美国初创公司Aquarian
新一代汽车芯片的设计	显示器常见背光种类盘