簡単！Bootstrapで横からシュッとでるドロワーメニューを実装する方法

はじめに

Bootstrapには、navbarという名前の便利なコンポーネントがあります。
例えばこのようなナビゲーション。

これは、アコーディオンのようにメニューをトグルで開いたり閉じたり出来ますが、レスポンシブでコーディングする際に、PCとSPを考慮する場合、デザインが崩れたりコーディングが大変な場合が多いかと思います。

さらに、右側にトグルのボタンがある場合、左手でスマホを持った場合、届かなくて押しにくい、など、すごく使いやすいとは言えないUIだと個人的に思います。

そこで、スマホアプリでよく見る、横から画面の上にかぶさるように出てくるドロワーメニューがbootstrapでも出来ないかと思い、探しました。

それを簡単に実装する方法は、Drawerいうjqueryプラグインを併用すれば、理想的なドロワーメニューが出来ます。

プラグインの配布元はこちら。
http://git.blivesta.com/drawer/

基本セット

DrawerはCDNでも配布されているので、今回はCDNファイルをページに読み込ませます。
以下のCSSとJavascriptをページに読み込むようにセットしてください。

CSS

<link rel="stylesheet" href="/common/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">

javascript

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="/common/js/bootstrap.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

drawerのを実行させるには、以下の内容をページ内部に記載します。

<script>
$(document).ready(function() {
  $('.drawer').drawer();
});
</script>

左からメニューが出るパターンのサンプル

画面の左から、シュッと現れるサンプルです。
メニューのデザインを多少修正したので、追加でCSSを書いています。
サンプルファイルをご確認下さい。

⇒動作サンプルはこちら

ライトプラン　詳細はこちら

右からメニューが出るパターンのサンプル

画面の右から、シュッと現れるサンプルです。
メニューのデザインを多少修正したので、追加でCSSを書いています。
サンプルファイルをご確認下さい。

⇒動作サンプルはこちら

ライトプラン　詳細はこちら

上からメニューが出るパターンのサンプル

画面の上から、シュッと現れるサンプルです。
メニューのデザインを多少修正したので、追加でCSSを書いています。
サンプルファイルをご確認下さい。

⇒動作サンプルはこちら

ライトプラン　詳細はこちら

以上、是非ためしてみてください。