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月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy