Dit was een demo van Martin Ivanov, die verborgen selectievakjes en aangrenzende combinators van broers en zussen gebruikte om de "status" van elke map in te stellen. De live demo is sindsdien van het internet gevallen, dus ik zal er hier een kopie van posten, met de originele code eronder.
Zie de Pen geneste mappen, geen JS door Chris Coyier (@chriscoyier) op CodePen.
.css-treeview ul, .css-treeview li ( padding: 0; margin: 0; list-style: none; ) .css-treeview input ( position: absolute; opacity: 0; ) .css-treeview ( font: normal 11px "Segoe UI", Arial, Sans-serif; -moz-user-select: none; -webkit-user-select: none; user-select: none; ) .css-treeview a ( color: #00f; text-decoration: none; ) .css-treeview a:hover ( text-decoration: underline; ) .css-treeview input + label + ul ( margin: 0 0 0 22px; ) .css-treeview input + label + ul ( display: none; ) .css-treeview label, .css-treeview label::before ( cursor: pointer; ) .css-treeview input:disabled + label ( cursor: default; opacity: .6; ) .css-treeview input:checked:not(:disabled) + label + ul ( display: block; ) .css-treeview label, .css-treeview label::before ( background: url("icons.png.webp") no-repeat; ) .css-treeview label, .css-treeview a, .css-treeview label::before ( display: inline-block; height: 16px; line-height: 16px;, vertical-align: middle; ) .css-treeview label ( background-position: 18px 0; ) .css-treeview label::before ( content: ""; width: 16px; margin: 0 22px 0 0; vertical-align: middle; background-position: 0 -32px; ) .css-treeview input:checked + label::before ( background-position: 0 -16px; ) /* webkit adjacent element selector bugfix */ @media screen and (-webkit-min-device-pixel-ratio:0) ( .css-treeview ( -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; ) @-webkit-keyframes webkit-adjacent-element-selector-bugfix ( from ( padding: 0; ) to ( padding: 0; ) ) )
- This Folder is Closed By Default
- Ooops! A Nested Folder
- Look Ma - No Hands!
- First Nested Item
- Second Nested Item
- Third Nested Item
- Fourth Nested Item
- Item 1
- Item 2
- Item 3
- Yet Another One
- item
- item
- item
- item
- item
- item
- item
- item
- Disabled Nested Items
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- This One is Open by Default…
- And Contains More Nested Items…
- Look Ma - No Hands
- Another Item
- And Yet Another
- Lorem
- Ipsum
- Dolor
- Sit Amet
- Can You Believe…
- That This Treeview…
- Does Not Use Any JavaScript…
- But Relies Only
- On the Power
- Of CSS3
- Item 1
- Item 2
- Item 3
- This is a Folder With…
- Some Nested Items…
- Some Nested Items…
- Some Nested Items…
- Some Nested Items…
- Some Nested Items…
- Disabled Nested Items
- item
- item
- item
- item
- item
- item
- item
- item