單擊按鈕，側面菜單從隱藏的位置滑出

Question

我想做一個類似m.facebook.com的導航菜單。 但這，我想使它很好地從網站左側滑出動畫。

Flow ::單擊按鈕>（默認情況下菜單是隱藏的）菜單滑出，向右推動主容器以適合菜單>再次單擊>菜單滑入並再次隱藏。

當我不熟悉Web開發時，我不知道要用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);           
    }
});​