Αυτό ήταν μια επίδειξη αρχικά από τον Martin Ivanov, χρησιμοποιώντας κρυφά πλαίσια ελέγχου και γειτονικούς συνδυασμούς αδελφών για να ορίσετε την «κατάσταση» κάθε φακέλου. Το ζωντανό demo έκτοτε έπεσε από το διαδίκτυο, οπότε θα δημοσιεύσω ένα αντίγραφο του εδώ, με τον αρχικό κωδικό κάτω από αυτό.
Δείτε τους Pen Nested Folders, No JS του Chris Coyier (@chriscoyier) στο 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