navbar.html (2990B)
1 +++ 2 date = '2026-02-27T21:02:51+09:00' 3 draft = false 4 title = 'Navbar' 5 +++ 6 <head> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <title>Navbar</title> 10 <style> 11 body { 12 margin: 0; 13 background-color: #ffffea; 14 } 15 nav { 16 display: flex; 17 padding: 1rem; 18 justify-content: space-between; 19 align-items: center; 20 background-color: #eaffff; 21 } 22 #home, .menu-item { 23 padding: 0.5rem; 24 } 25 #hamburger-toggle, #hamburger { 26 display: none; 27 } 28 .menu-items { 29 display: flex; 30 } 31 @media (max-width: 480px) { 32 :root { 33 --hamburger-width: 32px; 34 --hamburger-bar-width: 4px; 35 --hamburger-gap: 3px; 36 --hamburger-height: calc(var(--hamburger-bar-width)*3 + var(--hamburger-gap)*2); 37 --transition-delay: 0.5s; 38 } 39 .menu { 40 position: relative; 41 } 42 .menu-items { 43 padding: 1rem; 44 flex-direction: column; 45 position: fixed; 46 left: 100%; 47 background-color: #eaffff; 48 z-index: 10; 49 transition: var(--transition-delay); 50 } 51 #hamburger-toggle:checked ~ .menu-items { 52 transform: translateX(-100%); 53 transition: var(--transition-delay); 54 } 55 #hamburger { 56 display: inline-block; 57 width: var(--hamburger-width); 58 height: var(--hamburger-height); 59 position: relative; 60 transition: var(--transition-delay); 61 } 62 #bar1, #bar2, #bar3 { 63 position: absolute; 64 width: var(--hamburger-width); 65 height: var(--hamburger-bar-width); 66 background-color: #5e5eea; 67 border-radius: calc(var(--hamburger-bar-width)/2); 68 transition: var(--transition-delay); 69 } 70 #bar2 { 71 top: calc(var(--hamburger-bar-width) + var(--hamburger-gap)); 72 } 73 #bar3 { 74 top: calc(var(--hamburger-bar-width) * 2 + var(--hamburger-gap) * 2); 75 } 76 #hamburger-toggle:checked ~ label #bar1 { 77 width: calc(1.41421356 * var(--hamburger-height)); 78 transform-origin: center right; 79 transform: translateY(calc(var(--hamburger-bar-width)/-2)) rotate(-45deg); 80 transition: var(--transition-delay); 81 } 82 #hamburger-toggle:checked ~ label #bar2 { 83 width: 0; 84 opacity: 0; 85 transform: translateX(var(--hamburger-width)); 86 transition: var(--transition-delay); 87 } 88 #hamburger-toggle:checked ~ label #bar3 { 89 width: calc(1.41421356 * var(--hamburger-height)); 90 transform-origin: center right; 91 transform: translateY(calc(var(--hamburger-bar-width)/2)) rotate(45deg); 92 transition: var(--transition-delay); 93 } 94 } 95 96 </style> 97 </head> 98 <body> 99 <nav> 100 <a href="#" id="home">Home</a> 101 <div class="menu"> 102 <input type="checkbox" id="hamburger-toggle"> 103 <label for="hamburger-toggle" id="hamburger"> 104 <div id="bar1"></div> 105 <div id="bar2"></div> 106 <div id="bar3"></div> 107 </label> 108 <div class="menu-items"> 109 <a href="#" class="menu-item">menu1</a> 110 <a href="#" class="menu-item">menu2</a> 111 <a href="#" class="menu-item">menu3</a> 112 <a href="#" class="menu-item">menu4</a> 113 <a href="#" class="menu-item">menu5</a> 114 </div> 115 </div> 116 </nav> 117 <h1>Navbar</h1> 118 <p>よくあるナビゲーションバー。スクリーンの幅が狭くなるとハンバーガーになる。JavaScriptは使ってない。</p> 119 </body>