Results 1 to 5 of 5

Thread: Mega Menu drop down menu delay

  1. #1
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mega Menu drop down menu delay

    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!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    changes in red


    Code:
    	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)
    	},
    Code:
    ddmegamenu.docinit({
    	menuid:'solidmenu',
        opendelay:1500,
    	dur:200 //<--no comma after last setting
    })
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    $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)
    })

Similar Threads

  1. DD Mega Menu Drop Top (not Down)
    By Sirius in forum Dynamic Drive scripts help
    Replies: 15
    Last Post: 03-27-2013, 02:43 AM
  2. Mega Menu drop down cutting off
    By kyisha17 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-21-2011, 10:50 PM
  3. DD Mega Menu - drop down menu delay
    By Sixstringz in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-01-2011, 06:10 PM
  4. mega drop down menu click action
    By pase in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-23-2011, 09:09 PM
  5. AnyLink CSS 2.2 - Add a Delay? (mega drop-down)
    By mimib in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 11-23-2009, 05:49 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •