Live Demo
PCはホバーまたはTab、スマートフォンは「サービス」をタップしてメニューを開いてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1030" aria-label="サービスナビのサンプル"><details><summary>サービス <span aria-hidden="true">⌄</span></summary></details><div class="tbx-1030__panel"><button type="button">Web制作 <span aria-hidden="true">↗</span></button><button type="button">運用サポート <span aria-hidden="true">↗</span></button><button type="button">制作実績 <span aria-hidden="true">↗</span></button></div></nav>
CSS
.tbx-1030{position:relative;width:226px;min-height:187px;font:650 13px/1.45 system-ui,sans-serif;color:#234459}
.tbx-1030 details{position:relative}
.tbx-1030 summary{display:flex;justify-content:space-between;align-items:center;width:226px;padding:12px 15px;border:1px solid #bdcedc;border-radius:6px;background:white;cursor:pointer;list-style:none}
.tbx-1030 summary::-webkit-details-marker{display:none}.tbx-1030 summary span{display:inline-block;transition:transform .25s ease}
.tbx-1030__panel{position:absolute;top:48px;left:0;right:0;padding:5px;background:#fff;border:1px solid #d5e0e8;border-radius:6px;box-shadow:0 12px 20px #162d3c1c;opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.tbx-1030 button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 10px;border:0;border-radius:4px;background:white;color:#254258;text-align:left;cursor:pointer}
.tbx-1030 button:is(:hover,:focus-visible){background:#e8f6f4;color:#126c7d}
.tbx-1030:is(:hover,:focus-within) .tbx-1030__panel,.tbx-1030 details[open]+.tbx-1030__panel{opacity:1;visibility:visible;transform:translateY(0)}
.tbx-1030:is(:hover,:focus-within) summary span,.tbx-1030 details[open] summary span{transform:rotate(180deg)}
.tbx-1030 :is(summary,button):focus-visible{outline:2px solid #855fc2;outline-offset:2px}
@media(hover:none){.tbx-1030 details:not([open])+.tbx-1030__panel{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.tbx-1030 summary span,.tbx-1030__panel{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
サービス一覧や商品カテゴリーのドロップダウン
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。