Result
以前「CSSでフォルダツリーを作る」を書きましたが今回は開閉するタイプです。
お察しの通りですがdetailsタグで実装されています。
css
.tree { --spacing: 1.5rem; --radius: 10px;}.tree li { display: block; position: relative; padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);}.tree ul { margin-left: calc(var(--radius) - var(--spacing)); padding-left: 0;}.tree ul li { border-left: 2px solid #ddd;}.tree ul li:last-child { border-color: transparent;}.tree ul li::before { content: ""; display: block; position: absolute; top: calc(var(--spacing) / -2); left: -2px; width: calc(var(--spacing) + 2px); height: calc(var(--spacing) + 1px); border: solid #ddd; border-width: 0 0 2px 2px;}.tree summary { display: block; cursor: pointer;}.tree summary::marker,.tree summary::-webkit-details-marker { display: none;}.tree summary:focus { outline: none;}.tree summary:focus-visible { outline: 1px dotted #000;}.tree li::after,.tree summary::before { content: ""; display: block; position: absolute; top: calc(var(--spacing) / 2 - var(--radius)); left: calc(var(--spacing) - var(--radius) - 1px); width: calc(2 * var(--radius)); height: calc(2 * var(--radius)); border-radius: 50%; background: #ddd;}.tree summary::before { content: "+"; z-index: 1; background: #696; color: #fff; line-height: calc(2 * var(--radius) - 2px); text-align: center;}.tree details[open] > summary::before { content: "−";} |
調整が必要ですがネストが深くなっても動作しました。
html
<ul class="tree"> <li> <details open> <summary>Giant planets</summary> <ul> <li> <details> <summary>Gas giants</summary> <ul> <li>Jupiter</li> <li>Saturn</li> </ul> </details> </li> <li> <details> <summary>Ice giants</summary> <ul> <li>Uranus</li> <li>Neptune</li> </ul> </details> </li> </ul> </details> </li></ul> |
classは親のみ。
via
詳しい解説は以下をご参照下さい。
Tree views in css
