Edited at

≡ を × にアニメーションするハンバーガーメニュー(ちょっと汎用性ある用)

More than 1 year has passed since last update.

このハンバーガーはメニュー開閉のトリガーを想定したものですが、メニューの開閉については記していません。


DEMO

demo.gif


codepenあります

https://codepen.io/mtmtkzm/pen/GEyJww


HTML

まあ、普通。

<a class="hamburger">

<span class="hamburger-item"></span>
<span class="hamburger-item"></span>
<span class="hamburger-item"></span>
</a>


SCSS

ほんのすこし汎用性のある感じに、変数にサイズを持たせてみました。

$validArea:    50px; // タップ可能エリアの一辺の長さ

$menuBarWidth: 19px; // バンズ(or肉)の幅
$menuBarHeight: 2px; // バンズ(or肉)の高さ
$menuBarGap: 6px; // バンズと肉の隙間

.hamburger {
position: relative;
top: 0;
left: 0;
display: block;
width: $validArea;
height: $validArea;
&.is-open {
.hamburger-item {
&:nth-child(1) {
transform: translateY(0px) rotate(45deg);
}
&:nth-child(2) {
transform: translateX( $menuBarWidth / 2 );
opacity: 0;
}
&:nth-child(3) {
transform: translateY(0px) rotate(-45deg);
}
}
}
}

.hamburger-item {
position: absolute;
display: block;
width: $menuBarWidth;
height: $menuBarHeight;
top: ( $validArea - $menuBarHeight ) / 2;
left: 0;
right: 0;
margin: auto;
background-color: #000;
transition: .2s ease-out;
&:nth-child(1) {
transform: translateY(-$menuBarGap);
}
&:nth-child(2) {}
&:nth-child(3) {
transform: translateY($menuBarGap);
}
}


その他

あとは、JavaScriptを使い .hamburger.is-open というclassを付け外ししてやりましょう