Jquery下滑菜单

时间:2013-04-26 18:40:54

标签: jquery menu slidedown

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

我不确定我是否使用这种菜单的正确术语,我一直在搜索Google和StackOverflow一段时间没有成功....

提前致谢!

4 个答案:

答案 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;

}

查看此JsFiddle example


修改

为了适合您的问题,我在上面的代码中进行了一些更改并添加了一些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}}才能使用