Results 1 to 3 of 3

Thread: jQuery Drop Line Menu - Keeping menu open

  1. #1
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jQuery Drop Line Menu - Keeping menu open

    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

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

    Default

    First change:
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    To:
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    Then where you see:
    Code:
    function(e){
    					var $targetul=$(this).children("ul:eq(0)")
    					$targetul.slideUp(droplinemenu.animateduration.out)
    				}
    Change that to:
    Code:
    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):
    Code:
    				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:
    Code:
    				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]
    Jeremy | jfein.net

  3. #3
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

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
  •