【HTML,CSS,JavaScript】5分でハンバーガーメニューを導入する方法

ここでは、ハンバーガーメニューを導入する方法を解説します。

ハンバーガーメニューの導入は、既にWebサイトを準備していれば5分程度で終わるかと思います。

こういった方へ向けた記事です
①ハンバーガーメニューを追加する方法を知りたい
②ポートフォリオにハンバーガーメニューを導入したい
③ハンバーガーメニューの案件を獲得するために導入方法を知りたい
目次
1.ハンバーガーメニューとは
2.ハンバーガーメニュー導入方法
3.マテリアルアイコン使用方法

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

下記のような3つの横線のアイコンをクリックするとメニューが開かれ、バツをクリックするとメニューが閉じられる。この機能を3つの横線がハンバーガーに似ていることからハンバーガーメニューと呼ばれる。最近のスマートフォンサイトには多いイメージ。

2.ハンバーガーメニュー導入方法

下記を参考にしてください。大事な箇所は赤い文字にしてあります。(※スマホだと赤くなっていないかもしれませんのでPC推奨)

HTML(index.html)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--スマートフォン対応サイトなのでviewportを設定-->
    <!--content属性では幅をデバイスの幅にする-->
    <!--最初の倍率を等倍にする-->
    <meta name="viewport" content="width=devise-width, initial-scale=1">
    <title>ハンバーガーメニューテストプログラム</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header>
      <div class="logo">
        <h1>LOGO</h1>
      </div>

      <div class="pc-menu">
        <nav>
          <ul>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Menu</a></li>
          </ul>
        </nav>
      </div>

      <div class="sp-menu">
        <span class="material-icons" id="open">menu</span>
      </div>
    </header>

    <div class="overlay">
      <span class="material-icons" id="close">close</span>
      <nav>
        <ul>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
        </ul>
      </nav>
    </div>

    <main>
      <p>どうも、フリーランスエンジニアのカシムラです。</p>
    </main>

    <script src="js/main.js"></script>
  </body>
</html>

CSS(styles.css)

body {
  margin: 0;
  font-family: :Verdana, sans-serif;
}

header {
  display:  flex;
  padding: 0;
}

header h1 {
  margin: 0;
  font-size: 22px;
  line-height:64px;
}

.sp-menu {
  margin-left: auto;
}

.sp-menu #open {
  font-size: 32px;
  line-height: 64px;
  cursor: pointer;
}

.sp-menu #open.hide {
  display: none;
}

main {
  padding: 0 16px;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255,255,255, 0.95);
  text-align: center;
  padding: 64px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s; /* アニメーション */
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay #close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size:32px;
  cursor: pointer;
}

.overlay ul {
  list-style-type: none;
  margin-left: 0;
  padding: 0;
}

.overlay li {
  margin-top: 24px;
  opacity: 0;
  transform: translate(16px);
  transition:  opacity .3s, transform .3s;
}

.overlay.show li {
  opacity: 1;
  transform: none;
}

.overlay.show li:nth-child(1) {
  transition: .1s;
}

.overlay.show li:nth-child(2) {
  transition: .2s;
}

.overlay.show li:nth-child(3) {
  transition: .3s;
}

.pc-menu {
  display: none;
}

@media (min-width: 600px) {
  .pc-menu {
    display: block;
    margin-left: auto;
  }

  .pc-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .pc-menu a {
    display: block;
    width: 80px;
    line-height: 64px;
    text-align: center;
  }

  .pc-menu a:hover {
    background: #ff0000;
  }

  .sp-menu {
    display: none;
  }
}

JavaScript(main.js)

'use strict';

{
  const open = document.getElementById('open');
  const overlay = document.querySelector('.overlay');
  const close = document.getElementById('close');
  
  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });

  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    open.classList.remove('hide');
  });
}

3.マテリアルアイコン使用方法

上記2ではマテリアルアイコンを使用してハンバーガーメニューを実現しています。

今回使用しているマテリアルは、「3本の横線」と「バツ」のアイコンです。

それらを導入する方法を解説します。

(1)「Material Icons Guide」(https://google.github.io/material-design-icons/)のホームページを起動する。

(2)「Icon fotnts for the web」をクリックする。

(3)「link ~」の箇所をコピーし、htmlファイルにペーストする。

上記2だとこのようになっている。

<title>ハンバーガーメニューテストプログラム</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

(4)同じページ内の上部に「Material Icons Library」があるのでクリックする。

(5)「Filter by name」の欄に「menu」と入力すると、アイコンの候補が表示される。

(6)「menu」アイコンをクリックし、「Selected Icon」をクリックする。

(7)htmlタグの部分をコピーし、htmlファイルにペーストする。

(8)同じように「Filter by name」の欄に「close」と入力すると、アイコンの候補が表示されるので、コピーしてhtmlフファイルにペーストする。

誰かの参考になれば幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中