HTML & CSS

最終更新日：
公開日：

レシピ

CSSレシピ

メニューボタンのCSSレシピ

CSSを使ってナビゲーションの表示／非表示を切り替えるメニューボタンのCSSレシピを紹介します。

この記事のポイント

  • スマホサイトなどで使用するメニュー開閉のボタンのアニメーションを実装する
  • アニメーションはCSSで実装し、クリックやタップしたときのクラスの切り替えはJavaScriptで実装する

目次

メニューボタンのCSSレシピ

CSSのアニメーションを使ってメニューボタンの開閉に動きを付けるレシピ集です。
メニューボタンをクリック（タップ）したときにクラスを切り替える部分ではJavaScriptを使います。

デモはこちら

以下のコード例ではindex.htmlがstyle.cssとmain.jsを読み込むことを想定します。
main.jsは全てのメニューボタンで共通のものを使用し、ボタンを押したときのイベントリスナーを設定します。

main.js

document.addEventListener('DOMContentLoaded',()=>{

	const btn_menu = document.querySelectorAll(".btn_menu");

	for(let btn of btn_menu) {
		btn.addEventListener('click',(e)=>{
			e.preventDefault();

			if( !btn.classList.contains('active') ) {
				btn.classList.add('active');
			} else {
				btn.classList.remove('active');
			}

		});
	}
});

フェードインで「×」に切り替わる

メニューボタンを押すとフェードインで「×」に切り替わり、もう一度押すと最初の3本ラインに戻ります。

index.html

<a id="btn_menu1" class="btn_menu" href="#"><span><span></span></span></a>

style.css

// メニューボタン1
#btn_menu1 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu1::before {
	position: absolute;
	top: calc(50% - 1px);
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	opacity: 0;
	transform: rotate(45deg);
	transition: opacity 0.3s ease;
}
#btn_menu1 span {
	display: block;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	opacity: 1;
	transition: opacity 0.3s ease;
}
#btn_menu1 span::before,
#btn_menu1 span span, #btn_menu1 span::after {
	position: absolute;
	top: 12%;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 2px;
	background: #f7f7f7;
	transition: opacity 0.3s ease;
}
#btn_menu1 span span {
	top: calc(50% - 1px);
}
#btn_menu1 span::after {
	top: auto;
	bottom: 12%;
}
#btn_menu1::after {
	position: absolute;
	top: calc(50% - 1px);
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	opacity: 0;
	transform: rotate(-45deg);
	transition: opacity 0.3s ease;
}
#btn_menu1:hover {
	background-color: #555;
}
#btn_menu1.active::before {
	opacity: 1;
}
#btn_menu1.active span {
	opacity: 0;
}
#btn_menu1.active::after {
	opacity: 1;
}

フェードインで「CLOSE」に切り替わる

メニューボタンを押すとフェードインで「CLOSE」に切り替わり、もう一度押すと「MENU」に戻ります。

index.html

<a id="btn_menu2" class="btn_menu" href="#"></a>

style.css

// メニューボタン2
#btn_menu2 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu2::before {
	position: absolute;
	top: calc(50% - 10px);
	left: 0;
	display: block;
	content: "MENU";
	color: #f7f7f7;
	width: 100%;
	font-size: 1rem;
	text-align: center;
	opacity: 1;
	transition: opacity 0.3s ease;
}
#btn_menu2::after {
	position: absolute;
	top: calc(50% - 10px);
	left: 0;
	display: block;
	content: "CLOSE";
	color: #f7f7f7;
	width: 100%;
	font-size: 1rem;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}
#btn_menu2:hover {
	background-color: #555;
}
#btn_menu2.active::before {
	opacity: 0;
}
#btn_menu2.active::after {
	opacity: 1;
}

2本のラインが回転して「×」になる

メニューボタンを押すと2本のラインが回転して「×」に切り替わり、もう一度押すと2本のラインに戻ります。

index.html

<a id="btn_menu3" class="btn_menu" href="#"></a>

style.css

// メニューボタン3
#btn_menu3 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu3::before {
	position: absolute;
	top: 35%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu3::after {
	position: absolute;
	bottom: 35%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu3:hover {
	background-color: #555;
}
#btn_menu3.active::before {
	top: calc(50% - 1px);
	transform: rotate(315deg);
}
#btn_menu3.active::after {
	bottom: calc(50% - 1px);
	transform: rotate(-315deg);
}

3本のラインが回転して「×」になる

メニューボタンを押すと3本のラインが回転して「×」に切り替わり、もう一度押すと3本のラインに戻ります。

MENU

index.html

<a id="btn_menu4" class="btn_menu" href="#"><span>MENU</span></a>

style.css

// メニューボタン4
#btn_menu4 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu4::before {
	position: absolute;
	top: 30%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu4::after {
	position: absolute;
	bottom: 30%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu4 span {
	position: absolute;
	top: calc(50% - 1px);
	left: 25%;
	display: block;
	overflow: hidden;
	width: 50%;
	height: 2px;
	color: #f7f7f7;
	opacity: 1;
	background-color: #f7f7f7;
	transition: opacity 0.1s ease;
}
#btn_menu4:hover {
	background-color: #555;
}
#btn_menu4.active span {
	opacity: 0;
}
#btn_menu4.active::before {
	top: calc(50% - 1px);
	transform: rotate(315deg);
}
#btn_menu4.active::after {
	bottom: calc(50% - 1px);
	transform: rotate(-315deg);
}

「MENU」が消えつつ、2本のラインが回転して「×」になる

メニューボタンを押すと「MENU」が消えつつ、2本のラインが回転して「×」に切り替わり、もう一度押すと元の表示に戻ります。

MENU

index.html

<a id="btn_menu5" class="btn_menu" href="#"><span>MENU</span></a>

style.css

// メニューボタン5
#btn_menu5 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu5::before {
	position: absolute;
	top: 30%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu5::after {
	position: absolute;
	bottom: 30%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu5 span {
	position: absolute;
	top: calc(50% - 12px);
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1rem;
	color: #f7f7f7;
	opacity: 1;
	transition: opacity 0.1s ease;
}
#btn_menu5:hover {
	background-color: #555;
}
#btn_menu5.active span {
	opacity: 0;
}
#btn_menu5.active::before {
	top: calc(50% - 1px);
	transform: rotate(315deg);
}
#btn_menu5.active::after {
	bottom: calc(50% - 1px);
	transform: rotate(-315deg);
}

「MENU」が「CLOSE」になる＆3本のラインが回転して「×」になる

メニューボタンを押すと「MENU」が「CLOSE」に切り替わることに加えて、3本のラインが回転して「×」に切り替わり、もう一度押すと元の表示に戻ります。

MENUCLOSE

index.html

<a id="btn_menu6" class="btn_menu" href="#"><span></span><span>MENU</span><span>CLOSE</span></a>

style.css

// メニューボタン6
#btn_menu6 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu6::before {
	position: absolute;
	top: 22%;
	left: 30%;
	display: block;
	content: "";
	width: 40%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu6::after {
	position: absolute;
	top: 48%;
	left: 30%;
	display: block;
	content: "";
	width: 40%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu6 span:nth-child(1) {
	position: absolute;
	top: 35%;
	left: 30%;
	display: block;
	width: 40%;
	height: 2px;
	opacity: 1;
	background-color: #f7f7f7;
	transition: opacity 0.1s ease;
}
#btn_menu6 span:nth-child(2) {
	position: absolute;
	bottom: 15%;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
	color: #f7f7f7;
	opacity: 1;
	transition: opacity 0.3s ease;
}
#btn_menu6 span:nth-child(3) {
	position: absolute;
	bottom: 15%;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
	color: #f7f7f7;
	opacity: 0;
	transition: opacity 0.3s ease;
}
#btn_menu6:hover {
	background-color: #555;
}
#btn_menu6.active span:nth-child(1) {
	opacity: 0;
}
#btn_menu6.active span:nth-child(2) {
	opacity: 0;
}
#btn_menu6.active span:nth-child(3) {
	opacity: 1;
}
#btn_menu6.active::before {
	top: calc(35% - 1px);
	transform: rotate(315deg);
}
#btn_menu6.active::after {
	top: calc(35% - 1px);
	transform: rotate(-315deg);
}

長さの違う2本のラインが回転して「×」になる

メニューボタンを押すと長さの違う2本のラインが回転して「×」に切り替わり、もう一度押すと2本のラインに戻ります。

index.html

<a id="btn_menu7" class="btn_menu" href="#"></a>

style.css

// メニューボタン7
#btn_menu7 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu7::before {
	position: absolute;
	top: 38%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu7::after {
	position: absolute;
	bottom: 38%;
	left: 25%;
	display: block;
	content: "";
	width: 35%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, bottom 0.1s ease, width 0.3s ease;
}
#btn_menu7:hover {
	background-color: #555;
}
#btn_menu7.active::before {
	top: calc(50% - 1px);
	transform: rotate(135deg);
}
#btn_menu7.active::after {
	width: 50%;
	bottom: calc(50% - 1px);
	transform: rotate(-135deg);
}

長さの違う3本のラインが回転して「×」になる

メニューボタンを押すと長さの違う3本のラインが回転して「×」に切り替わり、もう一度押すと2本のラインに戻ります。

MENU

index.html

<a id="btn_menu8" class="btn_menu" href="#"><span>MENU</span></a>

style.css

// メニューボタン8
#btn_menu8 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	background-color: #222;
	transition: background-color 0.3s ease;
}
#btn_menu8::before {
	position: absolute;
	top: 30%;
	left: 25%;
	display: block;
	content: "";
	width: 50%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu8 span {
	position: absolute;
	top: calc(50% - 1px);
	left: 25%;
	display: block;
	overflow: hidden;
	width: 35%;
	height: 2px;
	color: #f7f7f7;
	opacity: 1;
	background-color: #f7f7f7;
	transition: opacity 0.1s ease;
}
#btn_menu8::after {
	position: absolute;
	bottom: 30%;
	left: 25%;
	display: block;
	content: "";
	width: 20%;
	height: 2px;
	background: #f7f7f7;
	transform: rotate(0deg);
	transition: transform 0.3s ease, bottom 0.1s ease, width 0.3s ease;
}
#btn_menu8:hover {
	background-color: #555;
}
#btn_menu8.active::before {
	top: calc(50% - 1px);
	transform: rotate(135deg);
}
#btn_menu8.active span {
	opacity: 0;
}
#btn_menu8.active::after {
	width: 50%;
	bottom: calc(50% - 1px);
	transform: rotate(-135deg);
}

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

関連記事

前のページへ 一覧に戻る 次のページへ