【drawer.jsの使い方】レスポンシブメニューの実装方法を解説
drawer.jsの使い方を解説
Webサイトを構築する上で必須のメニュー部分ですが、簡単にレスポンシブ対応する方法がないか調べてみたところ、drawer.jsというjQueryのプラグインがあったので、実装してみました。
公式のサイトを見ると詳しい使い方が載っていますが、今回の記事で簡単にまとめておきます。
実装の手順は下記、3Stepで簡単です。
- CDNを読み込む
- 指定のclass名でマークアップ
- scriptで呼び出す
CDNを読み込む
上記コードをコピペしてもらえればOKです。
指定のclass名でマークアップ
body部分のコードが上記です。class名はそのまま使ってください。
scriptで呼び出す
最後にscriptで呼び出して実装完了です。
実装結果と全体ソース
結果は上の通りです。全体ソースも載せておきました。
今回のコードはナビバーを上部に固定、メニューは右寄せです。
公式にカスタマイズ方法が書いてあるので、メニューを左に寄せたいなどは公式を参照してみてください。
関連記事【初心者のJavaScript】wow.jsでアニメーションをつける方法【jQueryプラグイン】