單擊按鈕和側面菜單從隱藏中滑出

Question

我想製作類似m.facebook.com所做的導航菜單。但是這個，我想讓它很好地從網站的左側滑出。

流量:: 單擊按鈕>（菜單默認爲隱藏）菜單滑出，將主容器向右推一點以適應菜單>再次單擊>菜單再次滑入並再次隱藏。

我不知道如何使用javascript或jquery或ajax，而我是新的Web開發和有太多的影響腳本語言。我可以知道實現這一點，這是完美的光滑？

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);   
    } 
});​