Ini adalah demo awalnya oleh Martin Ivanov, menggunakan kotak centang tersembunyi dan kombinator saudara yang berdekatan untuk mengatur "status" dari setiap folder. Demo langsungnya telah hilang dari internet, jadi saya akan memposting salinannya di sini, dengan kode asli di bawahnya.
Lihat Folder Bersarang Pena, Tidak Ada JS oleh Chris Coyier (@chriscoyier) di 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