Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1225" aria-label="Exhibit sections"><a href="#demo-a"><span class="tbx-1225-index">01</span><strong>Collection</strong><em aria-hidden="true">↗</em></a><a href="#demo-b"><span class="tbx-1225-index">02</span><strong>Exhibitions</strong><em aria-hidden="true">↗</em></a><a href="#demo-c"><span class="tbx-1225-index">03</span><strong>Visit</strong><em aria-hidden="true">↗</em></a></nav>CSS
.tbx-1225{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1225{display:grid;align-content:center;min-height:200px;width:100%;padding:16px 28px;background:#1c2629;font-family:Arial,sans-serif}.tbx-1225 *{box-sizing:border-box}.tbx-1225 a{position:relative;display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #485659;color:#f0e9db;text-decoration:none;overflow:hidden;outline-offset:3px}.tbx-1225-index{width:25px;color:#d9bb77;font-size:10px;font-weight:800;transform:translateX(-25px);opacity:0;transition:transform .35s,opacity .3s}.tbx-1225 a strong{flex:1;font-size:clamp(14px,3vw,18px);font-weight:650;transform:translateX(-20px);transition:transform .36s}.tbx-1225 a em{font-size:20px;font-style:normal;opacity:.15;transform:translate(-6px,6px);transition:opacity .3s,transform .36s}.tbx-1225 a:is(:hover,:focus-visible) .tbx-1225-index{opacity:1;transform:translateX(0)}.tbx-1225 a:is(:hover,:focus-visible) strong{transform:none}.tbx-1225 a:is(:hover,:focus-visible) em{opacity:1;transform:none}.tbx-1225 a:focus-visible{outline:2px solid #d9bb77}
@media(prefers-reduced-motion:reduce){.tbx-1225 *, .tbx-1225 *::before,.tbx-1225 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation, Culture
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。