ハンバーガーメニューをチェックボックスで作成する方法

Posted on by

ハンバーガーメニューは、モバイルデバイスやレスポンシブデザインでよく使用される
ナビゲーションメニューです。
今回は、チェックボックスを使ってシンプルなハンバーガーメニューを作成する方法を紹介します。

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>
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle" class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </label>
    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

次に、CSSを使ってスタイルを定義します。
ここでは、ハンバーガーメニューの見た目と動作を設定します。

/* 全体のスタイルリセット */
body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* チェックボックスを非表示にする */
#menu-toggle {
    display: none;
}

/* ハンバーガーメニューのスタイル */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #333;
    transition: all 0.3s;
}

/* メニューのスタイル */
.menu {
    display: none;
}

.menu ul {
    display: flex;
    flex-direction: column;
    background-color: #eee;
    position: absolute;
    top: 40px;
    right: 10px;
    width: 150px;
}

.menu ul li {
    border-bottom: 1px solid #ddd;
}

.menu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

/* チェックボックスがチェックされている場合のスタイル */
#menu-toggle:checked + .hamburger + .menu {
    display: block;
}

動作確認

上記のHTMLとCSSをファイルに保存し、ブラウザで開いてみてください。
ハンバーガーアイコンをクリックするとメニューが表示され、
もう一度クリックするとメニューが非表示になります。

説明

HTML構造

input type="checkbox": メニューの表示/非表示を制御するためのチェックボックス。

label for="menu-toggle": チェックボックスをターゲットとするラベル。
ハンバーガーアイコンとして機能します。

nav class="menu": メニュー項目を含むナビゲーション要素。

CSSスタイル

.hamburger: ハンバーガーアイコンのスタイルを定義します。

.menu: 初期状態で非表示にするためのスタイル。

#menu-toggle:checked + .hamburger + .menu: チェックボックスがチェックされたときに
メニューを表示します。

これで、チェックボックスを使ったシンプルなハンバーガーメニューの作成方法が完成です。
この方法は簡単でありながら、レスポンシブデザインにおいて非常に役立ちます。