CSSだけでドロワーメニュー（ハンバーガーメニュー）の作り方について【アニメーションあり】

CSSだけでドロワーメニューの作成方法を紹介していきます。中級編・応用編ではアニメーションを利用していきます。

ドロワーメニューのことを別名ハンバーガーメニューと言います。

ドロワーメニューの作り方

サイドメニューを作成するためには、3つのテクニックを覚える必要があります。

labelタグとinputタグを連携させるためには、labelタグの「for」を利用します。labelタグの「for」は、inputタグの「id」と紐づきます。

<label for="input-1">入力項目1</label>
<input id="input-1">

ラジオボタン（input[type=”check”]）の選択時のセレクタは「:checked」で指定することができます。

input[type="check"]:checked { outline: 5px solid red; }

同じ階層で基準以降のセレクタは「~」で指定することができます。スタイルの適用は後半のセレクタに行われます。

<div id="div-1"></div>
<div>ここを指定</div>
<div>ここを指定</div>

#div-1 ~ div { color: red; }

3つのテクニックを利用して作成されたドロワーメニューが以下になります。開閉のボタンにlabelタグを利用することでドロワーメニューが開閉が行えます。また、背景（backdrop）にもlabelタグを利用することで、スライドメニューを閉じれるようにしています。

ドロワーメニューの開閉するときにアニメーションを追加します。

アニメーションには「transition」を利用します。二点間を移動させることができます。「left」を移動させて表現しています。

コンテンツの非表示には「left」を利用しています。「display: none;」を利用するとアニメーションにならないので気をつけてください。

各メニューにもアニメーションを追加します。

カスタムプロパティを利用して移動するタブを表現しています。カスタムプロパティの値を上書きしているところが重要になります。

SASS(SCSS)を利用する場合、item-Xクラスの個所をシンプルにできます。

.item-1 {
    --i: 1;
}

.item-2 {
    --i: 2;
}

.item-3 {
    --i: 3;
}

@for $i from 1 through 3 {
    .item-#{$i} {
        --i: #{$i};
    }
}