Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1238"><nav class="menu" aria-label="Services menu"><a class="parent" href="#tb1238"><small>OUR EXPERTISE</small><b>Services <span aria-hidden="true">→</span></b></a><div class="child"><a href="#tb1238-a">Strategy <b>01</b></a><a href="#tb1238-b">Design <b>02</b></a><a href="#tb1238-c">Development <b>03</b></a></div></nav></div>CSS
.tbx-1238{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1238 * ,.tbx-1238 *::before,.tbx-1238 *::after{box-sizing:border-box}
.tbx-1238{background:#e7f0eb}.tbx-1238 .menu{width:min(100%,302px);height:162px;display:flex;overflow:hidden;border-radius:8px;box-shadow:0 12px 24px #224d3820;background:#fff}.tbx-1238 .parent{flex:0 0 57%;min-width:0;background:#225449;color:#fff;text-decoration:none;display:grid;align-content:center;gap:16px;padding:16px;transition:flex-basis .4s}.tbx-1238 .parent small{font-size:9px;letter-spacing:.12em;color:#b5dace;font-weight:800}.tbx-1238 .parent b{font-size:19px;white-space:nowrap}.tbx-1238 .parent b span{font-size:15px;margin-left:5px}.tbx-1238 .child{display:grid;align-content:center;gap:3px;min-width:0;flex:1;padding:12px 9px}.tbx-1238 .child a{display:flex;gap:5px;justify-content:space-between;color:#356254;text-decoration:none;white-space:nowrap;overflow:hidden;font-size:11px;padding:7px 6px;border-radius:3px;opacity:.35;transform:translateX(9px);transition:background .3s,transform .35s,opacity .35s}.tbx-1238 .child a b{font-size:9px;color:#97a99d}.tbx-1238 .menu:is(:hover,:focus-within) .parent{flex-basis:49%}.tbx-1238 .menu:is(:hover,:focus-within) .child a{opacity:1;transform:translateX(0)}.tbx-1238 .child a:is(:hover,:focus-visible){background:#e3f0e9}.tbx-1238 a:focus-visible{outline:2px solid #e7a455;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.tbx-1238 *, .tbx-1238 *::before,.tbx-1238 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation, Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。