www.mtkn.jp

commit 34d2ae6484ab59c14dd3459538f5f7a4fc201c8a
parent a5fdd1271adfa14e69961d92aa68bcfbeb2ffd00
Author: Matsuda Kenji <info@mtkn.jp>
Date:   Sun,  1 Mar 2026 15:14:29 +0900

change class names

Diffstat:
M
content/computer/web_design/navbar.html
 | 
26
+++++++++++++-------------

1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/content/computer/web_design/navbar.html b/content/computer/web_design/navbar.html
@@ -22,7 +22,7 @@ nav {
 #home, .menu-item {
 	padding: 0.5rem;
 }
-#hamburger-toggle, #hamburger {
+#hamburger-checkbox, #hamburger {
 	display: none;
 }
 .menu-items {
@@ -48,7 +48,7 @@ nav {
 		z-index: 10;
 		transition: var(--transition-delay);
 	}
-	#hamburger-toggle:checked ~ .menu-items {
+	#hamburger-checkbox:checked ~ .menu-items {
 		transform: translateX(-100%);
 		transition: var(--transition-delay);
 	}
@@ -59,7 +59,7 @@ nav {
 		position: relative;
 		transition: var(--transition-delay);
 	}
-	#bar1, #bar2, #bar3 {
+	#hamburger-bar1, #hamburger-bar2, #hamburger-bar3 {
 		position: absolute;
 		width: var(--hamburger-width);
 		height: var(--hamburger-bar-width);
@@ -67,25 +67,25 @@ nav {
 		border-radius: calc(var(--hamburger-bar-width)/2);
 		transition: var(--transition-delay);
 	}
-	#bar2 {
+	#hamburger-bar2 {
 		top: calc(var(--hamburger-bar-width) + var(--hamburger-gap));
 	}
-	#bar3 {
+	#hamburger-bar3 {
 		top: calc(var(--hamburger-bar-width) * 2 + var(--hamburger-gap) * 2);
 	}
-	#hamburger-toggle:checked ~ label #bar1 {
+	#hamburger-checkbox:checked ~ label #hamburger-bar1 {
 		width: calc(1.41421356 * var(--hamburger-height));
 		transform-origin: center right;
 		transform: translateY(calc(var(--hamburger-bar-width)/-2)) rotate(-45deg);
 		transition: var(--transition-delay);
 	}
-	#hamburger-toggle:checked ~ label #bar2 {
+	#hamburger-checkbox:checked ~ label #hamburger-bar2 {
 		width: 0;
 		opacity: 0;
 		transform: translateX(var(--hamburger-width));
 		transition: var(--transition-delay);
 	}
-	#hamburger-toggle:checked ~ label #bar3 {
+	#hamburger-checkbox:checked ~ label #hamburger-bar3 {
 		width: calc(1.41421356 * var(--hamburger-height));
 		transform-origin: center right;
 		transform: translateY(calc(var(--hamburger-bar-width)/2)) rotate(45deg);
@@ -99,11 +99,11 @@ nav {
 <nav>
 	<a href="#" id="home">Home</a>
 	<div class="menu">
-		<input type="checkbox" id="hamburger-toggle">
-		<label for="hamburger-toggle" id="hamburger">
-			<div id="bar1"></div>
-			<div id="bar2"></div>
-			<div id="bar3"></div>
+		<input type="checkbox" id="hamburger-checkbox">
+		<label for="hamburger-checkbox" id="hamburger">
+			<div id="hamburger-bar1"></div>
+			<div id="hamburger-bar2"></div>
+			<div id="hamburger-bar3"></div>
 		</label>
 		<div class="menu-items">
 			<a href="#" class="menu-item">menu1</a>