by zhangxinxu 2009-12-22 00:28

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

页面jQuery代码:
$(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); }); });
页面HTML代码:
<div class="zxx_v_menu"> <div class="click_area" id="menuClick"> <a class="v_menu" href="javascript:" 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="javascript:">圣诞节</a></li> <li><a href="javascript:">冬至</a></li> <li><a href="javascript:">地震</a></li> <li><a href="javascript:">股市</a></li> <li><a href="javascript:">十月围城</a></li> <li><a href="javascript:">三枪拍案惊奇</a></li> <li><a href="javascript:">蜗居</a></li> <li><a href="javascript:">阿凡达</a></li> </ul> </div>