Ligzdotas un izvēršamas mapes CSS-triki

Sākotnēji šī bija Martin Ivanova demonstrācija, izmantojot slēptās izvēles rūtiņas un blakus esošos brāļu un māsu kombinatorus, lai iestatītu katras mapes “stāvokli”. Kopš tā laika tiešraides demonstrācija ir nokritusi no interneta, tāpēc es šeit ievietošu tā kopiju ar zem tā esošo oriģinālo kodu.

Skatiet Chris Coyier (@chriscoyier) Pen Nested Folders, No JS vietnē 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