モバイルファーストのデザインが主流となる中で、ハンバーガーメニューは必須の要素の一つです。この記事では、シンプルでスムーズなハンバーガーメニューの実装方法をステップバイステップで解説します。
HTMLの構造を準備する
まず、HTMLでメニューボタンと、表示・非表示を切り替えるナビゲーションの部分を作成します。
<!-- ハンバーガーメニューボタン -->
<button id="menu-button">☰</button>
<!-- モバイル用のナビゲーションメニュー(初期状態では非表示) -->
<nav id="mobile-menu" class="hidden">
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">アバウト</a></li>
<li><a href="#contact">コンタクト</a></li>
</ul>
</nav>
CSSでスタイリングとアニメーションを設定
次に、CSSを使用して、ナビゲーションが最初は非表示になり、ボタンがクリックされたときにスムーズにスライドして表示されるようにします。
/* メニューが非表示の時のスタイル */
.hidden {
max-height: 0; /* メニューの高さを0にして非表示にする */
}
/* ハンバーガーメニューボタンのスタイル */
#menu-button {
font-size: 24px;
cursor: pointer; /* クリック可能なカーソルを表示 */
}
/* モバイル用のナビゲーションメニューのスタイル */
#mobile-menu {
max-height: 200px; /* メニューが開いた時の最大の高さ */
overflow: hidden; /* 高さ外のコンテンツを隠す */
transition: max-height 0.3s ease; /* 高さの変化を滑らかにする */
}
max-heightの値は、メニューが開いたときの内容に合わせて調整が必要です。
JavaScriptでメニューの開閉を制御
最後に、JavaScriptを使って、メニューボタンがクリックされたときに、ナビゲーションの表示・非表示を切り替える処理を記述します。
// HTMLが完全に読み込まれた後に実行
document.addEventListener("DOMContentLoaded", function() {
// メニューボタンの要素を取得
const button = document.getElementById("menu-button");
// ナビゲーションメニューの要素を取得
const menu = document.getElementById("mobile-menu");
// メニューボタンがクリックされたときのイベントリスナーを設定
button.addEventListener("click", function() {
// 'hidden'クラスをトグルで切り替えて、メニューの表示・非表示を制御
menu.classList.toggle("hidden");
});
});
まとめ
これで、シンプルでスムーズに動作するハンバーガーメニューの実装が完了です。この実装は基本的なものなので、デザインや動作をさらにカスタマイズして、自分のサイトに合った素敵なハンバーガーメニューを実現しましょう!