Bu, orijinal olarak Martin Ivanov tarafından hazırlanan ve her klasörün "durumunu" ayarlamak için gizli onay kutularını ve bitişik kardeş kombinasyonlarını kullanan bir demo idi. Canlı demo o zamandan beri internetten düştü, bu yüzden, altında orijinal kodla birlikte bir kopyasını burada yayınlayacağım.
CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem İç içe Klasörler, No JS'ye bakın.
.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