よく見るハンバーガーメニューのエフェクトは以下のサイトでまとめてくれている。
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10
このサイトの通りにやれば普通に実装出来るのだが、Bootstrapを使っているならJavaScriptを記述する必要はなくなる。
ただcssの.actionとなっているところをnot:(collapsed)に変更する必要がある。
html
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-inverse p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
</nav>
</div>
scss
.navbar-toggler-wrapper{
padding:7px;
}
.navbar-toggler {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: $brand-primary;
border-radius: 4px;
&:nth-of-type(1) {
top: 0;
}
&:nth-of-type(2) {
top: 15px;
}
&:nth-of-type(3) {
bottom: 0;
}
}
position: relative;
width: 38px;
height: 35px;
&:focus {
outline: none;
}
//エフェクト部分
&:not(.collapsed) span {
&:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
transform: translateY(15px) rotate(-45deg);
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
-webkit-transform: translateY(-15px) rotate(45deg);
transform: translateY(-15px) rotate(45deg);
}
}
}