Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1297" aria-label="Sections"><a href="#section"><em>01</em><span>Profile</span><b>↗</b></a><a href="#section"><em>02</em><span>Works</span><b>↗</b></a><a href="#section"><em>03</em><span>Contact</span><b>↗</b></a></nav>CSS
*{box-sizing:border-box}
.tbx-1297{width:295px;max-width:100%;display:flex;flex-direction:column;background:#faf8f4;border:1px solid #d6d3cd;color:#282d2c;font-family:system-ui,sans-serif;border-radius:7px;padding:9px 14px}.tbx-1297 a{position:relative;display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;border-bottom:1px solid #dbded9;padding:9px 5px;height:42px;transition:padding .33s,color .33s;background:transparent}.tbx-1297 a:last-child{border:0}.tbx-1297 a::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px;background:#d87557;transform:scaleY(0);transition:transform .3s}.tbx-1297 em{font:normal 10px system-ui,sans-serif;color:#78948a}.tbx-1297 span{font-size:15px;font-weight:690;flex:1}.tbx-1297 b{font-size:15px;opacity:.15;transition:opacity .25s,transform .3s}.tbx-1297 a:hover,.tbx-1297 a:focus-visible{padding-left:16px;color:#c15a3b}.tbx-1297 a:hover::before,.tbx-1297 a:focus-visible::before{transform:scaleY(1)}.tbx-1297 a:hover b,.tbx-1297 a:focus-visible b{opacity:1;transform:translate(3px,-2px)}.tbx-1297 a:focus-visible{outline:2px solid #dc9f7f;outline-offset:1px}
@media (prefers-reduced-motion:reduce){.tbx-1297 *,.tbx-1297::before,.tbx-1297::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。