Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1202" aria-label="管理メニュー"><a href="#dashboard" class="tbx-1202__item"><span class="tbx-1202__symbol" aria-hidden="true">▦</span><b>ダッシュボード</b><small>G</small></a><a href="#library" class="tbx-1202__item"><span class="tbx-1202__symbol" aria-hidden="true">◈</span><b>素材ライブラリ</b><small>L</small></a><a href="#settings" class="tbx-1202__item"><span class="tbx-1202__symbol" aria-hidden="true">⚙</span><b>設定</b><small>S</small></a></nav>
CSS
.tbx-1202{display:grid;width:245px;max-width:100%;background:#142c3b;border-radius:10px;padding:12px;box-sizing:border-box;gap:3px;font-family:system-ui}.tbx-1202__item{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;color:#e4f0f3;text-decoration:none;border-radius:5px;overflow:hidden;transition:background .25s}.tbx-1202__symbol{font-size:16px;color:#9bced0;width:21px;text-align:center}.tbx-1202__item b{font-size:12px;font-weight:650}.tbx-1202__item small{margin-left:auto;font-size:10px;width:18px;height:18px;display:grid;place-items:center;border:1px solid #9db2bd77;border-radius:4px;opacity:0;transform:translateX(12px);transition:transform .32s,opacity .32s}.tbx-1202__item:is(:hover,:focus-visible){background:#335769}.tbx-1202__item:is(:hover,:focus-visible) small{opacity:1;transform:translateX(0)}.tbx-1202__item:focus-visible{outline:2px solid #ffc981;outline-offset:-2px}
@media (prefers-reduced-motion: reduce) {.tbx-1202,.tbx-1202 *,.tbx-1202::before,.tbx-1202::after,.tbx-1202 *::before,.tbx-1202 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。