我有一个要在悬停时显示的巨型菜单,并保持打开状态,直到用户离开巨型菜单或触发区域为止。我可以让它在onClick上运行,但似乎无法使其悬停地工作。任何帮助将非常感激。
<div class="down">
<div id="showb">
<a href="#" id="menu-show" class="down"></a>
</div><!-- end show button -->
<div id="hideb">
<a href="#" id="menu-hide" class="up"></a>
</div><!--end hide button -->
<div id="menu" style="display: block;">
<div class="menu-main">Menu Contents</div>
<div class="menu-bottom"></div>
</div>
</div>
// hides the menu as soon as the DOM is ready
// (a little sooner than page load)
jQuery('#menu').hide();
jQuery('#hideb').hide();
// shows the menu on clicking the noted link
jQuery('a#menu-show').click(function() {
jQuery('#showb').hide();
jQuery('#hideb').show();
jQuery('#menu').slideDown();
return false;
});
// hides the menu on clicking the noted link
jQuery('a#menu-hide').click(function() {
jQuery('#showb').show();
jQuery('#hideb').hide();
jQuery('#menu').slideUp();
return false;
});
您也可以在这里看到它http://jsfiddle.net/notanothercliche/5CDEE/
<div id="menu">
<div id="show-menu">
</div>
</div>
<div id="mega-menu">
<div class="menu-main">Menu Contents</div>
<div class="menu-bottom"></div>
</div>
jQuery(document).ready(function() {
// open
jQuery('#show-menu').bind('mouseenter', function() {
// increase the height of our container
jQuery('#menu').height('300px');
// do the main animation
jQuery('#show-menu').stop().css({
'backgroundPosition': 'bottom'
}, 300);
jQuery('#mega-menu').slideDown(500);
});
// close
function closeMainNav() {
jQuery('#show-menu').stop().css({
'backgroundPosition': 'top'
}, 300);
jQuery('#mega-menu').slideUp(500);
jQuery('#menu').height('17px');
}
// close when the following happens
jQuery('#menu').bind('mouseleave', closeMainNav);
});
对于点击版本甚至更好,我使用了toggleClass和slideToggle。这种方式编码时间短得多。在此处查看演示http://jsfiddle.net/notanothercliche/5CDEE/
<a href="#" id="menu-show" class="down"></a>
<div id="menu">
<div class="menu-main">
Menu Contents
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<div class="clear"></div>
</ul>
More HTML content
</div>
<div class="menu-bottom"></div>
</div>
jQuery(document).ready(function() {
// hides the menu as soon as the DOM is ready
// (a little sooner than page load)
jQuery('#menu').hide();
// shows the menu on clicking the noted link
jQuery('a#menu-show').click(function() {
// toggles the indicator arrow
jQuery('a.down').toggleClass('up')
jQuery('#menu').slideToggle();
return false;
});
});
最佳答案
为什么不使用pure CSS menu代替呢?