commit a5fdd1271adfa14e69961d92aa68bcfbeb2ffd00
parent 47602fcc3c72316b2727e7eb91f22fd54a0168a0
Author: Matsuda Kenji <info@mtkn.jp>
Date: Sun, 1 Mar 2026 09:19:52 +0900
upgrade hamburger
Diffstat:
1 file changed, 44 insertions(+), 42 deletions(-)
diff --git a/content/computer/web_design/navbar.html b/content/computer/web_design/navbar.html
@@ -14,82 +14,82 @@ body {
}
nav {
display: flex;
+ padding: 1rem;
justify-content: space-between;
+ align-items: center;
background-color: #eaffff;
}
-nav a, nav label {
+#home, .menu-item {
padding: 0.5rem;
}
-.menu input, .menu label {
+#hamburger-toggle, #hamburger {
display: none;
}
-.menu {
+.menu-items {
display: flex;
}
@media (max-width: 480px) {
:root {
- --hamburger-width: 20px;
- --hamburger-height: 12px;
- --hamburger-bar-width: 2px;
- --hamburger-margin: 10px;
+ --hamburger-width: 32px;
+ --hamburger-bar-width: 4px;
+ --hamburger-gap: 3px;
+ --hamburger-height: calc(var(--hamburger-bar-width)*3 + var(--hamburger-gap)*2);
+ --transition-delay: 0.5s;
}
.menu {
- flex-direction: column;
- position: absolute;
- align-items: end;
- right: 0;
+ position: relative;
}
- .menu > a {
- display: none;
+ .menu-items {
+ padding: 1rem;
+ flex-direction: column;
+ position: fixed;
+ left: 100%;
background-color: #eaffff;
z-index: 10;
+ transition: var(--transition-delay);
}
- #hamburger-toggle:checked ~ a {
- display: inline;
+ #hamburger-toggle:checked ~ .menu-items {
+ transform: translateX(-100%);
+ transition: var(--transition-delay);
}
#hamburger {
- display: inline;
+ display: inline-block;
width: var(--hamburger-width);
height: var(--hamburger-height);
- margin: var(--hamburger-margin);
- padding: 0;
- transition: 0.5s;
+ position: relative;
+ transition: var(--transition-delay);
}
#bar1, #bar2, #bar3 {
position: absolute;
width: var(--hamburger-width);
- right: var(--hamburger-margin);
- height: 0;
- border: solid #5e5eea var(--hamburger-bar-width);
- border-radius: var(--hamburger-bar-width);
- transition: 0.5s;
+ height: var(--hamburger-bar-width);
+ background-color: #5e5eea;
+ border-radius: calc(var(--hamburger-bar-width)/2);
+ transition: var(--transition-delay);
}
#bar2 {
- top: calc(var(--hamburger-margin) + var(--hamburger-height) / 2);
+ top: calc(var(--hamburger-bar-width) + var(--hamburger-gap));
}
#bar3 {
- top: calc(var(--hamburger-margin) + var(--hamburger-height));
- }
- #hamburger-toggle:checked ~ #hamburger {
- width: var(--hamburger-height);
- transition: 0.5s;
+ top: calc(var(--hamburger-bar-width) * 2 + var(--hamburger-gap) * 2);
}
#hamburger-toggle:checked ~ label #bar1 {
width: calc(1.41421356 * var(--hamburger-height));
transform-origin: center right;
- transform: translateY(calc(var(--hamburger-bar-width)/-1.41421356)) rotate(-45deg);
- transition: 0.5s;
+ transform: translateY(calc(var(--hamburger-bar-width)/-2)) rotate(-45deg);
+ transition: var(--transition-delay);
}
#hamburger-toggle:checked ~ label #bar2 {
- width: var(--hamburger-height);
+ width: 0;
opacity: 0;
- transition: 0.5s;
+ transform: translateX(var(--hamburger-width));
+ transition: var(--transition-delay);
}
#hamburger-toggle:checked ~ label #bar3 {
width: calc(1.41421356 * var(--hamburger-height));
transform-origin: center right;
- transform: translateY(calc(var(--hamburger-bar-width)/1.41421356)) rotate(45deg);
- transition: 0.5s;
+ transform: translateY(calc(var(--hamburger-bar-width)/2)) rotate(45deg);
+ transition: var(--transition-delay);
}
}
@@ -97,7 +97,7 @@ nav a, nav label {
</head>
<body>
<nav>
- <a href="#">Home</a>
+ <a href="#" id="home">Home</a>
<div class="menu">
<input type="checkbox" id="hamburger-toggle">
<label for="hamburger-toggle" id="hamburger">
@@ -105,11 +105,13 @@ nav a, nav label {
<div id="bar2"></div>
<div id="bar3"></div>
</label>
- <a href="#">menu1</a>
- <a href="#">menu2</a>
- <a href="#">menu3</a>
- <a href="#">menu4</a>
- <a href="#">menu5</a>
+ <div class="menu-items">
+ <a href="#" class="menu-item">menu1</a>
+ <a href="#" class="menu-item">menu2</a>
+ <a href="#" class="menu-item">menu3</a>
+ <a href="#" class="menu-item">menu4</a>
+ <a href="#" class="menu-item">menu5</a>
+ </div>
</div>
</nav>
<h1>Navbar</h1>
