モバイル対応ナビゲーション バー

こんにちは！ 株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「モバイル対応ナビゲーション バーの実装」についてお伝えしていきます。

ステップ 1 - HTML マークアップを追加する

ナビゲーションバーのHTMLマークアップを追加する前に、ハンバーガーアイコンを取得しましょう。

モバイルデバイスでのナビゲーションメニュー切り替えにはハンバーガーアイコンを使用します。

以下のスニペットをHTMLファイルの先頭に追加して、Googleアイコンからハンバーガーアイコンをインポートします。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

次に、以下のHTMLマークアップをHTMLファイルに追加します。

<header class="header">
    <div class="nav-container">
        <span class="logo">NavBar</span>
        <nav class="nav">
            <ul class="nav--ul__one">
                <li class="nav-link"><a href="#">Home</a></li>
                <li class="nav-link"><a href="#">Contact</a></li>
                <li class="nav-link"><a href="#">About Us</a></li>
            </ul>
            <ul class="nav--ul__two">
                <li class="nav-link"><a href="#">Login</a></li>
                <li class="nav-link"><a href="#">Signup</a></li>
            </ul>
        </nav>
        <span class="hamburger-menu  material-symbols-outlined">menu</span>
    </div>
</header>

このHTMLマークアップは、以下の要素で構成されています：

• すべての要素をラップする<header>要素
• <div class="nav-container">内に、ロゴ、メインナビゲーションコンテナ、ハンバーガーメニューがラップされています。
• ロゴを表す<span>要素
• メインナビゲーションコンテナを表す<nav>要素
• 2つのリスト内のナビゲーションリンクを表す<ul>要素
• ハンバーガーメニューアイコンを表す<span>要素

ステップ 2 - ナビゲーションバーのスタイルを設定する

要素にスタイルを追加します。

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

基本的なスタイル設定が完了したら、コアのナビゲーションバー自体のスタイル設定に焦点を当てます。

header {
    background: #4D4DDB;
    color: white;
    padding: .5rem 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}

.nav-container .logo {
    font-size: 2rem;
    font-weight: bold;
}

.nav {
    display: flex;
    flex-grow: 1;
}

.nav--ul__one {
    margin: 0 auto;
}

.nav-container, .nav--ul__one, .nav--ul__two {
    display: flex;
    gap: 1.6rem;
    font-size: 1.2rem;
}

.hamburger-menu {
    display: none; /* 大画面では非表示 */
    cursor: pointer;
}

加えて、メディアクエリを追加して、ナビゲーションバーをモバイル対応します。

@media (max-width: 700px) {
    .nav-container .logo {
        font-size: 1.2rem;
        z-index: 2;
    }

    .nav {
        flex-direction: column;
        gap: 2rem;
    }

    .nav--ul__one,
    .nav--ul__two {
        flex-direction: column;
        gap: .6rem;
    }

    .hamburger-menu {
        display: block;

        z-index: 2;
    }

    .nav {
        position: absolute;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 100%;

        padding-top: 6rem;

        align-items: center;
        text-align: center;
        background-color: #4D4DDB;
        color: white;

        transition: 0.15s ease-in-out;
    }

    .nav.active {
        right: 0;
    }

}

ステップ 3 - JavaScript 機能を追加する

JavaScriptを使用してハンバーガーメニューアイコンをクリックしたときにナビゲーションメニューの表示と非表示を切り替えます。

まず、hamburger-menuとnavへの参照を取得します。これにより、JavaScriptがこれらの要素を操作できるようになります。

const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");

hamburgerMenuにクリックイベントリスナーを追加します。これにより、ハンバーガーメニューアイコンがクリックされたときに特定のアクションを実行できます。

hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active");
});

hamburger-menuクリックすると、クラスを追加または削除することによってメニューの表示/非表示が切り替わります。