【JavaScript】レスポンシブデザイン必須スキル、ハンバーガーメニューの作り方

2023年8月27日

この記事では、レスポンシブデザイン対応ウェブサイトでよく見るハンバーガーメニューの作り方を解説していきます。

完成形

最初に完成形を見ていきます。

三本線のハンバーガーメニューをクリックすると×に切り替わり、ナビメニューが表示されます。

See the Pen js-04 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

まずは、HTMLのコーディングをしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">メニュー１</a></li>
                <li><a href="#">メニュー２</a></li>
                <li><a href="#">メニュー３</a></li>
            </ul>
        </nav>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </header>
<script src="main.js"></script>
</body>
</html>

<!DOCTYPE html>:
- HTML5の文書タイプ宣言を指定します。
<html lang="ja">:
- HTML文書のルート要素で、言語を日本語（’ja’）に設定しています。
<head>:
- ページのヘッドセクションで、メタ情報や外部リソースのリンクを含みます。
<meta charset="UTF-8">:
- 文字エンコーディングをUTF-8に設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
- レスポンシブデザインのためのビューポート設定を行います。
<link rel="stylesheet" href="style.css">:
- スタイルシートファイル style.css を読み込んでいます。
<title>Document</title>:
- ページのタイトルを設定します。
<body>:
- ページのコンテンツが表示されるボディ部分です。
<header>:
- ヘッダーコンテンツを定義します。
<nav>:
- ナビゲーションメニューを表すセクションです。
<ul>:
- 項目のリストを表す無順リストです。
<li>:
- リストアイテムを表します。
<a href="#">:
- ハイパーリンクを表します。ここでは # を指定していますが、実際のリンク先が指定される場所です。
<div class="hamburger">:
- ハンバーガーアイコンを含む div 要素を定義します。
<span></span>:
- ハンバーガーアイコンの各ラインを表す span 要素です。
<script src="main.js"></script>:
- main.js スクリプトファイルを読み込んでいます。

CSSコーディング

次にCSSのコーディングをしていきます。

@charset 'utf-8';

nav {
    width: 300px;
    height: 100vh;
    background: rgba(1,1,1,0.1);
    font-size: 1.2rem;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    text-shadow: rgba(0,0,0,0.5) 1px 1px 3px;
    display: none;
}
nav.open {
    display: block;
}
ul {
    position: absolute;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
li {
    list-style: none;
    padding: 20px 0;
}
a {
    text-decoration: none;
    color: #333;
}
.hamburger {
    width: 100px;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: 0.3s;
}
.hamburger span {
    width: 50px;
    height: 2px ;
    background: #333;
    position: absolute;
    left: 25px;
    transition: 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
    top: 36px;
}
.hamburger span:nth-child(2) {
    top: 50px;
}
.hamburger span:nth-child(3) {
    top: 64px;
}
.hamburger.active span:nth-child(1) {
    top: 47px;
    left: 25px;
    background :#333;
    transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 47px;
    background: #333;
    transform: rotate(45deg);
}

nav:
- ナビゲーションメニューのスタイルを定義しています。幅は300px、高さはビューポートの100%、透明な背景色、フォントサイズは1.2rem、太字、固定位置で画面上部に固定されます。
- text-shadow によってテキストに影が付けられています。
- display: none により初めは非表示にしています。
nav.open:
- .open クラスが適用されたときにナビゲーションメニューを表示します。
ul:
- リストアイテムを配置するための位置調整を行います。中央に配置されるように設定されています。
li:
- リストアイテムのスタイルを設定します。リストのスタイルをリセットし、上下に20pxの余白を追加します。
a:
- ハイパーリンクのスタイルを定義します。下線を消し、テキスト色を暗いグレーに設定します。
.hamburger:
- ハンバーガーアイコンのスタイルを定義します。幅と高さは100pxで、固定位置で画面左上に配置されます。カーソルがポインターに変わり、0.3秒のトランジションが設定されています。
.hamburger span:
- ハンバーガーアイコンのラインを表す span 要素のスタイルを定義します。幅50px、高さ2px、背景色はダークグレー、絶対位置で25px左から配置され、0.3秒のイージング付きトランジションが設定されています。
.hamburger span:nth-child(1):
- ハンバーガーアイコンの1番目のラインの位置を調整しています。
.hamburger span:nth-child(2), .hamburger span:nth-child(3):
- ハンバーガーアイコンの2番目と3番目のラインの位置を調整しています。アクティブ時には回転して斜めになるように設定されています。

JavaScriptコーディング

最後にJavaScriptのコーディングをして完成です。

const hamburger=document.querySelector('.hamburger');
const nav=document.querySelector('nav');
hamburger.addEventListener('click',function(){
hamburger.classList.toggle('active');
nav.classList.toggle('open');
});

const hamburger = document.querySelector('.hamburger');
- HTML内で hamburger クラスを持つ要素（ハンバーガーアイコン）を取得しています。
const nav = document.querySelector('nav');
- nav タグ要素を取得しています。
hamburger.addEventListener('click', function() { ... });
- ハンバーガーアイコンをクリックしたときのイベントリスナーを追加しています。
hamburger.classList.toggle('active');
- ハンバーガーアイコンに active クラスを追加・削除します。これにより、アイコンがクリックされたときにアクティブ状態がトグルされます。
nav.classList.toggle('open');
- ナビゲーションメニューに open クラスを追加・削除します。これにより、メニューが表示・非表示されるようになります。