Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1226" aria-label="Article contents"><span class="tbx-1226-kicker">IN THIS ARTICLE</span><a href="#part-1"><span>Design principles</span><small>04 MIN</small></a><a href="#part-2"><span>Accessibility</span><small>06 MIN</small></a><a href="#part-3"><span>Performance</span><small>03 MIN</small></a></nav>CSS
.tbx-1226{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1226{display:grid;align-content:center;gap:1px;min-height:200px;width:100%;padding:19px 24px;background:#f3f0e8;font-family:Arial,sans-serif}.tbx-1226 *{box-sizing:border-box}.tbx-1226-kicker{color:#9a6742;font-size:10px;font-weight:850;letter-spacing:.22em;margin-bottom:9px}.tbx-1226 a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 9px;text-decoration:none;color:#34404a;border-bottom:1px solid #d5cfc4;outline-offset:2px;transition:background .34s,padding-left .34s}.tbx-1226 a span{font-size:13px;font-weight:720}.tbx-1226 a small{font-size:9px;white-space:nowrap;letter-spacing:.08em;color:#9a6742;opacity:0;transform:translateX(-7px);transition:transform .34s,opacity .34s}.tbx-1226 a:before{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#a46c43;transform:scaleX(0);transform-origin:left;transition:transform .37s}.tbx-1226 a:is(:hover,:focus-visible){background:#ebe4d9;padding-left:17px}.tbx-1226 a:is(:hover,:focus-visible):before{transform:scaleX(1)}.tbx-1226 a:is(:hover,:focus-visible) small{opacity:1;transform:none}.tbx-1226 a:focus-visible{outline:2px solid #a46c43}
@media(prefers-reduced-motion:reduce){.tbx-1226 *, .tbx-1226 *::before,.tbx-1226 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Blog, Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。