クリックボタンとサイドメニューが隠されています

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