No se si el titulo que le puse a esta entrada sea el indicado, pero tiene que ver con listas de html y css, la idea es crear listas dentro de otra lista con distintos colores y formato, el resultado debe ser algo como la imagen de abajo, donde cada rectángulo representa un área que se puede modificar a nuestro gusto, sin afectar a los demás.
En este ejemplo utilizare listas “padre” <ul> </ul> que pueden tener “hijos” <li></li> y estos hijos a su ves pueden tener otro padre y ese padre puede tener mas hijos <li> y así consecutivamente, por eso se llaman listas anidadas. El uso que se le puede dar a esto es en los menús, estos menús pueden tener subcategorías y esas subcategorías pueden tener mas subcategorías.
Ejemplo:
<ul class="ul">
<li> Home
<ul>
<li>Sub 1 Home </li>
<li>Sub 1 Home </li>
</ul>
</li>
<li> Themes</li>
</ul> |
Resultado:
- Home
- Sub 1 Home
- Sub 1 Home
- Themes
Como podrán observar la categoría Home tiene un submenú ul y de la misma forma se pueden ir agregando mas submenús.
Bien, ahora para darle formato CSS a estas listas debemos definir una clase que le de estilo al primer padre y a sus hijos (ul y li), el nombre de la lista es .ul.
.ul li { list-style:none; color:#02A5C8; background:#FC9; width:365px; } |
Y en el html asignamos la clase .ul a nuestra lista
<ul class="ul"> <li>Home</li> <li>Contact</li> <li>About</li> </ul> |
Resultado:
Ahora, para darle color a los padres que estan dentro de los hijos del padre principal, debemos definirlo en nuestra hoja de estilos CSS de la siguiente forma y en orden.
.ul li { list-style:none; color:#02A5C8; background:#FC9; width:365px; } .ul li ul li{ list-style:none; color:#333; background:#eaeed2; width:280px; } |
Si se dan cuenta .ul li el primer rectángulo y los siguientes ul li son el rectángulo verde.
Código HTML
<ul class="ul">
<li>Home</li>
<li>
<ul>
<li>Home 2</li>
<li>Contact 2</li>
<li>About 2</li>
</ul>
</li>
<li>About</li>
</ul> |
Resultado:
Si queremos una tercer lista anidada se agregaría una nueva clase agregando otro ul li para indicarle a nuestro navegador que cuando encuentre 3 listas anidadas a la tercera le aplique este formato.
.ul li ul li ul li{ list-style:none; color:#fff; background:#BFE5FF; width:200px; } |
Ya para terminar les dejo el ejemplo con cuatro niveles que da como resultado el rectángulo de colores que puse al inicio. Tan solo guardan el código en un archivo html y lo abren con su navegador para que vean el resultado.
<HTML>
<HEAD>
<TITLE>Listas de colores con CSS by danielmd soycachanilla.com</TITLE>
<style type="text/css">
.ul li {
list-style:none;
color:#02A5C8;
background:#FC9;
width:365px;
}
.ul li ul li{
list-style:none;
color:#333;
background:#eaeed2;
width:280px;
}
.ul li ul li ul li{
list-style:none;
color:#fff;
background:#BFE5FF;
width:200px;
}
.ul li ul li ul li ul li{
list-style:none;
color:#333;
background:#FFC0C0;
width:120px;
}
</style>
</HEAD>
<BODY>
<ul class="ul">
<li> Home
<ul>
<li>Sub 1 Home </li>
<li>Sub 1 Home </li>
<li>
<ul>
<li>Sub 2 Home </li>
<li>Sub 2 Home </li>
<li>
<ul>
<li>Sub 3 Home </li>
<li>Sub 3 Home </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> Themes</li>
</ul>
</BODY>
</HTML> |
El resultado de usar este ejemplo es el siguiente:
Ahora si ustedes quieren dar otro formato a estas listas simplemente editan el CSS, yo lo hice de esta forma para que distinguiera cada sublista.
Y aquí termina este minitutorial, espero les sea de mucha utilidad 🙂