Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1165" aria-label="セクションを選択"><a href="#intro"><i aria-hidden="true"></i><span>INTRO</span></a><a href="#work"><i aria-hidden="true"></i><span>OUR WORK</span></a><a href="#team"><i aria-hidden="true"></i><span>THE TEAM</span></a></nav>
CSS
.tbx-1165{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:175px;padding:16px 14px;background:#152c3e;border-radius:12px;font-family:system-ui,sans-serif}.tbx-1165 a{box-sizing:border-box;display:flex;align-items:center;gap:11px;min-height:30px;max-width:100%;color:#bbd2d9;text-decoration:none;font-size:10px;font-weight:850;letter-spacing:.09em;position:relative;padding:3px 9px 3px 4px;border-radius:7px;transition:background .3s}.tbx-1165 a i{display:block;flex-shrink:0;width:9px;height:9px;background:#8fa7af;border-radius:50%;box-shadow:0 0 0 0 #60d6c05d;transition:background .32s,box-shadow .32s,transform .32s}.tbx-1165 a span{position:relative;max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:max-width .38s cubic-bezier(.25,.8,.2,1),opacity .25s,color .25s}.tbx-1165 a:is(:hover,:focus-visible){background:#2a5060}.tbx-1165 a:is(:hover,:focus-visible) i{background:#70e1c9;transform:scale(1.12);box-shadow:0 0 0 5px #60d6c02a}.tbx-1165 a:is(:hover,:focus-visible) span{opacity:1;max-width:112px;color:#fff}.tbx-1165 a:focus-visible{outline:2px solid #70e1c9;outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1165, .tbx-1165 *, .tbx-1165::before, .tbx-1165::after, .tbx-1165 *::before, .tbx-1165 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Sidebar
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。