Vista de árbol minimalista en CSS puro
| Autor: | traceybaird |
|---|---|
| Views Total: | 8,493 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 5, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una vista de árbol CSS puro minimalista para presentar datos jerárquicos en una estructura de árbol. Sitúe el cursor sobre un nodo y resalte todos los nodos secundarios.
Uso básico
Cargue el Tree. CSS en la sección Head de la Página Web.
<link href="tree.css" rel="stylesheet">
Agregue datos jerárquicos a la vista de árbol utilizando listas HTML anidadas como sigue.
<ul class="tree"> <li><a>Parent 1</a></li> <li><a>Parent 2</a></li> <li> <a>Parent 3</a> <ul> <li> <a>1st Child of 3</a> <ul> <li><a>1st grandchild</a></li> <li><a>2nd grandchild</a></li> </ul> </li> <li><a>2nd Child of 3</a></li> <li><a>3rd Child of 3</a></li> </ul> </li> <li> <a>Parent 4</a> <ul> <li><a>Parent 4's only child</a></li> </ul> </li> </ul>
Eso es todo.
