【コピペ可】HTMLとCSSのハンバーガーメニューデザイン4選

css

今回は、ハンバーガーメニューのデザインをHTMLとCSSのサンプルと共にご紹介します。汎用的なデザインを集めているのでハンバーガーメニューのコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。

事前準備

本サンプルでは、リセットCSSにdestyle.css(https://github.com/nicolas-cusan/destyle.css)を使っています。HTMLとCSSをコピペする前に、事前に以下のCDNでデフォルトのブラウザスタイルをリセットしてからお試しください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.min.css">

HTMLのテンプレート

今回のテーブルは全て同じHTMLを使用して、CSSのみの変更でデザインを表現しています。

<nav class="Menu">
    <button type="button" class="Menu-CloseBtn">
        <svg xmlns="http://www.w3.org/2000/svg" class="Menu-CloseBtn-Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <ul class="Menu-Group">
        <li class="Menu-Group-Item">
            <a class="Menu-Group-Item-Link" href="/">
                <span>TOP</span>
            </a>
        </li>
        <li class="Menu-Group-Item">
            <a class="Menu-Group-Item-Link" href="/about/">
                <span>ABOUT</span>
            </a>
        </li>
        <li class="Menu-Group-Item">
            <a class="Menu-Group-Item-Link" href="/service/">
                <span>SERVICE</span>
            </a>
        </li>
        <li class="Menu-Group-Item">
            <a class="Menu-Group-Item-Link" href="/works/">
                <span>WORKS</span>
            </a>
        </li>
        <li class="Menu-Group-Item">
            <a class="Menu-Group-Item-Link" href="/blog/">
                <span>BLOG</span>
            </a>
        </li>
        <li class="Menu-Group-Item">
            <a class="Menu-Group-Item-Link" href="/company/">
                <span>COMPANY</span>
            </a>
        </li>
    </ul>
</nav>

小さなボタンのハンバーガーメニュー

小さなボタンのハンバーガーメニューのデザイン

小さなボタンのハンバーガーメニューです。

.Menu {
position: relative;
top: 0;
left: 0;
width: 100vw;
height: auto;
background: #eee;
color: #111;
padding-top: 48px;
}
.Menu-CloseBtn {
position: absolute;
top: 0;
right: 0;
padding: 8px;
}
.Menu-CloseBtn-Icon {
width: 32px;
color: #111;
}
.Menu-Group {
display: flex;
flex-wrap: wrap;
padding: 8px;
padding-top: 0px;
}
.Menu-Group-Item {
width: 50%;
flex: auto;
padding: 4px;
}
.Menu-Group-Item-Link {
padding: 1em 0.5em;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: solid 2px #111;
background: #fff;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.02em;
}

シンプルなハンバーガーメニュー

シンプルなハンバーガーメニューのデザイン

シンプルなハンバーガーメニューのデザインです。

.Menu {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Menu-CloseBtn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
}
.Menu-CloseBtn-Icon {
  width: 32px;
  color: #111;
}
.Menu-Group {
  display: flex;
  flex-wrap: wrap;
  padding: 32px 12px;
}
.Menu-Group-Item {
  width: 100%;
  flex: auto;
  padding: 4px;
}
.Menu-Group-Item-Link {
  padding: 0.5em 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

かっこいいハンバーガーメニュー

かっこいいハンバーガーメニューのデザイン

かっこいいハンバーガーメニューのデザインです。

.Menu {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  color: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Menu-CloseBtn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
}
.Menu-CloseBtn-Icon {
  width: 32px;
  color: #111;
}
.Menu-Group {
  display: flex;
  flex-wrap: wrap;
  padding: 32px 12px;
}
.Menu-Group > * + * {
  border-top: solid 2px #111;
}
.Menu-Group-Item {
  width: 100%;
  flex: auto;
  padding: 4px;
}
.Menu-Group-Item-Link {
  padding: 1em 0.5em;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

細長いハンバーガーメニュー

細長いハンバーガーメニューのデザイン

細長いハンバーガーメニューです。

.Menu {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.2);
  color: #111;
}
.Menu-CloseBtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10000;
  padding: 8px;
}
.Menu-CloseBtn-Icon {
  width: 32px;
  color: #111;
}
.Menu-Group {
  position: absolute;
  top: 0;
  right: 0;
  width: 80vw;
  height: 100vh;
  background: #fff;
  padding: 32px 12px;
}
.Menu-Group > * + * {
  border-top: solid 1px #bbb;
}
.Menu-Group-Item {
  width: 100%;
  flex: auto;
  padding: 4px;
}
.Menu-Group-Item-Link {
  padding: 1em 0.5em;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.02em;
}
.Menu-Group-Item-Link::after {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPiA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05IDVsNyA3LTcgNyIgLz48L3N2Zz4=");
  width: 20px;
  display: block;
  margin-left: auto;
}

関連記事

ハンバーガーメニューのボタンデザインとアニメーションについてのソースコード事例は、こちらの記事に掲載しています。

css【CSS】ハンバーガーメニューのボタンアニメーション4選