【コピペ用】ハンバーガーメニューをCSSのみで実装する方法
ハンバーガーメニューをJavaScript・jQueryを使わず、CSSのみでスマホに実装したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
CSSだけでハンバーガーメニュー by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
三本線をタップすると、バツマーク（×）に変換されるシンプルなハンバーガーメニューです。
cssのみで再現されてます。
実装方法は以下の通りです。
HTML
<input id="checkbox" type="checkbox">
<label id="menu01" class="menu-trigger" for="checkbox">
<span></span>
<span></span>
<span></span>
</label>
まずはHTMLを準備。
上記コードをコピペします。
CSSのみで再現するのに、input要素のチェックボックス・ラベルを使用します。
CSS
/*チェックボックスを非表示*/
#checkbox {
opacity: 0;
width: 0;
height: 0;
}
.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all 0.4s;
box-sizing: border-box;
position: relative;
z-index: 100;
}
.menu-trigger {
position: relative;
width: 32px;
height: 26px;
background: none;
border: none;
appearance: none;
cursor: pointer;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #172a22;
border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
top: 0;
}
.menu-trigger span:nth-of-type(2) {
top: 11px;
}
.menu-trigger span:nth-of-type(3) {
bottom: 0;
}
/*チェックボックスにチェックが入ったら*/
#checkbox:checked + label span:nth-of-type(1) {
transform: translateY(11px) rotate(-45deg);
}
#checkbox:checked + label span:nth-of-type(2) {
opacity: 0;
}
#checkbox:checked + label span:nth-of-type(3) {
transform: translateY(-11px) rotate(45deg);
}
上記CSSコードをコピペします。
チェックボックスはopacityなど使って非表示。
label要素とその子要素のspanタグにCSSでハンバーガーメニューになるよう装飾。
【labelがタップされたら】という条件を以下擬似要素で再現。
:checked + label
バツマークになるよう装飾。
以上でCSSのみでハンバーガーメニューを実装できます。
他の要素も連動させる
div {
display: none;
}
#checkbox:checked + label + div {
display: block;
}
ハンバーガーメニューと連動して他の要素にCSSを追記させるコード例です。
html側でlabel要素のとなりに連動させたい要素（divなど）を配置。
他の要素をdisplay: none;であらかじめ非表示。
checkbox:checked + label + div（他の要素）でdisplay: block;にするとハンバーガーメニューと連動した開閉アコーディオンの完成です。
まとめ
jQueryも使って動的に色々カスタマイズしたいという方はこちらの記事をご参考ください。
以上で解説を終わります。
目次