Jquery 向下滑动菜单 [英] Jquery Slide Down Menu

问题描述

有谁知道是否有一个 JQuery 插件可以创建一个类似于这里的下滑"菜单:http://www.bu.edu/

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

提前致谢！

解决方案

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

我的意思是，您只需使用带有 CSS3 过渡的 HTML5 即可.

它看起来像这样:

HTML:

<ul><a href="#"><li>菜单 1</li></a><a href="#"><li>菜单 2</li></a><a href="#"><li>菜单 3</li></a><a href="#"><li>菜单 4</li></a><a href="#"><li>菜单 5</li></a><a href="#"><li>菜单 6</li></a>

CSS

a {字体系列:verdana；颜色:#fff;字体大小:11px；}一个:悬停{颜色:#cff；}#菜单 {背景:#666；高度:30px；宽度:377px；过渡:高度0.5s；-webkit-transition:height 0.5s;}#菜单:悬停{高度:200px；}ul{填充:0；边距:0；padding-right: 10px;位置:绝对；}乌利{向左飘浮;显示:块；填充:10px；边距:0；背景:#333；右边框:1px 实心 #666}#开始{宽度:377px；高度:200px；背景:#900；}

查看这个 JsFiddle 示例

<小时>

编辑

为了满足您的问题，我对上面的代码进行了一些更改并添加了一些 jQuery.像这样:

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

您可以在这个 JsFiddle 示例

中看到结果

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/

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....

Thanks in advance!

解决方案

Have you tried an approach without using js or jQuery?

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

It will look like this:

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;

}

check out this JsFiddle example

---

EDIT

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'); 
  }
);

You can see the results in this JsFiddle example

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