Activate JQuery menu on Hover or Click
My goal is to animate a JQuery menu to respond when hovered or clicked. Using the HoverIntent plugin the fo开发者_StackOverflow社区llowing 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.
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.
精彩评论