/* DD Mega Menu * Created: June 13th, 2011 by DynamicDrive.com. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ jQuery.noConflict() jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/ easeOutBack:function(x, t, b, c, d, s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; }, easeInOutCirc: function (x, t, b, c, d) { if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; }, easeInOutSine: function (x, t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; } }) var ddmegamenu={ startzindex:100, wrapperoffset:[10,25], //additional width and height to add to outer wrapper of drop down menus to accomodate CSS drop down shadow, if any ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers init:function(setting){ var $=jQuery var s=$.extend({fx:'slide', easing:'easeInOutSine', dur:'normal', hidedelay:200}, setting) if (s.fx=="none") //if fx is disabled, bypass animation s.dur=0 var $mainmenu=$('#'+s.menuid) $anchors=($mainmenu.attr('rel'))? $mainmenu : $mainmenu.find('a[rel]') function buildmenu($anchors){ $anchors.each(function(){ //loop through anchor links var $anchor=$(this) var $submenu=$('#'+$anchor.attr('rel').replace(/\[\w+\]/, '')) //extract "submenuid" from rel="submenuid[orientation]" to reference submenu var orienttoleft=/\[left\]/.test($anchor.attr('rel')) //check for rel="submenuid[left]" to indicate submenu should be left aligned $submenu.wrap('
') .css({visibility:'inherit', top:-$submenu.outerHeight()}) //set submenu's top pos so it's out of view intially .data('timer', {}) //add timer data object to submenu object var $wrapper=$submenu.closest('div.megawrapper').css({width:$submenu.outerWidth()+ddmegamenu.wrapperoffset[0], height:$submenu.outerHeight()+ddmegamenu.wrapperoffset[1]}) //reference outermost wrapper of submenu and set its dimensions var $wrapperparent=$anchor.closest('div.megawrapper') //check if this anchor link is defined inside a submenu wrapper (nested menu) if ($wrapperparent.length>0){ //if so $wrapper.appendTo($wrapperparent) //move corresponding submenu wrapper to within its parent submenu wrapper } else{ //else if this submenu wrapper is topmost $wrapper.appendTo(document.body) //move it so it's a child of document.body $submenu.data('istopmenu', true) //indicate this is top level wrapper } $anchor.mouseenter(function(){ //when mouse moves OVER anchor clearTimeout($submenu.data('timer').hide) var offset=($submenu.data('istopmenu'))? $anchor.offset() : $anchor.position() if ($submenu.data('istopmenu')){ $anchors.removeClass('selected') $anchor.addClass('selected') } $wrapper.css({visibility:'visible', left:offset.left-(orienttoleft? $wrapper.outerWidth()-$anchor.outerWidth()-ddmegamenu.wrapperoffset[0] : 0), top:offset.top+$anchor.outerHeight(), zIndex:++ddmegamenu.startzindex}) $submenu.stop().animate({top:0}, s.dur, s.easing) //animate submenu into view }) $anchor.mouseleave(function(){ //when mouse moves OUT anchor $submenu.data('timer').hide=setTimeout(function(){ $submenu.stop().animate({top:-$submenu.outerHeight()}, s.dur, function(){$wrapper.css({visibility:'hidden'})}) //animate submenu out of view and hide wrapper DIV $anchor.removeClass('selected') }, s.hidedelay) }) $anchor.click(function(e){ if (ddmegamenu.ismobile) //on ipad/iphone, disable anchor link (those with a drop down menu) when clicked on (triggered by mouseover event on desktop), so menu is given a chance to appear return false }) $wrapper.mouseenter(function(){ //when mouse moves OVER submenu wrapper clearTimeout($submenu.data('timer').hide) }) $wrapper.bind('mouseleave click', function(e){ //when mouse moves OUT or CLICKs on submenu wrapper $submenu.data('timer').hide=setTimeout(function(){ $submenu.stop().animate({top:-$submenu.outerHeight()}, (e.type=="click")? 0 : s.dur, function(){$wrapper.css({visibility:'hidden'})}) //animate submenu out of view and hide wrapper DIV $anchor.removeClass('selected') }, s.hidedelay) }) buildmenu($submenu.find('a[rel]')) //build next level sub menus }) } buildmenu($anchors) }, docinit:function(setting){ jQuery(function($){ //on document.ready ddmegamenu.init(setting) }) } }