有没有人知道是否有一个JQuery插件会创建一个类似于此处所示的“向下滑动”菜单:http://www.bu.edu/
我不确定我是否使用这种菜单的正确术语,我一直在搜索Google和StackOverflow一段时间没有成功....
提前致谢!
答案 0 :(得分:3)
您是否尝试过不使用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;
}
修改强>
为了适合您的问题,我在上面的代码中进行了一些更改并添加了一些jQuery。 像这样:
$(document).ready(function() {
$("#subMenu").hide();
});
$("#menu").hover(
function() {
$("#subMenu").show('fast');
},
function() {
$("#subMenu").hide('fast');
}
);
您可以在此JsFiddle example
中查看结果答案 1 :(得分:2)
如果没有插件,这将很容易构建。创建一个子菜单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);
});
答案 2 :(得分:0)
你为什么不自己做菜单?
尝试使用列表<ul>
和jQuery
.mouseover()
来制作.show()
blind
效果jQuery UI
答案 3 :(得分:0)
看看这个: 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
需要{{1}}才能使用