1

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

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

提前致谢！

4

4 回答 4

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;

}

看看这个JsFiddle 例子

编辑

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

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

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

您可以在这个JsFiddle 示例中看到结果

于 2013-04-26T20:25:06.393 回答
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);
});
于 2013-04-26T18:48:33.110 回答
0

你为什么不自己做菜单？尝试使用列表<ul>并制作具有以下效果的jQuery .mouseover()div.show()blindjQuery UI

于 2013-04-26T18:47:07.003 回答
0

看看这个： 下拉菜单

$('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

于 2013-04-26T19:49:54.387 回答