Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1237"><nav class="rail" aria-label="Chapter navigation"><a href="#tb1237-one"><span>01</span><b>Overview</b></a><a href="#tb1237-two"><span>02</span><b>Approach</b></a><a href="#tb1237-three"><span>03</span><b>Examples</b></a></nav></div>CSS
.tbx-1237{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1237 * ,.tbx-1237 *::before,.tbx-1237 *::after{box-sizing:border-box}
.tbx-1237{background:#e7e8ef}.tbx-1237 .rail{display:flex;flex-direction:column;gap:5px;width:min(100%,250px);background:#fff;padding:12px;border-left:4px solid #677b9e;box-shadow:0 7px 17px #2d3d4e16}.tbx-1237 .rail a{height:41px;display:flex;align-items:center;gap:14px;color:#4d5a6a;text-decoration:none;border-radius:5px;padding:7px 12px;transition:background .3s,padding .3s}.tbx-1237 .rail a span{font:800 13px Georgia;color:#7886a3;letter-spacing:.04em}.tbx-1237 .rail a b{font-size:13px;letter-spacing:.02em;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transform:translateX(-9px);transition:all .32s}.tbx-1237 .rail a:is(:hover,:focus-visible){background:#314d76;padding-left:18px;color:white}.tbx-1237 .rail a:is(:hover,:focus-visible) span{color:#e7c490}.tbx-1237 .rail a:is(:hover,:focus-visible) b{max-width:140px;opacity:1;transform:translateX(0)}.tbx-1237 .rail a:focus-visible{outline:3px solid #c1844a;outline-offset:1px}
@media(prefers-reduced-motion:reduce){.tbx-1237 *, .tbx-1237 *::before,.tbx-1237 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation, Article
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。