jQuery基礎講座：するっと動くドロワーメニューの作り方（ZIP付）

jQuery基礎講座[第１０回]

どーも＠PNRAです！
忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。

以前ハンバーガーナビゲーションに関する記事をいくつかあげましたが、そこの応用版のお話。最近スマートフォン向けのホームページで何かとよくみるドロワーメニューです。スマートフォンというブラウザサイズの制限を見事に克服したこのドロワーメニュー。ドロワー（引き出し）のように普段はしまっておいて、必要な時に出すというものです。

実装するにあたって、様々なjQueryプラグインもあるのですが、動きだけを考えるとそんなに複雑な仕組みではないため、自身で動作を定義してあげた方が表示速度やカスタマイズするにあたって便利だろうと思い、作ってみました。

基本的にはclick()メソッドを使ったCSSの切り替えだけなので、特に難しいことはなにもありません。

それでは、具体的にみていきましょう。

実装実例

左上をタブをクリックして動作を確認してみてください。