jQueryプラグインの「Sidr」を使用。

http://www.berriart.com/sidr/

まずは上記URLからプラグインをダウンロード。

展開して出てきたCSS及びJSをヘッダー内で読み込む。

■CSS
※「Dark」、「light」のいずれかを読み込めばよい

<!-- ダークカラーベース -->
<link rel="stylesheet" type="text/css" href="jquery.sidr.dark.css" />
<!-- ライトカラーベース -->
<link rel="stylesheet" type="text/css" href="jquery.sidr.light.css" />

■Javascript
※ヘッダー内かボディタグ終了直前で読み込む

<script type="text/javascript" src="jquery.sidr.min.js"></script>

■マークアップ

<div id="sidr">
  <h3>メニューヘッダー</h3>
  <ul>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li class="active"><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
  </ul>
</div>

あとはメニューを開閉するためのトリガーを任意の要素に結び付けてあげればOK。

以下トリガーの設定例。

<button type="button" id="sidr-trigger">Menu</button>

例えば上記のようなIDを持つボタンをトリガーに設定したい場合は下記のような感じ。

<script>
$(function(){
	$('#sidr-trigger').sidr();
})
</script>

これでボタンに対してトリガーが割り当てられる。めっちゃ簡単。
加えてsidr()関数にオプションを渡すことでメニューの開閉速度などを好みに設定することが可能。

$('#sidr-trigger').sidr({
	// 開閉スピード
	speed:500,
	// メニューの位置（left or right）
	side:'right'
	// jQueryのセレクターを指定可能
	source:'#selector'
});

sourceに関数を渡すとコールバックとして実行してくれたりもする。
その他のパラメーターは公式サイトを参照されたし。