Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1286" aria-label="目次"><a href="#vision"><b>Our Vision</b><span class="tbx-1286__dots" aria-hidden="true"></span><small>01</small></a><a href="#work"><b>Selected Work</b><span class="tbx-1286__dots" aria-hidden="true"></span><small>02</small></a><a href="#team"><b>Team</b><span class="tbx-1286__dots" aria-hidden="true"></span><small>03</small></a></nav>
CSS
.tbx-1286{box-sizing:border-box;display:grid;width:295px;max-width:100%;gap:0;font-family:system-ui,sans-serif;border-block:1px solid #d6cbbc;background:#fffdf8;padding:4px 0}
.tbx-1286 a{box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:12px 4px;max-width:100%;text-decoration:none;color:#4b463d;transition:padding .3s,color .3s}
.tbx-1286 a+a{border-top:1px solid #eee7da}
.tbx-1286 b{font-size:13px;white-space:nowrap}.tbx-1286 small{flex:none;font-size:11px;color:#8e8271}
.tbx-1286__dots{flex:1;min-width:10px;height:2px;background:radial-gradient(circle,#c7aa78 1px,transparent 1.8px) left center/8px 2px repeat-x;opacity:.3;transform:scaleX(.35);transform-origin:left;transition:opacity .35s,transform .35s}
.tbx-1286 a:hover,.tbx-1286 a:focus-visible{padding-left:12px;color:#a15f37}
.tbx-1286 a:hover .tbx-1286__dots,.tbx-1286 a:focus-visible .tbx-1286__dots{opacity:1;transform:scaleX(1)}
.tbx-1286 a:focus-visible{outline:2px solid #af8a59;outline-offset:1px}
@media(prefers-reduced-motion:reduce){.tbx-1286 a,.tbx-1286__dots{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。