2016-04-21 86 views
-2

由於我不想進入的原因。我想實現這個菜單的效果:在不使用Modernizr的情況下實現這個結果?

演示: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

但是,如果沒有使用Modernizr的到位可能使用JQuery。在這部分代碼是什麼絆倒了我,讓

$.DLMenu.prototype = { 
    _init : function(options) { 
// options 
     this.options = $.extend(true, {}, $.DLMenu.defaults, options); 
     // cache some elements and initialize some variables 
     this._config(); 

     var animEndEventNames = { 
       'WebkitAnimation' : 'webkitAnimationEnd', 
       'OAnimation' : 'oAnimationEnd', 
       'msAnimation' : 'MSAnimationEnd', 
       'animation' : 'animationend' 
      }, 
      transEndEventNames = { 
       'WebkitTransition' : 'webkitTransitionEnd', 
       'MozTransition' : 'transitionend', 
       'OTransition' : 'oTransitionEnd', 
       'msTransition' : 'MSTransitionEnd', 
       'transition' : 'transitionend' 
      }; 
     // animation end event name 
     this.animEndEventName = animEndEventNames[ Modernizr.prefixed('animation') ] + '.dlmenu'; 
     // transition end event name 
     this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ] + '.dlmenu'; 
     // support for css animations and css transitions 
     this.supportAnimations = Modernizr.cssanimations; 
     this.supportTransitions = Modernizr.csstransitions; 

     this._initEvents(); 

    }, 

Codepen的一切 - http://codepen.io/eclipsewebdesign/pen/FcuGJ/

這甚至可能嗎?任何幫助將不勝感激我嘗試使用JQuery,但與我有限的知識,我沒有成功。

謝謝

+0

爲什麼不在您的構建中包含Modernizr?您可以輸出一個自定義版本,其中只包含您要使用的插件所需的CSS動畫/轉換測試。 –

回答

0
$('.top-menu').click(function() { 
    $(this).fadeIn('fast', function() { 
     if($(this).next().length > 0) { 
      $(this).fadeOut('fast', function() { 
       $(this).next().fadeIn('fast'); 
     }); 
     } 
    }); 
}); 

像這樣的事情?

相關問題