2020年1月22日スマホ表示したときに、ハンバーガーメニューをクリックしたらニョキッと出てくるメニューのことです。レスポンシブ対応されているサイトを見ると、よく実装されているので、必ず覚えておきましょう。今回は、jQueryのプラグイン「Hiraku.js」を使いました。hiraku.cssを編集するにはとりあえずここを見るHiraku.js実装の流れHiraku.jsでドロワーメニューを実装するのはとても簡単。手順としては以下の通りです。Hiraku.jsのダウンロードファイルの読み込みHTMLのマークアップCSSで調整Hiraku.jsのダウンロードHiraku.jsのファイルを公式サイトからダウンロードします。hiraku.jshiraku.cssこの二つのファイルがあればオッケーです。ダウンロードしたフォルダから、作業フォルダに移動しておきましょう。ファイルの読み込み読み込みコードはhiraki.cssjQueryのCDNhiraki.jsをそれぞれ記述していきます。(jQueryは最新版でも動作確認しました。src=“js/hiraku.js"></script>→jQueryを先に読み込むことHTMLのマークアップマークアップする前に、ドロワーのデモを確認してみましょう。Hirakuの公式サイトには、デモが用意されていまして、そのデモのHTMLソースをそのままコピーするだけも実装できてしまいます。Hiraku公式サイトただ、デザインに応じて色々と変更しないといけないので、今回は、以下の条件で変更していきたいと思います。<ul><li>hogehoge</li></ul></div>公式サイトからコピーしたコードがこちらです。id=”offcanvas-btn-right”class=”offcanvas-right”このidとクラス名を変更することで、右寄せと左寄せを変更できます。right→右寄せleft→左寄せjavascriptも公式サイトからコピーします。direction:"left"});この部分も、leftとなっていれば左寄せになります。今回は右寄せにしたいのでrightに変更します。CSSで調整このままでも使えるのですが、ちょっとだけデザインを修正する必要があります。HTMLコードをそのままコピーして、デベロッパーツールでどんなスタイルが当てられているかを確認します。デベロッパーツールって本当便利です。hiraki.cssのスタイルを直接編集し、上書きしていきます。}PC画面のナビゲーションメニューは、タブレット表示にすると非表示になる設定にしてあります。.hiraku-open-btnにdisplay:none;を指定してないと、PC表示の時にもハンバーガーアイコンが表示されてしまいます。タブレット、スマホ時のみ表示するため、標準は非表示にしました。hiraku.cssを編集するにはとりあえずここを見るあとは、ドロワー内のスタイルを整えるだけ。.3);を上書きすれば、ドロワー表示時のバックが変更できます。大きさや位置を変えたい場合はここをいじる。100002;}ドロワーメニュー展開時、ハンバーガーアイコンから×アイコンに変わります。×アイコンの位置や大きさはこちらから変更します。-6px;}デベロッパーツールをみながら修正を重ねると完成!http://keibloglife.com/wp-content/uploads/2019/07/画面収録-2019-07-09-20.39.21.mp4ぬるっとドロワーが表示されて、かっこいいですね。結論は、デベロッパーツール最強です。ググりつつ、デベロッパーツールを駆使すれば、静的サイトであればどんどん作れそうですね。Drawer.jsというライブラリも簡単に実装できるようですので、今度試してみたいと思います。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。