Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1250"><nav class="footer-nav" aria-label="Footer sections"><a href="#studio" class="group"><span class="number">01 /</span><span class="main">Studio</span><span class="inner">Approach · Team</span><span class="plus" aria-hidden="true">+</span></a><a href="#work" class="group"><span class="number">02 /</span><span class="main">Work</span><span class="inner">Selected projects</span><span class="plus" aria-hidden="true">+</span></a><a href="#contact" class="group"><span class="number">03 /</span><span class="main">Contact</span><span class="inner">Start a conversation</span><span class="plus" aria-hidden="true">+</span></a></nav></div>CSS
.tbx-1250{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1250 *, .tbx-1250 *::before,.tbx-1250 *::after{box-sizing:border-box}
.tbx-1250{background:#111e25}.tbx-1250 .footer-nav{width:min(100%,309px);color:white;border-top:1px solid #48616b}.tbx-1250 .group{display:flex;align-items:center;gap:8px;min-height:49px;text-decoration:none;color:#f2f4f1;padding:6px 4px;border-bottom:1px solid #48616b}.tbx-1250 .number{font-size:9px;color:#85a7aa;flex:0 0 29px}.tbx-1250 .main{font-size:17px;font-weight:800;letter-spacing:-.035em;white-space:nowrap}.tbx-1250 .inner{color:#a3c6c2;font-size:9px;white-space:nowrap;min-width:0;flex:1;max-width:0;opacity:0;transform:translateX(-8px);overflow:hidden;transition:max-width .4s,opacity .3s,transform .4s}.tbx-1250 .plus{margin-left:auto;color:#b9c4c1;font-size:18px;transition:transform .38s}.tbx-1250 .group:is(:hover,:focus-visible) .inner{max-width:160px;opacity:1;transform:none;padding-left:5px}.tbx-1250 .group:is(:hover,:focus-visible) .plus{transform:rotate(45deg);color:#e7ae7f}
@media(prefers-reduced-motion:reduce){.tbx-1250 *, .tbx-1250 *::before, .tbx-1250 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Footer, Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。