Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1189" aria-label="サンプルナビゲーション"><a href="#overview"><span>01</span>Overview<b aria-hidden="true">↗</b></a><a href="#work"><span>02</span>Our Work<b aria-hidden="true">↗</b></a><a href="#contact"><span>03</span>Contact<b aria-hidden="true">↗</b></a></nav>
CSS
.tbx-1189{box-sizing:border-box;width:259px;max-width:100%;padding:12px 18px;background:#edf2ec;border:1px solid #ccd8d0;font-family:system-ui,sans-serif}.tbx-1189 a{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:13px;min-height:40px;padding:7px 3px 10px;color:#244a43;font:760 14px system-ui;text-decoration:none;border-bottom:1px solid #cbd7ce;transition:padding .3s,color .3s}.tbx-1189 a:last-child{border-bottom:0}.tbx-1189 a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:#3d8a78;transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.25,.8,.2,1)}.tbx-1189 a span{font-size:9px;color:#8d9f94;letter-spacing:.1em}.tbx-1189 a b{margin-left:auto;font:18px system-ui;transform:translate(-6px,5px);opacity:0;transition:transform .3s,opacity .3s}.tbx-1189 a:is(:hover,:focus-visible){padding-left:9px;color:#13725c}.tbx-1189 a:is(:hover,:focus-visible)::after{transform:scaleX(1)}.tbx-1189 a:is(:hover,:focus-visible) b{opacity:1;transform:translate(0,0)}.tbx-1189 a:focus-visible{outline:2px solid #348a70;outline-offset:3px}
@media (prefers-reduced-motion:reduce) {.tbx-1189,.tbx-1189 *,.tbx-1189::before,.tbx-1189::after,.tbx-1189 *::before,.tbx-1189 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Menu
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。