はじめに
スマートフォン対応のWebサイトでよく見かける「ハンバーガーメニュー」。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
今回は、そのメニューをクリックしたときに開いたり閉じたりするためのJavaScriptの基本的な実装を紹介します。
書こうと思ったきっかけ
ハンバーガーメニューの見た目をCSSで整えたあと、「実際にクリックして開閉できるようにするにはどうすればいいか？」と悩んだことがきっかけです。
シンプルなコードながら、しっかり動かすにはJavaScriptの仕組みが必要なので、備忘録としてまとめました。
内容の説明（スクリプトの解説）
以下は、HTML内に直接書いたシンプルなスクリプトです。
<!-- メニュー開閉スクリプト -->
<script>
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('open');
navMenu.classList.toggle('active');
});
</script>
解説
-
getElementById('hamburger')：ハンバーガーアイコンの要素を取得 -
getElementById('nav-menu')：ナビゲーションメニュー全体の要素を取得 -
addEventListener('click', ...)：クリックされたときに関数を実行 -
classList.toggle('open')：クリックのたびに open クラスを付けたり外したりする -
classList.toggle('active')：メニューの表示・非表示を切り替える
この仕組みによって、CSS側で .open や .active にスタイルを定義しておけば、クリックに応じてメニューが表示されたり、アイコンが変形したりするようになります。
まとめ
このようなシンプルなJavaScriptの実装でも、ハンバーガーメニューの開閉を実現することができます。
クリック時に class を切り替えるだけという基本的な仕組みですが、CSSと連携させることで非常に効果的なUIが作れます。
今後は、外部クリックで閉じる処理やARIA属性の対応など、アクセシビリティにも配慮した拡張にもチャレンジしていきたいと思います！！