jquery滑动下拉菜单 jQuery and CSS3 Awesome Slide Down Box Menu

作者:网络 来源:佚名 更新时间:2010-12-05 21:01:57 点击:

jquery滑动下拉菜单 jQuery and CSS3 Awesome Slide Down Box Menu,ie6和firefox下测试正常。

The JavaScript

When we enter with the mouse on a list element we enlarge the image, and show both, the sdt_active span and the sdt_wrap span. If the element has a submenu (sdt_box), then we slide it to the side. If the element is the last one in the menu we slide the submenu box to the left, otherwise to the right:


 

$(function() {
 $('#sdt_menu > li').bind('mouseenter',function(){
  var $elem = $(this);
  $elem.find('img')
    .stop(true)
    .animate({
    'width':'170px',
    'height':'170px',
    'left':'0px'
    },400,'easeOutBack')
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'140px'},500,'easeOutBack')
    .andSelf()
    .find('.sdt_active')
    .stop(true)
    .animate({'height':'170px'},300,function(){
   var $sub_menu = $elem.find('.sdt_box');
   if($sub_menu.length){
    var left = '170px';
    if($elem.parent().children().length == $elem.index()+1)
     left = '-170px';
    $sub_menu.show().animate({'left':left},200);
   }
  });
 }).bind('mouseleave',function(){
  var $elem = $(this);
  var $sub_menu = $elem.find('.sdt_box');
  if($sub_menu.length)
   $sub_menu.hide().css('left','0px');

  $elem.find('.sdt_active')
    .stop(true)
    .animate({'height':'0px'},300)
    .andSelf().find('img')
    .stop(true)
    .animate({
    'width':'0px',
    'height':'0px',
    'left':'85px'},400)
    .andSelf()
    .find('.sdt_wrap')
    .stop(true)
    .animate({'top':'25px'},500);
 });
});