基本のハンバーガーメニューエフェクトまとめ
3255
この記事を書いている人
まずはハンバーガーメニューの仕組みをまとめるとこんな感じです。
- HTML:ハンバーガーメニューになるタグを設置
- jQuery:クリックでclassを付与
- CSS:classを使ってスタイルを変えたり、アニメーションをつける
HTML+CSS+jQueryの3つのコードが必要です。
[目次]
基本のコード
HTML
HTMLは全エフェクト共通です。
<div class="menu_btn">
<span></span>
<span></span>
<span></span>
</div>
CSS
ハンバーガーメニュー表示用のCSSです。
.menu_btn {
position: relative;
background: none;
border: none;
appearance: none;
cursor: pointer;
width: 34px;
height: 21px;
transition: all 1s;
}
.menu_btn span {
display: inline-block;
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #222;
transition: all .4s;
}
.menu_btn span:nth-of-type(1) {
top: 0;
}
.menu_btn span:nth-of-type(2) {
top: 10px;
}
.menu_btn span:nth-of-type(3) {
bottom: 0;
}
jQuery
jQueryでエフェクト用のclass、activeを付与します。
$(".menu_btn").click(function () {
$(this).toggleClass('active');
});
ナビゲーション開閉の為のclassを用意するjQuery
$(function() {
$('.menu_btn').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.global_menu').addClass('active');
} else {
$('.global_menu').removeClass('active');
}
});
});
開閉したいナビゲーションに、global_menuというclassがついていることになっています。
各アニメーションのCSSコードを基本コードの後に追記してください。
アニメーション01
.menu_btn.active span:nth-of-type(1) {
transform: translateY(10px) rotate(45deg);
}
.menu_btn.active span:nth-of-type(2) {
opacity: 0;
}
.menu_btn.active span:nth-of-type(3) {
transform: translateY(-9px) rotate(-45deg);
}
アニメーション02
.menu_btn.active {
transform: rotateX(720deg);
}
.menu_btn.active span:nth-of-type(1) {
transform: translateY(10px) rotate(-45deg);
}
.menu_btn.active span:nth-of-type(2) {
transform: translateY(0) rotate(45deg);
}
.menu_btn.active span:nth-of-type(3) {
opacity: 0;
}
アニメーション03
.menu_btn span:nth-of-type(2) {
width: 70%;
}
.menu_btn.active span:nth-of-type(1) {
animation: anime3-1 .75s forwards;
}
@keyframes anime3-1 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(20px) rotate(0);
}
100% {
transform: translateY(10px) rotate(45deg);
}
}
.menu_btn.active span:nth-of-type(2) {
display: none;
}
.menu_btn.active span:nth-of-type(3) {
animation: anime3-3 .75s forwards;
}
@keyframes anime3-3 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-20px) rotate(0);
}
100% {
transform: translateY(-9px) rotate(-45deg);
}
}
.menu_btn::after {
content: "MENU";
font-size: 11px;
position: absolute;
bottom: -20px;
}
.menu_btn.active::after {
content: "CLOSE";
left: -2px;
}
.menu_btn.active span:nth-of-type(1) {
transform: translateY(10px) rotate(45deg);
}
.menu_btn.active span:nth-of-type(2) {
opacity: 0;
}
.menu_btn.active span:nth-of-type(3) {
transform: translateY(-9px) rotate(-45deg);
}
「CLOSE」をスライド
.menu_btn span {
background: none;
}
.menu_btn span::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #000;
transition: width 0.3s;
}
.menu_btn span:nth-of-type(2)::before {
transition: width 0.5s;
}
.menu_btn span:nth-of-type(3)::before {
transition: width 0.7s;
}
.menu_btn.active span::before {
width: 0;
}
.menu_btn span:nth-of-type(1)::after {
content: 'CLOSE';
position: absolute;
bottom: 0;
top: 0;
margin: auto;
right: -100%;
display: block;
font-size: 12px;
transition: 1s;
opacity: 0;
}
.menu_btn.active span:nth-of-type(1)::after {
opacity: 1;
right: 0;
}
2本線のハンバーガー
2本なのでspanは2つです。
HTMLはこちらに変わりますが、CSSは基本のコードをコピーした上で、追加で貼り付けてください。
<div class="menu_btn">
<span></span>
<span></span>
</div>
.menu_btn {
height: 12px;
}
.menu_btn span:nth-of-type(2) {
bottom: 0;
top: auto;
}
.menu_btn.active span:nth-of-type(1) {
transform: translateY(6px) rotate(20deg);
}
.menu_btn.active span:nth-of-type(2) {
transform: translateY(-5px) rotate(-20deg);
}
応用
hoverアニメが入ります。
.menu_btn {
height: 12px;
}
.menu_btn span::before {
content: "";
display: block;
width: 4px;
height: 4px;
background: #222;
border-radius: 50%;
position: absolute;
left: -2px;
top: -1.5px;
transition: .3s;
}
.menu_btn span:nth-of-type(2)::before {
transition: .8s;
}
.menu_btn:hover span::before {
left: 100%;
}
.menu_btn span:nth-of-type(2) {
bottom: 0;
top: auto;
}
.menu_btn.active span:nth-of-type(1) {
transform: translateY(6px) rotate(20deg);
}
.menu_btn.active span:nth-of-type(2) {
transform: translateY(-5px) rotate(-20deg);
}
.menu_btn.active span::before {
content: none;
}
応用02
「X」になった後もhoverエフェクトが入ります。
.menu_btn {
overflow: hidden;
height: 12px;
}
.menu_btn span {
background: none;
}
.menu_btn span:nth-of-type(2) {
bottom: 0;
top: auto;
}
.menu_btn span::before,
.menu_btn span::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #222;
transition: .4s;
}
.menu_btn span::before {
transform: translateX(calc(-100% - 2rem));
}
.menu_btn:hover span {
transform:translateX(calc(100% + 2rem));
}
.menu_btn.active {
animation: anime-8 1s forwards;
transition: none;
}
@keyframes anime-8 {
from {
opacity: 0;
}
to {
opacity: 1;
overflow: visible;
}
}
.menu_btn.active span {
background: #222;
transform: inherit;
}
.menu_btn.active:hover span {
transform: inherit;
}
.menu_btn.active span:nth-of-type(1) {
transform: translateY(6px) rotate(20deg);
}
.menu_btn.active span:nth-of-type(2) {
transform: translateY(-5px) rotate(-20deg);
}
.menu_btn.active:hover span:nth-of-type(1) {
transform: translateY(6px) rotate(30deg);
}
.menu_btn.active:hover span:nth-of-type(2) {
transform: translateY(-5px) rotate(-30deg);
}
.menu_btn.active span::before,
.menu_btn.active span::after {
content: none;
}
自分で凝ったアニメーションを実装したい方
ハンバーガーメニュー応用編へ↓
いいなと思ったら
TAPしてね♡↓
タブと別ページから”タブを開いた状態”でのリンクを実装【jQuery】 ハンバーガーメニュー”閉じるボタン”をクリックで追加エフェクト【jQuery】
コメントは承認後に表示されます。