CSSでハンバーガーメニュー

CSS Toggle

CSS Toggle

CSSでハンバーガーメニュー

JavaScript不使用でハンバーガーを食べるメニューを作る。

<input type="checkbox">を使用した例

cssの:toggle()疑似クラスを使用した例

2024-04-02時点、CSS Togglesは草案のため、ChromeでもFirefoxでも動作しません。このデモはJS-polyfillで動作させています。

実装を簡略化したコード: <input type="checkbox">を使用した例

<style>
div.hamburger {
	user-select: none;
	> input[type="checkbox"] {
		display: none;
		&:checked {
			& + nav {
				transform: translateX(0%);
			}
			& + nav + label {
				> div {
					&:nth-of-type(1) {
						animation-name: toggleHamburgerMenuClose1;
					}
					&:nth-of-type(2) {
						animation-name: toggleHamburgerMenuClose2;
					}
					&:nth-of-type(3) {
						animation-name: toggleHamburgerMenuClose3;
					}
				}
			}
		}
	}
	> nav {
		width: 100%;
		height: 100lvh;
		transform: translateX(-100%);
		transition: transform 0.3s;
		background-color: #1b2;
	}
	> label {
		width: 48px;
		height: 48px;
		background-color: #fff;
		border-radius: 5px;
		padding-top: 20px;
		padding-left: 11px;
		display: grid;
		grid-template-rows: 6px 6px 6px;
		grid-template-columns: 26px;
		> div {
			grid-area: 1/1/2/2;
			border-top: solid 2px #1b2;
			align-self: center;
			animation-duration: 0.3s;
			animation-fill-mode: forwards;
			&:nth-of-type(1) {
				animation-name: toggleHamburgerMenuOpen1;
			}
			&:nth-of-type(2) {
				animation-name: toggleHamburgerMenuOpen2;
			}
			&:nth-of-type(3) {
				animation-name: toggleHamburgerMenuOpen3;
			}
		}
	}
}
@keyframes toggleHamburgerMenuClose1 {
	0% {	transform: translateY(-10px) rotate(0deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(0px) rotate(45deg);	}
}
@keyframes toggleHamburgerMenuClose2 {
	0% {	opacity: 1;	}
	50% {	opacity: 1;	}
	50.1% {	opacity: 0;	}
	100% {	opacity: 0;	}
}
@keyframes toggleHamburgerMenuClose3 {
	0% {	transform: translateY(10px) rotate(0deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(0px) rotate(-45deg);	}
}
@keyframes toggleHamburgerMenuOpen1 {
	0% {	transform: translateY(0px) rotate(45deg); }
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(-10px) rotate(0deg);	}
}
@keyframes toggleHamburgerMenuOpen2 {
	0% {	opacity: 0;	}
	50% {	opacity: 0;	}
	50.1% {	opacity: 1;	}
	100% {	opacity: 1;	}
}
@keyframes toggleHamburgerMenuOpen3 {
	0% {	transform: translateY(0px) rotate(-45deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(10px) rotate(0deg);	}
}
</style>
<div class="hamburger">
	<input type="checkbox" id="toggleHamburgerMenu">
	<nav>コンテンツ</nav>
	<label for="toggleHamburgerMenu"><div></div><div></div><div></div></label>
</div>
実装を簡略化したコード: cssの:toggle()疑似クラスを使用した例

<style>
div.hamburger2 {
	toggle-root: toggleName;
	user-select: none;
	> nav {
		width: 100%;
		height: 100lvh;
		transform: translateX(-100%);
		transition: transform 0.3s;
		background-color: #1b2;
		&:toggle(toggleName) {
			transform: translateX(0%);
		}
	}
	> button {
		toggle-trigger: toggleName;
		&:toggle(toggleName) {
			> div {
				&:nth-of-type(1) {
					animation-name: toggleHamburgerMenuClose1;
				}
				&:nth-of-type(2) {
					animation-name: toggleHamburgerMenuClose2;
				}
				&:nth-of-type(3) {
					animation-name: toggleHamburgerMenuClose3;
				}
			}
		}
		width: 48px;
		height: 48px;
		background-color: #fff;
		border-radius: 5px;
		padding-top: 20px;
		padding-left: 11px;
		display: grid;
		grid-template-rows: 6px 6px 6px;
		grid-template-columns: 26px;
		> div {
			grid-area: 1/1/2/2;
			border-top: solid 2px #1b2;
			align-self: center;
			animation-duration: 0.3s;
			animation-fill-mode: forwards;
			&:nth-of-type(1) {
				animation-name: toggleHamburgerMenuOpen1;
			}
			&:nth-of-type(2) {
				animation-name: toggleHamburgerMenuOpen2;
			}
			&:nth-of-type(3) {
				animation-name: toggleHamburgerMenuOpen3;
			}
		}
	}
}
@keyframes toggleHamburgerMenuClose1 {
	0% {	transform: translateY(-10px) rotate(0deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(0px) rotate(45deg);	}
}
@keyframes toggleHamburgerMenuClose2 {
	0% {	opacity: 1;	}
	50% {	opacity: 1;	}
	50.1% {	opacity: 0;	}
	100% {	opacity: 0;	}
}
@keyframes toggleHamburgerMenuClose3 {
	0% {	transform: translateY(10px) rotate(0deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(0px) rotate(-45deg);	}
}
@keyframes toggleHamburgerMenuOpen1 {
	0% {	transform: translateY(0px) rotate(45deg); }
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(-10px) rotate(0deg);	}
}
@keyframes toggleHamburgerMenuOpen2 {
	0% {	opacity: 0;	}
	50% {	opacity: 0;	}
	50.1% {	opacity: 1;	}
	100% {	opacity: 1;	}
}
@keyframes toggleHamburgerMenuOpen3 {
	0% {	transform: translateY(0px) rotate(-45deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(10px) rotate(0deg);	}
}
</style>
<div class="hamburger2">
	<nav>コンテンツ2</nav>
	<button><div></div><div></div><div></div></button>
</div>
この記事は2024年4月当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。