【コピペで使える！】HTML・CSSだけでハンバーガーメニューの作り方

#プレビュー
まず、今回制作するハンバーガーメニューの完成プレビューは以下のようなものになります。
現在、僕が運用しているサイト [L's (https://osaru.site/)](https://osaru.site) でも使用しています。
レスポンシブ対応もしていますので、ぜひ使ってみてください！

| 表示していないとき | 表示しているとき |
|:-:|:-:|
| ![close.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264032/5a53651f-0601-0798-2513-1afc374794f3.png) | ![open.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264032/766d7bb5-0372-4988-d7fa-0c5d8db52b9b.png) |

#手順
今回は以下のサイト構成だと仮定して説明していきます。

```text:サイト構成
/index.html
/inquiry
  |  /index.html
/contents
  |  /index.html
```

あらかじめメニューに表示したいページを把握しておくと制作しやすいと思います。

##手順１
以下のコードを入力しましょう。
メニューコンテンツなのでheaderタグ内に入れると良いと思います。

```html:index.html
<div id="menu">
    <input type="checkbox" id="menu-btn-check">
    <label for="menu-btn-check" id="menu-btn"><span></span></label>
    <div id="menu-content">
        <ul>
            <li><p>サイトメニュー</p></li>
            <li><a href="index.html">TOP</a></li>
            <li><a href="inquiry/">お問い合わせ</a></li>
            <li><a href="contents/">コンテンツ</a></li>
            <li><p>外部リンク</p></li>
            <li><a href="https://twitter.com/">Twitter</a></li>
            <li><a href="https://facebook.com">Facebook</a></li>
        </ul>
    </div>
</div>
```

###解説
<details>
<dt>&lt;div id="menu"></dt>
<dd>"menu"というブロックを追加してCSSでスタイルを調整しやすくしています。<br>PCでは違うメニューを表示したいという方などはidを"pc-menu"にし、スマートフォン向け（ハンバーガーメニュー）のidを"sp-menu"というようにしてあげるとよいと思います。</dd>
<dt>&lt;input type="checkbox" id="menu-btn-check"></dt>
<dd>メニューを開いている、もしくは閉じている状態を管理するものです。<br>この要素は後程CSSで非表示にします。</dd>
<dt>&lt;label for="menu-btn-check" id="menu-btn"><span></span></label></dt>
<dd>状態を管理する要素と連携しています。<br>この要素をクリックすることで状態を管理する要素をクリックしたことになります。</dd>
</details>

##手順2
以下のコードを入力しましょう。

```css:style.css
#menu-btn {
    position: fixed;
    cursor: pointer;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(242, 234, 211, 0.75);
    border: 1px solid rgba(46, 15, 13, 1);
    border-radius: 25%;
}
#menu-btn span,
#menu-btn span::before,
#menu-btn span::after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: rgba(46, 15, 13, 1);
    position: absolute;
    transition: all 0.5s;
}
#menu-btn span::before {
    bottom: 8px;
}
#menu-btn span::after {
    top: 8px;
}
#menu-btn-check:checked ~ #menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ #menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ #menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check:checked ~ #menu-content {
    left: 0;
}
#menu-btn-check {
    display: none;
}
#menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 80;
    background-color: rgba(242, 234, 211, 0.95);
    transition: all 0.5s;
    border-left: 2.5px solid rgba(46, 15, 13, 1);
}
#menu-content ul {
    padding: 70px 10px 0;
}
#menu-content ul li {
    border-bottom: solid 1px rgba(46, 15, 13, 1);
    list-style: none;
}
#menu-content ul li p {
    display: block;
    font-weight: bold;
    width: 100%;
    font-size: 125%;
    box-sizing: border-box;
    color: rgba(46, 15, 13, 1);
    text-decoration: none;
    padding: 40px 25px 10px 10px;
    position: relative;
}
#menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 100%;
    box-sizing: border-box;
    color: rgba(46, 15, 13, 1);
    text-decoration: none;
    padding: 15px 25px 10px 10px;
    position: relative;
}
#menu-content ul li a::before {
    content: '';
    width: 7px;
    height: 7px;
    border-top: solid 2px rgba(46, 15, 13, 1);
    border-right: solid 2px rgba(46, 15, 13, 1);
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
```

###解説
<details>
<dt>Q.それぞれの要素の色を変更したい。</dt>
<dd>それぞれの要素に"rgba(x, x, x, x)"が入力されています。<br>そこを変更することで色を変更することができます。</dd>
</details>

##完成
これで完成です！