PDA

View Full Version : Mega Menu drop down menu delay



browncow
04-01-2014, 04:32 PM
Is there a way to create a delay in Mega Menu so that a quick pass of the mouse will not fire the drop down? Would like the drop down to fire only when the user is intentional with a mouseover. Thanks for any help!

Beverleyh
04-01-2014, 04:47 PM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

browncow
04-04-2014, 05:51 PM
Script: DD Mega Menu
http://www.dynamicdrive.com/dynamicindex1/ddmegamenu.htm

Is there a way to create a delay in Mega Menu so that a quick pass of the mouse will not fire the drop down? Would like the drop down to fire only when the user is intentional with a mouseover. Thanks for any help!

vwphillips
04-05-2014, 10:00 AM
changes in red



init:function(setting){
var $=jQuery
var s=$.extend({fx:'slide', easing:'easeInOutSine', dur:'normal', hidedelay:200, opendelay:100}, 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('<div class="megawrapper" style="z-index:'+ddmegamenu.startzindex+';position:absolute;top:0;left:0;visibility:hidden"><div style="position:absolute;overflow:hidden;left:0;top:0;width:100%;height:100%;"></div></div>')
.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.bind((setting.trigger=="click")? "click" : "mouseenter", function(e){ //when mouse clicks on or mouses 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.data('timer').hide=setTimeout(function(){
$submenu.stop().animate({top:0}, s.dur, s.easing) //animate submenu into view
},s.opendelay);
//
if (setting.trigger=="click" && !ddmegamenu.ismobile) //returning false in mobile browsers seem to lead to strange behavior
return false
})
$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)
},





ddmegamenu.docinit({
menuid:'solidmenu',
opendelay:1500,
dur:200 //<--no comma after last setting
})

browncow
04-07-2014, 04:05 PM
Thank you for the quick reply. The code you provided did the trick though I did have to add one additional line of code to make the delay act correctly on the mouseout. For some reason the delay would appear to get confused and fire the dropdown at random times within the delay window when "mousing around" frequently over the menu. I'm including my edit below in case others read this post and want to work with the delay option.

One important note: I'm not a coder so the line I added comes as an educated guess that seems to work. Please feel free to comment or correct my edit.

Portions of the original edit from vwphillips are in blue. My added line of code in red.



$anchor.bind((setting.trigger=="click")? "click" : "mouseenter", function(e){ //when mouse clicks on or mouses 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})
//edit for dropdown delay
$submenu.data('timer').hide=setTimeout(function(){
$submenu.stop().animate({top:0}, s.dur, s.easing) //animate submenu into view
},s.opendelay)
//end edit for dropdown delay
if (setting.trigger=="click" && !ddmegamenu.ismobile) //returning false in mobile browsers seem to lead to strange behavior
return false
})
$anchor.mouseleave(function(){ //when mouse moves OUT anchor
clearTimeout($submenu.data('timer').hide)
$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)
})