Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1214"><nav class="tbx-1214-menu" aria-label="Project navigation"><a href="#tbx-1214-identity">01 Identity</a><a href="#tbx-1214-spaces">02 Spaces</a><a href="#tbx-1214-digital">03 Digital</a></nav><div class="tbx-1214-rail" aria-hidden="true"><span class="tbx-1214-tip tbx-1214-default">SELECT A TOPIC →</span><span class="tbx-1214-tip tbx-1214-a">VISUAL SYSTEMS / 12 PROJECTS</span><span class="tbx-1214-tip tbx-1214-b">INTERIORS / 08 PROJECTS</span><span class="tbx-1214-tip tbx-1214-c">INTERFACES / 16 PROJECTS</span></div></div>CSS
.tbx-1214{box-sizing:border-box}
.tbx-1214{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,125px);gap:16px;align-items:center;width:100%;min-height:182px;padding:14px;background:#f7f2e9;font-family:Arial,sans-serif;color:#42382d}.tbx-1214 *{box-sizing:border-box}.tbx-1214-menu{display:grid;gap:4px}.tbx-1214-menu a{display:block;padding:10px 6px;border-bottom:1px solid #b7a995;text-decoration:none;font-size:clamp(11px,2.8vw,15px);font-weight:800;color:#42382d;transition:padding-left .3s,background .3s;outline-offset:1px;white-space:nowrap}.tbx-1214-menu a:is(:hover,:focus-visible){padding-left:14px;background:#e8dfd0}.tbx-1214-rail{position:relative;display:grid;place-items:center;min-height:116px;border-left:2px solid #cc9a64;padding-left:12px}.tbx-1214-tip{position:absolute;left:12px;right:0;font-size:10px;line-height:1.7;letter-spacing:.05em;color:#77583b;font-weight:800;opacity:0;transform:translateY(9px);transition:opacity .24s,transform .3s}.tbx-1214-default{opacity:1;transform:none}.tbx-1214:has(.tbx-1214-menu a:is(:hover,:focus-visible)) .tbx-1214-default{opacity:0}.tbx-1214:has(.tbx-1214-menu a:nth-child(1):is(:hover,:focus-visible)) .tbx-1214-a,.tbx-1214:has(.tbx-1214-menu a:nth-child(2):is(:hover,:focus-visible)) .tbx-1214-b,.tbx-1214:has(.tbx-1214-menu a:nth-child(3):is(:hover,:focus-visible)) .tbx-1214-c{opacity:1;transform:translateY(0)}.tbx-1214-menu a:focus-visible{outline:2px solid #be7945}
@media (prefers-reduced-motion:reduce){.tbx-1214 *, .tbx-1214 *::before, .tbx-1214 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。