Jquery 下拉菜单

Question

有谁知道是否有一个 JQuery 插件可以创建一个类似于此处所示的“向下滑动”菜单:http://www.bu.edu/

不确定我是否为这种类型的菜单使用了正确的术语，并且我已经在 Google 和 StackOverflow 上搜索了一段时间，但没有成功......

提前致谢!

Answer 1

您是否尝试过不使用 js 或 jQuery 的方法？

我的意思是，您只需使用 HTML5 和 CSS3 过渡即可做到这一点。

它看起来像这样:

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 中看到结果