Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1285" aria-label="サンプルナビゲーション"><a href="#overview"><span class="tbx-1285__bar"></span><b>Overview</b><small>01</small></a><a href="#design"><span class="tbx-1285__bar"></span><b>Design</b><small>02</small></a><a href="#results"><span class="tbx-1285__bar"></span><b>Results</b><small>03</small></a></nav>
CSS
.tbx-1285{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:312px;max-width:100%;border:1px solid #e1e5e8;border-radius:10px;background:#f8f9fc;padding:5px;gap:3px;font-family:system-ui,sans-serif}
.tbx-1285 a{box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;min-width:0;text-decoration:none;display:flex;flex-direction:column;gap:3px;align-items:center;padding:16px 5px;color:#47566a;border-radius:7px;transition:color .3s}
.tbx-1285__bar{position:absolute;inset:0;z-index:-1;background:#334e73;transform:translateY(102%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.tbx-1285 b{font-size:12px;white-space:nowrap}.tbx-1285 small{font-size:10px;letter-spacing:.13em;color:#9a9fad;transition:color .3s}
.tbx-1285 a:hover,.tbx-1285 a:focus-visible{color:#fff}.tbx-1285 a:hover small,.tbx-1285 a:focus-visible small{color:#b9d7f0}
.tbx-1285 a:hover .tbx-1285__bar,.tbx-1285 a:focus-visible .tbx-1285__bar{transform:translateY(0)}
.tbx-1285 a:focus-visible{outline:3px solid #77a7cf;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.tbx-1285 a,.tbx-1285__bar,.tbx-1285 small{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Dashboard
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。