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だけで作るメニューボタン

Webサイト作成

コメントを残す

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

nineteen − ten =