jQuery Drop Line Menu - Keeping menu open

[whiteatom]

1) Script Title: jQuery Drop Line Menu
2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...rop_line_menu/

3) Describe problem: I have modified the menu css heavily to make the menu match my site design, and I have removed the code pertaining to the arrows. The code is in use at http://dev.swiftsure.org

Since this design has a small sub menu bar, I'd like to add a delay before the menu closes to make it easier to navigate (getting to a submenu item on the far right from the leftmost menu item is hard). I was thinking that I could add a delay(300) before the slideUp, but all that does is cause the menu to close 300ms after I come off the sub menu. Any suggestions on how to make the menu stay open through a minor mouse deviation? Can I add a hover margin around the sub menu?

Also, is there a way to make the top menu item stay "hovered" while you are on the sub menu?

Cheers,
whiteatom

[Nile]

First change:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

To:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Then where you see:

function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(droplinemenu.animateduration.out)
				}

Change that to:

function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.delay(1000).slideUp(droplinemenu.animateduration.out)
				}

In your CSS where you make the hover action, give it a class of 'hover'.
Then change(assuming you've made the above changes):

				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'})
						$targetul.slideDown(droplinemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.delay(1000).slideUp(droplinemenu.animateduration.out)
				}

To:

				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$(this).addClass('hover');
					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'})
						$targetul.slideDown(droplinemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$(this).removeClass('hover');
					$targetul.delay(1000).slideUp(droplinemenu.animateduration.out)
				}

[/code]

[whiteatom]

Thanks for the reply - that's almost what I want. I have updated to the newest version of jQuery (the 1.3 version was included in wordpress), and added the coded you suggested to make the menu stay open (I'll do the hovers next).

It does what it did before, the menu stays open, but when you roll out the bottom, then back over, the menu re-opens (it kinda blinks). And if you roll up off the menu to another sub-menu, and back down quickly, it goes back to the previous sub menu, not the one you moused onto.

These may seem like picky details, but I'm really concerned about getting the usability as good as I can.

Thanks for you help. I'm a bit new to jQuery, but getting the hang of it slowly.

http://dev.swiftsure.org/

Cheers,

whiteatom