Drawer Slide Menu | jQuery plugin for responsive menu

Facebookなどスマホページでメニューアイコンをクリックすると、横からメニューがにゅるっと出てくるのがあります。これをドロワー(ナビゲーションドロワー)というそうです。

drawerというのは、英語で引き出しという意味。意味をきくと納得ですね〜。

そのドロワーを簡単に実装できるのがこのjQueryプラグイン「Drawer Slide Menu」です。設置の仕方も簡単です。

サンプルを作りましたので、ご覧いただけるとわかりやすいと思います。スマホからもPCからも動作が確認できます。

⇒ スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル

使い方も簡単。すぐに使えて動作も快適です。jQueryプラグイン「Drawer Slide Menu」の使い方は続きをご覧下さい。

【使用方法】
まずはこちらのサイトから一式ダウンロードしてきます。

HTMLのヘッダー部分に次のように記述します。

続いて<Body>部分に、次のように記述すれば完成です。

また、オプションでは以下のようなことを指定することができます。

  • menu_width: モバイルメニューの幅を指定。
  • menu_id: Menu IDです。 デフォルトでは ‘mobile-nav’。
  • button_content: 開閉ボタンのコンテンツを指定。デフォルトでは‘MENU’。
  • prepend_button_to: 開閉ボタンを表示する要素を指定。
  • ちなみに次のように指定します。このように書けば開閉ボタンに画像も設定できるようです。

    サクっとナビゲーションドロワーが実装できるので、とても便利かと思います。

    最後にサンプルのソースを書いておきます。どうぞご参考まで。

    この記事と関連してると思われる記事: