CODEWITHSUNDEEP
jquery
firefusion
firefusion

Reputation: 1107

jQuery slide open and close menus. How to stop them going crazy?

I want sub menu's of a verticle menu to expand and collapse when moused over. This is what i've got so far but it goes crazy if you do it to quick as all the animations run at once and on a delay. How can i make sure just one menu expands at a time.

I've also set the current_page_item to be open but default and I don't want this to expand or collaspe.

<ul>
 <li class="current_page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a></li>
 <li class="page_item"><a href="#">Parent Item</a></li>
</ul>

jQuery('ul.children').hide();
jQuery('li.current_page_item ul.children').show();
jQuery('li.current_page_item').parent().show();

jQuery("li.page_item").hover(function() { 
  jQuery(this).find('ul.children').delay(300).slideDown('slow');
    }, function() {  
  jQuery(this).find('ul.children').delay(300).slideUp('slow');
});

Upvotes: 0

Views: 1269

Answers (2)

firefusion
firefusion

Reputation: 1107

Figured it out with hoverindent

// Accordion menus
var menudown = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: showSub, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: hideSub // function = onMouseOut callback (REQUIRED)
};

function showSub(){
    jQuery(this).addClass('down').removeClass('up').children("ul.children").slideDown(500);
}

function hideSub(){
    jQuery(this).addClass('up').removeClass('down').children("ul.children").slideUp(700);
}

jQuery('li').not('.current_page_item, .current_page_ancestor').has('ul').hoverIntent( menudown );

Upvotes: 0

Brian Mains
Brian Mains

Reputation: 50728

We used the JQuery hoverintent plugin to remedy this. It worked very well to remedy this exact issue.

http://cherne.net/brian/resources/jquery.hoverIntent.html

Sample from the web site:

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config );

HTH.

Upvotes: 2

Related Questions