Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1201" aria-label="サービス案内"><a href="#services" class="tbx-1201__link"><span class="tbx-1201__marker" aria-hidden="true"></span><strong>サービス案内</strong><small>OUR SERVICES</small></a><span class="tbx-1201__children" aria-hidden="true"><span>相談</span><span>制作</span><span>運用</span></span></nav>
CSS
.tbx-1201{box-sizing:border-box;width:258px;max-width:100%;padding:20px;background:#f8faf8;border:1px solid #dce6e0;border-radius:9px;font-family:system-ui;color:#234b3e}.tbx-1201__link{display:flex;gap:9px;align-items:center;color:inherit;text-decoration:none}.tbx-1201__marker{display:inline-block;width:10px;height:10px;background:#6baa87;transform:rotate(45deg);transition:transform .3s}.tbx-1201__link strong{font-size:15px}.tbx-1201__link small{font-size:8px;color:#6d9080;letter-spacing:.1em;margin-left:auto}.tbx-1201__children{display:flex;gap:17px;position:relative;margin-left:6px;padding:18px 0 0 16px;overflow:hidden;font-size:11px;color:#3f7962;opacity:.35;transition:opacity .35s}.tbx-1201__children::before{content:"";position:absolute;left:1px;top:0;height:100%;width:2px;background:#69ae83;transform:scaleY(0);transform-origin:top;transition:transform .43s}.tbx-1201__children>span{position:relative}.tbx-1201__children>span::before{content:"";position:absolute;height:1px;width:10px;top:7px;left:-15px;background:#69ae83;transform:scaleX(0);transform-origin:left;transition:transform .3s .16s}.tbx-1201:has(.tbx-1201__link:is(:hover,:focus-visible)) .tbx-1201__marker{transform:rotate(135deg)}.tbx-1201:has(.tbx-1201__link:is(:hover,:focus-visible)) .tbx-1201__children{opacity:1}.tbx-1201:has(.tbx-1201__link:is(:hover,:focus-visible)) .tbx-1201__children::before{transform:scaleY(1)}.tbx-1201:has(.tbx-1201__link:is(:hover,:focus-visible)) .tbx-1201__children>span::before{transform:scaleX(1)}.tbx-1201__link:focus-visible{outline:3px solid #51a174;outline-offset:4px}
@media (prefers-reduced-motion: reduce) {.tbx-1201,.tbx-1201 *,.tbx-1201::before,.tbx-1201::after,.tbx-1201 *::before,.tbx-1201 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Sitemap
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。