Results 1 to 4 of 4

Thread: JQuery Drop Line Menu question

  1. #1
    Join Date
    Jan 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default JQuery Drop Line Menu question

    1) Script Title: JQuery Drop Line Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...rop_line_menu/

    3) Describe problem:
    What I need to do is to find out how to implement a delay on the tabs before the drop down activates. Say my user is rolling through the menu, at this point the menu responds too quick. I'd like it to wait say 300ms before dropping the line of items. Many thanks

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Try:
    Code:
    /*********************
    //* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
    //* Last updated: June 27th, 09'
    //* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
    *********************/
    
    var droplinemenu={
    
    arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
    animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
    
    buildmenu:function(menuid){
    	jQuery(document).ready(function($){
    		var $mainmenu=$("#"+menuid+">ul")
    		var $headers=$mainmenu.find("ul").parent()
    		$headers.each(function(i){
    			var $curobj=$(this)
    			var $subul=$(this).find('ul:eq(0)')
    			this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
    			this.istopheader=$curobj.parents("ul").length==1? true : false
    			if (!this.istopheader)
    				$subul.css({left:0, top:this._dimensions.h})
    			var $innerheader=$curobj.children('a').eq(0)
    			$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
    			$innerheader.append(
    				'<img src="'+ droplinemenu.arrowimage.src
    				+'" class="' + droplinemenu.arrowimage.classname
    				+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
    			)
    			$curobj.hover(
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					if ($targetul.queue().length<=1) //if 1 or less queued animations
    						if (this.istopheader)
    							$targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
    						if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
    							$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
    						setTimeout(function(){ $targetul.slideDown(droplinemenu.animateduration.over) }, 300);
    				},
    				function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					$targetul.slideUp(droplinemenu.animateduration.out)
    				}
    			) //end hover
    		}) //end $headers.each()
    		$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    	}) //end document.ready
    }
    }
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    bbcompent1 (02-03-2010)

  4. #3
    Join Date
    Jan 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That was great, how did you make the change happen?

  5. #4
    Join Date
    Jan 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Was it this line???

    setTimeout(function(){ $targetul.slideDown(droplinemenu.animateduration.over) }, 300);

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
  •