javascript - 单击按钮和侧边菜单从隐藏中滑出

Question

我想制作一个类似于 m.facebook.com 的导航菜单。但是，我想让它从网站的左侧滑出动画。

流::单击一个按钮 >(菜单默认隐藏)菜单滑出，将主容器向右推一点以适合菜单 > 再次单击 > 菜单滑入并再次隐藏。

我不知道用 javascript 或 jquery 或 ajax 来制作它，因为我是网络开发的新手，而且效果脚本语言太多了。我可以知道实现这一点，这在平滑度上是完美的吗？

Answer 1

类似的东西... 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);           
    }
});​