Como fazer - Visualização em árvore
Saiba como criar uma visualização em árvore com CSS e JavaScript.
Vista em Árvore
Uma visualização em árvore representa uma visualização hierárquica de informações, onde cada item pode ter vários subitens.
Clique na(s) seta(s) para abrir ou fechar os ramos da árvore.
- Bebidas
- Água
- Café
- Chá
- Chá preto
- Chá branco
- Chá verde
- Sencha
- Gyokuro
- Matchá
- Pi Lo Chun
Vista em Árvore
Etapa 1) Adicionar HTML:
Exemplo
<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>
Etapa 2) Adicionar CSS:
Exemplo
/* 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;
}
Etapa 3) Adicione JavaScript:
Exemplo
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");
});
}
Caixa de seleção em árvore
Neste exemplo, usamos um unicode "urna eleitoral" em vez de um acento circunflexo: