3本線のメニューボタンの作り方（cssだけでOK！コピーして使ってOK！）

スマートフォン向けの画面でよく見かけるメニューボタンの作り方をこの記事にメモします。

ハンバーガーメニューとも呼ばれますね。

結論だけまとめます。

HTMLとCSSだけで作る方法は次の通り。

<nav>
　<button class="menu-toggle">
　　<div></div>
　　<div></div>
　　<div></div>
　</button>
</nav>

buttonタグの中にある3つのdivが3本線になります。

次にCSSです。

.button{
　position: fixed;
　top: 10px;
　right: 10px;
　height: 34px;
　width: 44px;
　display: block;
　box-sizing: border-box;
　background-color: #60371B;
　border: none;
　padding: 6px 10px;
}
.button　div {
　position: absolute;
　left: 10px;
　height: 2px;
　width: 24px;
　background-color: #fff;
　border-radius: 1px;
　display: inline-block;
　box-sizing: border-box;
}
.button　div:nth-of-type(1) {
　top: 6px;
}
.button　div:nth-of-type(2) {
　top: 16px;
}
.button　div:nth-of-type(3) {
　bottom: 6px;
}

以上で次のようなメニューボタンができあがります。

ボタンを変化させたい場合

ボタンクリック時に、バツ（X）などに変化させる場合は、javascriptを使います。

サンプルコードはこちら

window.onload = function () {

 document.getElementById("menubtn").onclick = function() {
  const list = document.getElementById("ここでメニューボタンの親要素などをIDで指定");
  list.classList.toggle("toggled"); // クラス名「toggled」を付与
 };

};

上記のjsでメニュ一ボタンの親要素に対してクラスを付与できます。
上記の例では、クラス名「toggled」をボタンを押すたび付与したり削除したりを繰り返します。

あとは付与したクラス名「toggled」に対して、CSSでボタンをX（バツ）などに変化させることもできるようになります。

スマホサイトのhtml雛形＆作り方「かんたんに使える」