【JavaScript】ハンバーガーメニューの作り方

ハンバーガーメニューは、特にモバイルサイトでよく使用されるナビゲーションメニューの一つです。画面の限られたスペースを有効活用するため、メニューアイコンをクリックするとナビゲーションメニューが表示される仕組みです。ここでは、シンプルなハンバーガーメニューの作り方を紹介します。

HTMLの構造を作成する
CSSでスタイリングする
JavaScriptで動作を実装する
CSSの調整
サンプル
まとめ

HTMLの構造を作成する

まず、ハンバーガーメニューとナビゲーションメニューを作成するための基本的なHTML構造を用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ハンバーガーメニュー</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu-container">
        <div class="hamburger-menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav class="nav-menu">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSSでスタイリングする

次に、ハンバーガーメニューとナビゲーションメニューのスタイリングを行います。

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

.menu-container {
    position: relative;
}

.hamburger-menu {
    width: 30px;
    height: 21px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    margin: 20px;
    transition: transform 0.3s ease;
}

.hamburger-menu span {
    display: block;
    height: 3px;
    background-color: #333;
    transition: all 0.3s ease;
}

.nav-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #333;
    text-align: center;
}

.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    padding: 15px 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.nav-menu a:hover {
    color: #ddd;
}

/* メニューが開いた時のバツマークスタイル */
.hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.nav-menu.open {
    display: block;
}

JavaScriptで動作を実装する

最後に、ハンバーガーメニューをクリックしたときにメニューを表示・非表示にするためのJavaScriptを追加します。

document.addEventListener('DOMContentLoaded', function() {
    const hamburgerMenu = document.querySelector('.hamburger-menu');
    const navMenu = document.querySelector('.nav-menu');

    hamburgerMenu.addEventListener('click', function() {
        navMenu.classList.toggle('open');
    });
});

CSSの調整

メニューが開いたときに表示されるように、.openクラスのスタイリングを追加します。

.nav-menu.open {
    display: block;
}

サンプル

まとめ

これで、クリックするとナビゲーションメニューが表示されるハンバーガーメニューが完成しました。シンプルな実装ですが、CSSやJavaScriptを応用することで、より複雑でインタラクティブなメニューを作成することもできます。