Mega Menu drop down menu delay

[browncow]

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]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[browncow]

Script: DD Mega Menu
http://www.dynamicdrive.com/dynamici...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]

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]

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)
})