您的位置:首页 > Web前端 > JQuery

jQuery slideToggle轻松实现效果不错的垂直下拉菜单

2013-04-15 11:43 633 查看
$(function(){
$(".v_menu_list li:odd").addClass("alt");
$("#menuClick").click(function(){
$("#vMenuList").slideToggle();
return false;
});
$(".v_menu_list > li > a").hover(function(){
$(this).animate({
paddingLeft: 20
},100);
},function(){
$(this).animate({
paddingLeft: 5
},50);
});
});


<div class="zxx_v_menu">
<div class="click_area" id="menuClick">
<a class="v_menu" href="#zhangxinxu" hidefocus="true"><span class="rel">垂直导航</span></a>
<span class="point_out"><span class="point_in">▼</span></span>
</div>
<ul class="v_menu_list" id="vMenuList">
<li><a href="#zhangxinxu">圣诞节</a></li>
<li><a href="#zhangxinxu">冬至</a></li>
<li><a href="#zhangxinxu">地震</a></li>
<li><a href="#zhangxinxu">股市</a></li>
<li><a href="#zhangxinxu">十月围城</a></li>
<li><a href="#zhangxinxu">三枪拍案惊奇</a></li>
<li><a href="#zhangxinxu">蜗居</a></li>
<li><a href="#zhangxinxu">阿凡达</a></li>
</ul>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: