0

My goal is to animate a JQuery menu to respond when hovered or clicked. Using the HoverIntent plugin the following code is working as intended to hover. But how do I add a click event while maintaining a user friendly menu? While planning how to write this I have considered adding a delay to the hover event when a menu item is clicked, however I am unsure how practical that implementation would be. How would I add the click event to the following code?

<script type="text/javascript">
$(document).ready(function() {

function show() {
 var menu = $(this);
 menu.children(".options").slideDown();
}

function hide() { 
 var menu = $(this);
 menu.children(".options").slideUp();
}

$(".menuHeader").hoverIntent({
 sensitivity: 3, 
 interval: 50,   
 over: show,     
 timeout: 300,  
 out: hide       
  });

});


<div id="SideMenu">
  <div id="aMenu" class="menuHeader">
   <h2>Menu A</h2>
    <ul class="options" >
      <li><a href="">Option a1</a></li>
      <li><a href="">Option a2</a></li>
      <li><a href="">Option a3</a></li>
    </ul>
  </div>
  <div id="bMenu" class="menuHeader">
   <h2>Menu B</h2>
    <ul class="options" >
      <li><a href="">Option b1</a></li>
      <li><a href="">Option b2</a></li>
      <li><a href="">Option b3</a></li>
    </ul>
  </div>
  <div id="cMenu" class="menuHeader">
    <h2>Menu C</h2>
     <ul class="options" >
      <li><a href="">Option c1</a></li>
      <li><a href="">Option c2</a></li>
      <li><a href="">Option c3</a></li>
     </ul> 
  </div>
</div>

Sorry about the formatting of the code, and thank you for your help.

enigmaspade
  • 27
  • 9
  • What is it you want to be clickable? If it's the same menuHeader then do you want it to be clickable to override the timeout? (So the user doesn't have to wait when they hover over things?) – Jasoon May 20 '11 at 17:53
  • I don't know if you're thinking of adding click handling because of mobile devices, but on my websites a hover event allows mobile users to touch the menu and have it appear - no click event needed in the code. Just a thought, not sure why you want the click event as well. –  May 20 '11 at 18:08
  • The problem was handed to me in an effort to further my grasp of JQuery, I don't see the result ever being used. Personally if tasked to create a user friendly menu I would have a hover event change the text color of links but not expand the menu unless clicked. Seems like a more user-friendly approach. Nevertheless I am trying to figure out how to make this work with the following intent: Menu expands when user hovers with currently a half second delay, I need to change the code to expand also on click. But without some sort of pause on the hover effect I agree with you both, seems pointless. – enigmaspade May 20 '11 at 18:29

1 Answers1

1

I never used hoverIntent, there's anyway to unbind it?

If there's you can do something like this:

$(",menuHeader").bind("click.show_menu", function() {
  show();
  //unbind over from hoverIntent
})

function hide() { 
  var menu = $(this);
  menu.children(".options").slideUp(function() {
    //rebind over from hoverIntent on callback from slideUp
  });
}

So you clicked a link, it will stack until you mouseout, and then when you hover it again or click on it it will stack again.

Edit: You also need to unbind click on over function from the hoverIntent or it will cause a weird effect when you click the link.

Bernardo Mendes
  • 1,220
  • 9
  • 15
  • I will look into that and post my findings. Thank you for the suggestion. – enigmaspade May 20 '11 at 18:20
  • I did find a way to unbind the mouseover and mouseout for hoverIntent. What you posted above I believe is the best approach to this odd problem. Thank you! – enigmaspade May 20 '11 at 18:42
  • Here's how to unbind the hoverIntent: http://stackoverflow.com/questions/8151278/jquery-unbind-or-rebind-hoverintent – Yisela Aug 21 '12 at 02:55