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.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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