はじめに
概要
Webサイトには欠かせないハンバーガーメニューを実装します。サンプルコードもありますので、コードを見ながら理解を深めていただければ幸いです。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
読者ハンバーガーメニューを実装します。は、最初にどこを理解するとよいですか？
木村対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装動画
実装動画では、ハンバーガーメニューを実装します。【サンプルコード付き】を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
Webサイトでよく見かけるハンバーガーメニューをクリックした際に、×になる動きを実装していきます。実装動画で押さえたいポイント
実装動画は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
実装動画の確認方法
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
サンプルコード
サンプルコードでは、ハンバーガーメニューを実装します。【サンプルコード付き】を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
サンプルコードはこちらからダウンロードしてください。HTML
<button class="mobile-menu__btn lg-none">
<span></span>
<span></span>
<span></span>
</button>
<!-- /.mobile-menu__btn -->Javascript
export class Onclick {
constructor() {
this.DOM = {};
this.DOM.btn = document.querySelector(".mobile-menu__btn");
this.DOM.container = document.querySelector("#global-container");
this._addEvent();
}
// ハンバーガーメニュー #1/2
_toggle() {
this.DOM.container.classList.toggle("menu-open");
}
// ハンバークメニュー #2/2
_addEvent() {
this.DOM.btn.addEventListener("click", this._toggle.bind(this));
}
}ポイント解説
ポイント解説では、ハンバーガーメニューを実装します。【サンプルコード付き】を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
すべてのコンテンツの親要素にクラスを付与する
この付与されたクラスを起点にCSSを調整すれば、様々なデザインを形成することができます。// global-containerにmenu-openが付与されたときの挙動
.menu-open {
& .mobile-menu {
&__btn {
span {
background-color: $cMenuOpen;
&:nth-child(1) {
transition-delay: 70ms;
transform: translateY(11px) rotate(135deg);
}
&:nth-child(2) {
transition-delay: 0s;
transform: translateX(-18px) scaleX(0);
}
&:nth-child(3) {
transition-delay: 140ms;
transform: translateY(-11px) rotate(-135deg);
}
}
}
}
}スクロール停止
ハンバーガーメニューが開いている場合は、スクロールを停止した場合があります。 bodyタグにoverflow: hidden;を付与することでスクロールを停止することができます。 それもJavascriptで対応が可能です。 Javascript_toggle() {
const body = document.body;
this.DOM.container.classList.toggle("menu-open");
if (this.DOM.container.classList.contains("menu-open")) {
// menu-open クラスがあるときにスクロールを無効化
body.style.overflow = "hidden";
} else {
// menu-open クラスがないときにスクロールを有効化
body.style.overflow = "auto";
}
}その他
その他ハンバーガーメニューを使う際には、いくつか注意が必要です。 -ページ内のリンクに移動した時、ユーザーが別のセクションに移動した後もメニューが開いたままにならないように、menu-open クラスを削除する必要があります。 -モバイルで画面の横幅が変わった時も同様に、menu-open クラスを削除してメニューが閉じた状態を保つことが大切です。これは、画面サイズを変更した際にメニューが意図せず閉じられるのを防ぐためです。 それらは以下のコードで解決できます。_addLinkEvent() {
// ページのbody要素を取得します。
const body = document.body;
// ページ内のすべてのaタグを選択します。
const links = document.querySelectorAll("a");
// 選択したすべてのリンクに対して、以下の処理を行います。
links.forEach((link) => {
// リンクがクリックされたときのイベントリスナーを追加します。
link.addEventListener("click", () => {
// もし"global-container"要素が"menu-open"クラスを持っている場合
if (this.DOM.container.classList.contains("menu-open")) {
// "menu-open"クラスを"global-container"要素から削除します。
this.DOM.container.classList.remove("menu-open");
// body要素のoverflowスタイルを"auto"に設定し、スクロールを可能にします。
body.style.overflow = "auto";
}
});
});
}
_removeMenuOpenClass() {
// ウィンドウのリサイズイベントにリスナーを追加します。
window.addEventListener("resize", function () {
// "global-container"というIDを持つ要素を取得します。
const el = document.getElementById("global-container");
// ページのbody要素を取得します。
const body = document.getElementsByTagName("body")[0];
// ウィンドウの内部幅を取得します。
const width = window.innerWidth;
// ウィンドウの幅が767pxより大きく、かつ"global-container"要素が"menu-open"クラスを持っている場合
if (width > 767 && el.classList.contains("menu-open")) {
// "menu-open"クラスを"global-container"要素から削除します。
el.classList.remove("menu-open");
// body要素のoverflowスタイルを"auto"に設定し、スクロールを可能にします。
body.style.overflow = "auto";
}
});
}まとめ
- ウェブサイトでハンバーガーメニューの実装は必須である
- トップの親要素にクラスを付与することで、デザインが形成しやすくなる
- クラスの付与にはJavascriptを使用
- toggleメソットを活用
MEMBER COMMENTS
コメント（0件）