3本線のメニューボタンの作り方(cssだけで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;
}

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

cssだけで作るメニューボタン

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

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

サンプルコードはこちら

window.onload = function () {

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

};

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

あとはCSSでボタンをバツなどに変化させることができます。

 

Category: Webサイト作成

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 + six =