HTML5 CSS JavaScript

2020.12.05

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クラスが指定されている時のスタイルを忘れずに記述しましょう。
忘れたらクラスが追加・削除されるだけで動きません。

まとめ

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

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

0

関連記事

  • 2021.04.28

    【HTML5】HTML5からのsmallタグの使い方

    HTML5

  • 2021.04.27

    【HTM5】aタグの基本的な使い方

    HTML5

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

おすすめ記事

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!