JavaScriptとCSSで実装するレスポンシブハンバーガーメニュー

この記事では、JavaScriptのclassListとDOMTokenListの概念を活用して、レスポンシブなハンバーガーメニューを実装する方法を解説します。ウェブサイトのナビゲーションをモバイルフレンドリーにするための重要なテクニックです。

基本概念の復習

前提として、classListプロパティを使った動的なクラス操作について理解しておくことが重要です。classListはDOMTokenListインターフェイスのインスタンスを提供し、これを用いることでHTML要素のクラスを簡単に追加、削除、トグルすることができます。

ハンバーガーメニューのHTML構造

まずは、ハンバーガーメニューを構成する基本的なHTMLを準備します。

    <nav id="desktop-nav">
        <div class="logo">Takanori Hiraki</div>
        <div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>
    <nav id="hamburger-nav">
        <div class="logo">John Doe</div>
        <div class="hamburger-menu">
            <div class="hamburger-icon" onclick="toggleMenu()">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="menu-links">
                <li><a href="#about" onclick="toggleMenu()">About</a></li>
                <li><a href="#experience" onclick="toggleMenu()">Experience</a></li>
                <li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
                <li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
            </div>
        </div>
    </nav>

CSSでのスタイリング

次に、CSSを用いてハンバーガーメニューとナビゲーションリンクにスタイルを適用します。レスポンシブデザインを意識して、特定の画面幅以下でメニューがハンバーガーアイコンに変わるように設定します。

/* Hamburger menu */
#hamburger-nav {
    display: none;
}

.hamburger-menu {
    position: relative;
    display: inline-block;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
    cursor: pointer;
}
.hamburger-icon span {
    width: 100%;
    height: 2px;
    background-color: black;
    transition: all 0.3 ease-in-out;
}

.menu-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    width: fit-content;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3 ease-in-out;
}
.menu-links a {
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    color: black;
    text-decoration: none;
    transition: all 0.3 ease-in-out;
}

.menu-links li {
    list-style: none;
}

.menu-links.open {
    max-height: 300px;
}

.hamburger-icon.open span:first-child {
    transform: rotate(45deg) translate(10px, 5px);
}

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

.hamburger-icon.open span:last-child {
    transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
    transform: none;
}

.hamburger-icon span:first-child {
    opacity: 1;
}

.hamburger-icon span:first-child {
    transform: none;
}

JavaScriptでの動的クラス操作

最後に、JavaScriptを使用して、ハンバーガーメニューのクリックイベントを処理します。これにより、画面が狭い場合にナビゲーションリンクの表示を切り替えることができます。

function toggleMenu() {
    const menu = document.querySelector(".menu-links");
    const icon = document.querySelector(".hamburger-icon");
    menu.classList.toggle("open");
    icon.classList.toggle("open");
}