jQuery下拉菜单 [英] Jquery Slide Down Menu

问题描述

有人知道是否有一个JQuery插件将创建一个类似于此处的菜单的向下滑动"菜单: http://www.bu.edu/

Does anyone know if there is a JQuery plugin that will create a "slide down" menu similar to the one featured here : http://www.bu.edu/

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

Not sure if I am using the right term for this type of menu and I've been searching Google and StackOverflow for some time now with no success....

提前谢谢！

推荐答案

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

Have you tried an approach without using js or jQuery?

我的意思是，您可以使用带有CSS3过渡的HTML5来做到这一点.

I mean, you can do it just using HTML5 with CSS3 transitions.

它看起来像这样:

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示例

编辑

为适应您的问题，我在上面的代码中做了一些更改，并添加了一些jQuery. 像这样:

To fit your question, I made some change in the code above and add a little jQuery. Like this:

$(document).ready(function() {
  $("#subMenu").hide(); 
});

$("#menu").hover(
  function() {
    $("#subMenu").show('fast');        
  },
  function() {
    $("#subMenu").hide('fast'); 
  }
);

您可以在此 JsFiddle示例中查看结果

这篇关于jQuery下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！