JavascriptとCSSでハンバーガーメニューを簡単に実装する

スマホでWebサイトを見ることが当たり前になった現在、スマホでのメニュー表示はハンバーガーメニューが主流ですね。

今回はハンバーガーメニューの実装方法についてご説明します。

ハンバーガーメニューとは

「ハンバーガーメニュー」を知らない方のためご説明させていただきます。

ハンバーガーメニューとは、「ボタンを押すことで開閉できるメニュー」のことです。

ちなみになぜハンバーガーメニューという名前かといいますと、メニューということを表している上画像のような横棒3つのアイコンがハンバーガーに見えるからという理由です。

それでは、実装方法を見てみましょう。

コピペで簡単にハンバーガーメニューを実装

以下Codepen内のコードをコピペで簡単に実装できます。

See the Pen
hamburger menu by spiqa design (@spiqa_design)
on CodePen.

各コードを見ていきましょう。

Javascript

ハンバーガーアイコンまたは黒背景がクリックされた時に、「#nav-wrapperが指定されている要素に.openクラスを追加する、.openクラスが追加されている時は削除する」という記述をしています。

黒背景とは、メニューを開いている時に後ろに表示される背景のことです。
黒背景を敷くことでメニューが見やすくなり、メニューを開閉する役割も担うことでユーザビリティが向上します。

HTML

nav-wrapperの中に以下3つを記述しています。

・hamburger→ハンバーガーアイコン
・sp-nav→上記アイコンを押したらスライド表示されるメニュー
・black-bg→メニュー表示中に表示する黒背景

CSS

上記HTMLと同じように、3つに分けて記述しています。

・hamburger
ハンバーガーアイコンの位置と形をスタイルで指定しています。
また、クリックされたらハンバーガーアイコンが「×」になるよう記述しています。

・sp-nav
ハンバーガーメニューをクリックするまではウィンドウ右側に隠しておき、クリックされたら右側からスライドしてくるよう記述しています。

・black-bg
ハンバーガーアイコンをクリックするまでは非表示にしておき、クリックされたらメニュー背景全体を覆うように記述しています。

各項目全て、.openクラスが指定されている時のスタイルを忘れずに記述しましょう。
忘れたらクラスが追加・削除されるだけで動きません。

まとめ

ハンバーガーメニューは難しいと思われがちですが、一度覚えてしまえば簡単です。

使いまわせるようにコードは最低限の記述にしていますので、コピペした後にサイトに合うようにスタイル調整してみてください。