有谁知道是否有一个 JQuery 插件可以创建类似于此处所介绍的“向下滑动”菜单：http://www.bu.edu/
不确定我是否对这种类型的菜单使用了正确的术语，并且我已经在 Google 和 StackOverflow 上搜索了一段时间，但没有成功....
提前致谢！
【问题讨论】：
你有没有尝试过不使用 js 或 jQuery 的方法？
我的意思是，你可以只使用带有 CSS3 过渡的 HTML5。
看起来像这样：
HTML：
<div id="menu">
<ul>
<a href="#"><li>Menu 1</li></a>
<a href="#"><li>Menu 2</li></a>
<a href="#"><li>Menu 3</li></a>
<a href="#"><li>Menu 4</li></a>
<a href="#"><li>Menu 5</li></a>
<a href="#"><li>Menu 6</li></a>
</ul>
CSS
a {
font-family: verdana;
color: #fff;
font-size: 11px;
}
a:hover {
color: #cff;
}
#menu {
background: #666;
height: 30px;
width: 377px;
transition:height 0.5s;
-webkit-transition:height 0.5s;
}
#menu:hover {
height: 200px;
}
ul {
padding: 0; margin: 0;
padding-right: 10px;
position: absolute;
}
ul li {
float: left;
display:block;
padding: 10px;
margin: 0;
background: #333;
border-right: 1px solid #666
}
#outset {
width: 377px; height: 200px;
background: #900;
}
看看这个JsFiddle example
编辑
为了满足您的问题，我对上面的代码进行了一些更改并添加了一些 jQuery。 像这样：
$(document).ready(function() {
$("#subMenu").hide();
});
$("#menu").hover(
function() {
$("#subMenu").show('fast');
},
function() {
$("#subMenu").hide('fast');
}
);
你可以在这个JsFiddle example看到结果
【讨论】：
.animate()（如果使用 jQuery :D）
如果没有插件，那将很容易构建。创建一个子菜单 div 并在 CSS 中设置 display:none。
然后创建一个悬停侦听器来“向下滑动”子菜单。
在悬停事件的mouseout部分，不是简单的关闭子菜单，而是将子菜单的关闭包裹在一个200ms的setTimeout中，然后在子菜单中添加一个mouseover事件来取消setTimeout：（否则子菜单会离开菜单后立即关闭）
var menuTimer;
$("#menu").hover(function() {
//Slide down the submenu
$("#sub_menu").slideDown();
}, function() {
//Create a 200ms timer, after which it will close the sub_menu
menuTimer = setTimeout(function() {
$("#sub_menu").slideUp();
},200);
});
$("#sub_menu").mouseenter(function() {
//The user entered the submenu, so cancel the timer (don't close the submenu)
clearTimeout(menuTimer);
});
【讨论】：
您为什么不自己制作菜单？
尝试使用列表 <ul> 和 jQuery .mouseover() 来制作具有 blind 效果的 .show() 的 div jQuery UI
【讨论】：
看看这个： Dropdown menu
$('li').mouseover(function() {
var this_menu = $(this).attr('class');
if($('.menu_div').is(':visible')) {
$('.menu_div').hide('blind', 'fast');
}
$('#' + this_menu).show('blind', 'fast');
});
$('.menu_div').mouseout(function() {
var this_menu = $(this).attr('class');
$('.menu_div').hide('blind', 'fast');
});
它是用 jQuery 和 jQuery-UI 制作的
因此，如果您使用它，请添加您的文档 <head> jQuery 库并在 jQuery-UI 之后导致 jQuery-UI 需要 jQuery 才能工作
【讨论】：