Service Column Focus Menu

Live Demo

マウスでホバーするかTabキーで対象にフォーカスしてください。

Source Code

必要なコードをコピーして実装に利用できます。

<div class="tbx-1274"><nav class="services" aria-label="サービス"><div class="links"><button type="button" class="l1">Brand strategy <span>↗</span></button><button type="button" class="l2">Web design <span>↗</span></button><button type="button" class="l3">Development <span>↗</span></button></div><div class="details" aria-hidden="true"><div class="default"><b>OUR SERVICES</b><p>Move across the menu to preview.</p></div><div class="d1"><b>01 / BRAND</b><p>Distinct identities with a clear voice.</p></div><div class="d2"><b>02 / DESIGN</b><p>Digital experiences for real people.</p></div><div class="d3"><b>03 / BUILD</b><p>Robust interfaces, ready to scale.</p></div></div></nav></div>

.tbx-1274{width:100%;min-height:218px;box-sizing:border-box;display:grid;place-items:center;padding:16px;background:#e9eced;color:#1b3743;font-family:system-ui,sans-serif}.tbx-1274 *{box-sizing:border-box}
.tbx-1274 .services{width:min(335px,100%);display:grid;grid-template-columns:1.05fr 1fr;background:white;box-shadow:0 10px 23px #2a42501d;min-height:176px;border:1px solid #d5dce0}.tbx-1274 .links{display:flex;flex-direction:column;padding:10px;border-right:1px solid #dfe4e5;justify-content:center}.tbx-1274 button{border:0;background:none;text-align:left;display:flex;justify-content:space-between;gap:5px;color:#476273;padding:11px 8px;cursor:pointer;font:600 10px system-ui;transition:background .25s,color .25s}
.tbx-1274 button span{transition:transform .25s}.tbx-1274 button:is(:hover,:focus-visible){background:#183f4f;color:white}.tbx-1274 button:is(:hover,:focus-visible) span{transform:translate(2px,-2px)}
.tbx-1274 .details{position:relative;display:grid;place-items:center;padding:13px;min-width:0;overflow:hidden}.tbx-1274 .details>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:16px;opacity:0;transform:translateY(9px);pointer-events:none;transition:opacity .25s,transform .25s}
.tbx-1274 .details .default{opacity:1;transform:none}.tbx-1274 .details b{font-size:10px;letter-spacing:.09em;color:#ca7960}.tbx-1274 .details p{font:400 12px/1.6 Georgia,serif;color:#355564;margin:7px 0}
.tbx-1274 .services:has(button:is(:hover,:focus-visible)) .details .default{opacity:0;transform:translateY(-8px)}
.tbx-1274 .services:has(.l1:is(:hover,:focus-visible)) .d1,.tbx-1274 .services:has(.l2:is(:hover,:focus-visible)) .d2,.tbx-1274 .services:has(.l3:is(:hover,:focus-visible)) .d3{opacity:1;transform:none}
.tbx-1274 :focus-visible{outline:3px solid #de9d66;outline-offset:-2px}
@media(max-width:365px){.tbx-1274 .links{padding:6px}.tbx-1274 button{font-size:9px;padding:12px 6px}.tbx-1274 .details>div{padding:10px}.tbx-1274 .details p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.tbx-1274 *{transition:none!important}}

How to Use

HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。

Use Case

Navigation, Corporate

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。

Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。

Reduced Motion：prefers-reduced-motion: reduce 対応。