Home
最近のサイト制作において、特にスマホサイトからのアクセス数を意識している方からのオーダーとしてドロワーメニューを採用して欲しいというリクエストが多い。
方法は色々あるが、最近よく使っているのが『Drawer』。
理由は簡単！設置とカスタマイズが簡単だからだ。あと動きもスマート♪
今後も使っていくと思うので設置方法をメモをしておきます。
１．必要なCSSとJSを設置
『Drawer』公式サイトから必要ファイルをダウンロードする方法と、CDNを使う方法がある。
以下の記述は、CDNを利用する場合の記述。JSはフッタに設置が良いかもね。
『Drawer』CDN
|
1 2 3 4 5 6 7 |
<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> |
２．メニューを設置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#">Brand</a></li> <li><a class="drawer-menu-item" href="#">Nav1</a></li> <li><a class="drawer-menu-item" href="#">Nav2</a></li> </ul> </nav> </header> <main role="main"> <!-- Page content --> </main> </body> |
3.Javascriptを書く
オプションもある。『Drawer』公式サイトでチェック。
|
1 2 3 |
$(document).ready(function() { $('.drawer').drawer(); }); |
４．その他
・メニューを左に設置するときは
<body class=”drawer drawer–left”>
・メニューを右に設置するときは
<body class=”drawer drawer–right”>
・開閉ボタンはどこでも設置可
<button type=”button” class=”drawer-toggle”>Drawer toggle</button>
・PCとスマホについて
PCとスマホではサイズやメニューの開く幅を変えると良いだろう。
ともかくCSSをグリグリ書くことでどうにでもなる。
Drawer – Flexible drawer menu using jQuery, iScroll and CSS.
http://git.blivesta.com/drawer/
http://git.blivesta.com/drawer/
