横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

最近のサイト制作において、特にスマホサイトからのアクセス数を意識している方からのオーダーとしてドロワーメニューを採用して欲しいというリクエストが多い。

方法は色々あるが、最近よく使っているのが『Drawer』
理由は簡単!設置とカスタマイズが簡単だからだ。あと動きもスマート♪

今後も使っていくと思うので設置方法をメモをしておきます。

1.必要なCSSとJSを設置

『Drawer』公式サイトから必要ファイルをダウンロードする方法と、CDNを使う方法がある。
以下の記述は、CDNを利用する場合の記述。JSはフッタに設置が良いかもね。

『Drawer』CDN

2.メニューを設置

3.Javascriptを書く

オプションもある。『Drawer』公式サイトでチェック。

4.その他

・メニューを左に設置するときは

<body class=”drawer drawer–left”>

・メニューを右に設置するときは

<body class=”drawer drawer–right”>

・開閉ボタンはどこでも設置可

<button type=”button” class=”drawer-toggle”>Drawer toggle</button>

・PCとスマホについて

PCとスマホではサイズやメニューの開く幅を変えると良いだろう。
ともかくCSSをグリグリ書くことでどうにでもなる。