单击按钮，侧边菜单从隐藏状态滑出

Click button and Side Menu slide out from hidden

本文关键字：隐藏 状态 菜单 按钮 单击      更新时间：2023-09-26

我想制作一个类似于m.facebook.com的导航菜单。但是这个，我想让它很好的动画幻灯片从网站的左侧。

流量：单击按钮>（菜单默认隐藏）菜单滑出，将主容器向右推一点以适应菜单>再次单击>菜单滑入并再次隐藏。

我对javascript、jquery或ajax一无所知，因为我刚开始从事网络开发，而且有太多的脚本语言。我可以知道如何做到这一点吗？

沿着这些线。。。http://jsfiddle.net/HfdXY/

HTML:

<div id="menu">Menu</div>
<button id="openMenu">Toggle menu</button>​

CSS：

#menu {
    height: 300px;
    width: 0px;
    border: 1px solid black;
    display: none;
}​

JS:

$("#openMenu").click(function() {
    var menu = $("#menu");
    if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
    } else {
        $(menu).show().animate({width: 100}, 1000);           
    }
});​
相关文章：