Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1249"><nav class="tabs" aria-label="Editorial categories"><a href="#insights"><span class="num">01</span><span class="txt"><b>Insights</b><small>Perspectives & research</small></span><span aria-hidden="true">↗</span></a><a href="#projects"><span class="num">02</span><span class="txt"><b>Projects</b><small>Selected client work</small></span><span aria-hidden="true">↗</span></a><a href="#people"><span class="num">03</span><span class="txt"><b>People</b><small>Meet our team</small></span><span aria-hidden="true">↗</span></a></nav></div>CSS
.tbx-1249{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1249 *, .tbx-1249 *::before,.tbx-1249 *::after{box-sizing:border-box}
.tbx-1249{background:#e6e9ee}.tbx-1249 .tabs{width:min(100%,294px);background:#fafcff;border-left:2px solid #293f5f;box-shadow:0 10px 22px #2a3d5516}.tbx-1249 .tabs a{display:flex;align-items:center;gap:13px;padding:11px 15px;min-height:50px;border-bottom:1px solid #dbe2ea;color:#263a55;text-decoration:none;transition:background .3s,padding-left .3s}.tbx-1249 .tabs a:last-child{border-bottom:0}.tbx-1249 .num{font-size:9px;color:#8998a9;font-weight:700;align-self:start;margin-top:3px}.tbx-1249 .txt{flex:1;display:grid;gap:3px;min-width:0}.tbx-1249 .txt b{font-size:14px}.tbx-1249 .txt small{display:block;max-height:0;opacity:0;overflow:hidden;font-size:9px;color:#79889b;transition:opacity .28s,max-height .28s}.tbx-1249 a>span:last-child{font-size:14px;transform:translateX(-5px);opacity:0;transition:opacity .3s,transform .3s}.tbx-1249 a:is(:hover,:focus-visible){padding-left:21px;background:#e8f0f8}.tbx-1249 a:is(:hover,:focus-visible) .txt small{max-height:15px;opacity:1}.tbx-1249 a:is(:hover,:focus-visible)>span:last-child{transform:translateX(0);opacity:1}
@media(prefers-reduced-motion:reduce){.tbx-1249 *, .tbx-1249 *::before, .tbx-1249 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation, Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。