jquery 渐变下拉菜单效果代码__function_dropdown_color_slideToggle_position_

当前位置: 编程技术>jquery

jquery 渐变下拉菜单效果代码

来源: 互联网发布时间：2014-09-03

本文导语: jquery实现的渐变下拉菜单效果，挺简单的，主要利用目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示隐藏的内容： $(function(){ $(".dropdown").hover( function(){ $("li ul").slideToggle(800);}, function(){$("li ul").slideUp(1000)} ) ...

jquery实现的渐变下拉菜单效果，挺简单的，主要利用目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示隐藏的内容：

$(function(){
$(".dropdown").hover(
function(){ $("li ul").slideToggle(800);},
function(){$("li ul").slideUp(1000)}
)
})

效果图，如下：

完整代码：

 
 
 
 
jQuery 渐变下来效果-www. 
 
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;} 


 
 
jQuery 渐变下拉菜单 
使用slideToggle和slideUp来实现.当然,也可以使用hide/show, fadeIn/fadeOut等来实现,只是效果不同,实现的方法还是相同的。
注意：要给.dropdown加上position:relative;防止闪烁. 
 
 
 
 
 
鲜果订阅 
Google订阅 
抓虾订阅 
有道订阅 
更多方式 ? 
 
 
 
 
 
 
$(function(){ 
    $(".fir .dropdown").hover( 
        function(){ 
            $("li ul").slideToggle(800); 
        },function(){ 
            $("li ul").slideUp(1000) 
        }) 
})