はじめに
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を書いています。
サンプルファイルをご確認下さい。
以上、是非ためしてみてください。