2022年11月20日(日)

CSSだけで開閉するツリー

• 0
• 0
• 5
• 9

Result

See the Pen
Untitled by kachibito (@kachibito)
on CodePen.

以前「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::bef...