【初心者必見】ハンバーガーメニューをHTMLとCSSで作る方法を解説！

公開日: 2021.10.25
更新日: 2024.09.30
スマホ用ハンバーガーメニューはコピペで実装できる

レスポンシブデザインを考えている時に、

「アイコンをクリックしたらメニューが表示される、スマホでよくある実装をしたい」

「ハンバーガーメニューを使いたいけど、一から作るのは面倒…」

と思ったことはありませんか？

そこで今回は、ハンバーガーメニューの実装方法について解説します！

この記事を読んでわかる内容は以下の通りです。

  • ハンバーガーメニューの基礎
  • ハンバーガーメニューをHTMLとCSSだけで作る方法
  • ハンバーガーメニューのアイコン、メニュー表示の様々なアニメーション

当たり前のようにスマホで調べものをする現代は、Webサイトのレスポンシブ化は必須。

スマホでメニューを見やすくできる「ハンバーガーメニュー」の実装方法をマスターしておくと、レスポンシブデザインのWebサイトが簡単に作れるようになりますよ！

そもそもハンバーガーメニューってなに？

ハンバーガーメニューの実装方法を学ぶ前に、まず、「ハンバーガーメニューとは何か？」について確認しておきましょう。

ハンバーガーメニューとは、3本線のアイコンをクリックすると、Webページのメニュー画面が表示されるメニューのこと。

3本線のアイコンがハンバーガーに見えるため、ハンバーガーメニューと名付けられたそうです。

スマートフォンで使用されていることが多く、主に画面右上や左上に設置されています。

「ホーム」「ブログ」「お問合せ」などのページへのリンクが、テキストで表示されているメニューが一般的です。

ハンバーガーメニューとテキストのメニューはどのようなメリットデメリットがあるのかも、把握しておきましょう。

メリットデメリット
ハンバーガーメニュー・省スペース
・配置が自由		メニューを表示させるまでワンクッションある
テキストメニュー・メニューを常に確認できる
・ワンクリックで他ページに飛べる		スペースが必要

スマートフォンは画面が小さいため、あまりスペースを必要としないハンバーガーメニューが重宝するという訳です。

パソコン画面ではテキストのメニュー、スマートフォン画面に切り替わる時はハンバーガーメニューに替わるという実装が多くのWebサイトで使用されています。

【コピペOK】HTMLとCSSで作れる！基本的なハンバーガーメニューの作り方

ハンバーガーメニューは、HTMLとCSS、jQueryで作るのが一般的ですが、HTMLとCSSのみで実装する方法もあります。

しかし一から作るとなると大変なので、基本的な箇所はコピペして、デザインなどを自分なりにアレンジするのが最もおすすめの方法です。

では、実際にどのように実装するのか見ていきましょう！

<!-- HTMLコード -->
  <body>
    <header class="header">
      <!-- ヘッダーロゴ -->
      <div class="logo">ハンバーガーメニュー</div>
    
      <!-- ハンバーガーメニュー部分 -->
      <div class="nav">
    
        <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
        <input id="drawer_input" class="drawer_hidden" type="checkbox">
    
        <!-- ハンバーガーアイコン -->
        <label for="drawer_input" class="drawer_open"><span></span></label>
    
        <!-- メニュー -->
        <nav class="nav_content">
          <ul class="nav_list">
            <li class="nav_item"><a href="">メニュー1</a></li>
            <li class="nav_item"><a href="">メニュー2</a></li>
            <li class="nav_item"><a href="">メニュー3</a></li>
          </ul>
        </nav>
   
      </div>
    </header>
  </body>
/* CSSコード */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #fff;
}

.logo {
  font-size: 24px;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}

上記は、3本線のアイコンをクリックするとメニューと、「×」のアイコンが表示され、「×」アイコンをクリックするとメニューが閉じ、3本線のアイコンに戻る基本的なハンバーガーメニューです。

ブラウザ上では、以下のように表示されます。

▼メニュー表示前▼

3本線のアイコンが見えている様子

▼メニュー表示後▼

3本線のアイコンをクリックしてメニューが見えている様子

【コピペOK】ハンバーガーメニューの様々なアニメーション

ハンバーガーメニューは、様々なアニメーションを設定することが可能です。

3本線のアイコンをクリックしたらアイコンが替わるなど、閉じるボタンのアニメーションや、クリックしたらメニューが右から左に表示される、などのメニュー表示のアニメーションもカスタマイズすることもできます。

アニメーションも一から作るのは大変なので、コピペして使用するのがおすすめですよ。

では、メニュー表示とアイコンのアニメーションの実装方法をそれぞれ紹介していきます。

メニューの表示のアニメーション

3本線のアイコンをクリックしたら、メニューが以下の方向から表示される実装方法を紹介します。

  1. 上から
  2. 右から
  3. 左から

どの方向からでもメニューを表示させられるようになると、Webサイト全体のデザインに合わせてハンバーガーメニューを実装できるようになります。

以下のHTMLコードを使用し、CSSでそれぞれのアニメーションを実装します。

 <!-- HTMLコード -->
  <body>
    <header class="header">
      <!-- ヘッダーロゴ -->
      <div class="logo">LOGO</div>
    
      <!-- ハンバーガーメニュー部分 -->
      <div class="nav">
    
        <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
        <input id="drawer_input" class="drawer_hidden" type="checkbox">
    
        <!-- ハンバーガーアイコン -->
        <label for="drawer_input" class="drawer_open"><span></span></label>
    
        <!-- メニュー -->
        <nav class="nav_content">
          <ul class="nav_list">
            <li class="nav_item"><a href="">TOP</a></li>
            <li class="nav_item"><a href="">ABOUT</a></li>
            <li class="nav_item"><a href="">SERVICE</a></li>
          </ul>
        </nav>
    
      </div>
    </header>
  </body>

クリックしたら、上からメニューが表示されるハンバーガーメニュー

/* CSSコード */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  position: relative;
}

.logo {
  font-size: 24px;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgb(110, 110, 110);
  transition: .5s;
  text-align: center;
  padding-top: 20px;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

.nav_item a {
  color: #fff;
  text-decoration: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  bottom: 0;/* メニューを画面に入れる */
  
}

クリックしたら、右からメニューが表示されるハンバーガーメニュー

上記のCSSコードと異なる部分のみ記述します。

/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgb(110, 110, 110);
  transition: .5s;
  text-align: center;
  padding-top: 20px;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;
}

クリックしたら、左からメニューが表示されるハンバーガーメニュー

最初のCSSコードと異なる部分のみ記述します。

/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  right: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgb(110, 110, 110);
  transition: .5s;
  text-align: center;
  padding-top: 20px;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  right: 0;
}

ハンバーガーメニューアイコン、閉じるボタンのアニメーション

メニュー表示後に3本線のアイコンが消え、換わりに「×」アイコンが表示される時のアニメーションを紹介します。

そのままアイコンが切り替わるだけでは、味気ないので、アイコンが替わる瞬間にアニメーションを付けるのがおすすめです。

以下のHTMLコードを使用し、CSSで「3本線が重なるようにして×に替わるアニメーション」を実装します。

<!-- HTMLコード -->
  <body>
    <header class="header">

      <!-- ハンバーガーメニュー部分 -->
      <div class="nav">
        
        <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
        <input id="drawer_input" class="drawer_hidden" type="checkbox">

        <!-- ハンバーガーアイコン -->
        <label for="drawer_input" class="drawer_open"><span></span></label>
    
      </div>
    </header>

  </body>
/* CSSコード */
.header {
  padding: 0 20px;
  position: relative;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  position: absolute;
  right: 30px;
  top: 20px;
  z-index: 100;
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}

工夫次第でデザイン＆アニメーションは無限！欲しい箇所をコピペしておしゃれなハンバーガーメニューを作ろう

今回は、ハンバーガーメニューのコピペできる実装方法やアニメーションを紹介しました。

以下はこの記事のまとめです。

  • ハンバーガーメニューはスマートフォンのメニュー表示におすすめ
  • 一から作らなくても、コピペでハンバーガーメニューを実装できる
  • メニュー表示方向、アイコンのアニメーションは様々

ハンバーガーメニューは、テキストのみのメニューに比べてデザインやアニメーションの自由度が高いので、アレンジ次第で様々なメニューを作ること可能です。

スマホなどのレスポンシブデザイン用だけではなく、ページ数が多い場合などにも利用することができます。

ハンバーガーメニューを使いこなして、素敵なWebサイトを制作してくださいね。

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

＼プログラミングを学んで／
人生を変えた3名

インタビュー記事一覧 ＞

関連記事

  • HTMLのページング実装方法とは?ページングの必要性についても解説

    HTMLのページング実装方法とは？ページングの必要性についても解説

    公開日: 2021.09.15
    更新日: 2024.01.06
  • 香川県のオススメのプログラミングスクール5選

    【初心者向け】香川県のプログラミングスクール５選

    公開日: 2018.10.29
    更新日: 2024.01.29
  • HTMLタグの使い方を徹底解説

    【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き

    公開日: 2019.09.07
    更新日: 2024.01.04
  • Railsのdeviseを用いてログイン認証を実装する方法を解説

    【Rails入門説明書】enumについて解説

    公開日: 2018.09.27
    更新日: 2024.01.17

    • 新着記事

    資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2024 WEBCAMP MEDIA Powered by AFFINGER5