Hoe OM - Boomaansig
Leer hoe om 'n boomaansig met CSS en JavaScript te skep.
Boom Uitsig
'n Boomaansig verteenwoordig 'n hiërargiese aansig van inligting, waar elke item 'n aantal subitems kan hê.
Klik op die pyl(e) om die boomtakke oop of toe te maak.
- Drank
- Water
- Koffie
- Tee
- Swart tee
- Wit Tee
- Groen tee
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
Boom Uitsig
Stap 1) Voeg HTML by:
Voorbeeld
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li><span
class="caret">Tea</span>
<ul
class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><span class="caret">Green Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Stap 2) Voeg CSS by:
Voorbeeld
/* Remove default bullets */
ul, #myUL {
list-style-type: none;
}
/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and
style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* Rotate the
caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with
JavaScript) */
.active {
display: block;
}
Stap 3) Voeg JavaScript by:
Voorbeeld
var toggler = document.getElementsByClassName("caret");
var i;
for
(i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click",
function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
Merkblokkie Boomaansig
In hierdie voorbeeld gebruik ons 'n "stembus" unicode in plaas van 'n karet: