2016-04-21 11 views
-2

Aus Gründen, auf die ich lieber nicht eingehen würde. Ich versuche, die Auswirkungen dieses Menü zu erreichen:Erreichen Sie dieses Ergebnis ohne den Einsatz von Modernizr?

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

Aber ohne den Einsatz von Modernizr möglicherweise mit JQuery an seinem Platz. Dieser Teil des Codes ist das, was Auslösung mich auf:

$.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 mit allem, was - http://codepen.io/eclipsewebdesign/pen/FcuGJ/

Ist das überhaupt möglich? jede Hilfe wäre willkommen Ich habe versucht, JQuery zu verwenden, aber mit meinem begrenzten Wissen war ich nicht erfolgreich.

Danke

+0

Warum nicht einfach Modernizr in Ihrem Build? Sie können eine benutzerdefinierte Version davon ausgeben, die nur die CSS-Animations-/Übergangstests enthält, die für das gewünschte Plug-In erforderlich sind. –

Antwort

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

So etwas wie das?