基本のハンバーガーメニューエフェクトまとめ

2024/07/03 | 2024/11/21 3721

この記事を書いている人

Marie

フリーランスwebデザイナー＆講師
制作会社・インハウスデザイナーを経験し独立
オンラインwebデザイン教室ちいウェブ運営
仕事の合間の息抜きに植物を育てています♡
スプラ・DIY・将棋がすき
小4・年長の母

もっと詳しくみる

まずはハンバーガーメニューの仕組みをまとめるとこんな感じです。

HTML：ハンバーガーメニューになるタグを設置
jQuery：クリックでclassを付与
CSS：classを使ってスタイルを変えたり、アニメーションをつける

HTML＋CSS＋jQueryの3つのコードが必要です。

[目次]

1 基本のコード
2 アニメーション01
3 アニメーション02
4 アニメーション03
5 「MENU」→「CLOSE」を表示
6 「CLOSE」をスライド
7 2本線のハンバーガー
8 応用
9 応用02
10 自分で凝ったアニメーションを実装したい方

基本のコード

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」→「CLOSE」を表示

.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;
}