Due to personal reasons that I won't delve into, my goal is to replicate the functionality of this menu :
demo : http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
However, I want to achieve this without using Modernizr and possibly utilizing JQuery instead. The section of code that is causing me issues is as follows :
$.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 with everything - http://codepen.io/eclipsewebdesign/pen/FcuGJ/
Is it feasible to achieve this? Any guidance or assistance would be highly appreciated as my attempts with JQuery have been unsuccessful due to my limited knowledge.
Thank you