Laboratorio: listas con descripción en HTML

Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.

Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.

Los estilos son sencillos: todo estará contenido en una capa que tendrá posicionamiento relativo, para poder introducir los elementos en ella con posicionamiento absoluto y así tomen como referencia esta capa y no la página.

La lista estará contenida en otra capa con posicionamiento absoluto y top y left igual a cero. Dentro de cada elemento de la lista habrá un enlace, el cual ejecutará un script para cambiar a la descripción correspondiente, cuando se posicione el ratón sobre él. El selector hover mostrará los bordes del enlace menos el del lador derecho, para dar sensación de que se une con la caja de la descripción. En este caso me he encontrado con un problema con el IE (para variar) y es que no reconoce el color transparent para el borde, por lo que he tenido que sustituirlo por el padding para evitar que el enlace en el hover ocupe más debido al borde. Lo podría haber solucionado con color blanco, pero si existe una imagen de fondo (por ejemplo un degradado), se vería el borde blanco.

Las descripciones están contenidas en una capa, tienen el borde y el color de fondo igual que el enlace cuando está seleccionado y está todas situadas mediante posicionamiento absoluto en la esquina superior izquierda, y movidas a la derecha mediante el margen la misma longitud que tiene de ancho la lista. Para conseguir que el elemento de la lista y su descripción formen un mismo elemento (parezcan unidos), situamos la descripción a la misma altura que el elemento de la lista y con un z-index inferior, por lo que el elemento (que recordamos que no tiene borde derecho) tapará una parte del borde de la descripción, lo que hará que se unan los dos elementos y formen un único trazo.

Las capas para crear este efecto son las siguientes:

<div class="contenedor">
<div class="lateral">
<ul class="lateral">
<li><a id="pestana0" href="http://sentidoweb.com" onmouseover="mostrarPestana(0)">Sentido Web</a></li>
...
</ul>
</div>
<div id="ventana0" class="contenido"><img src="sentidoweb.png" alt="Sentido Web" /></div>
...
</div>

Y los estilos los siguientes:

div.contenedor {
position: relative;
}
div.lateral {
position: absolute;
z-index: 300;
top: 0px;
left: 0px;
}
div.contenido {
background: #008585;
position: absolute;
top: 0px;
left: 0px;
display: none;
margin: 0px 0px 0px 110px;
border: 2px solid #033E5B;
width: 200px;
height: 136px;
z-index: 100;
padding: 3px;
}
ul.lateral {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 110px;
}
ul.lateral li {
width: 100%;
margin: 0px;
}
ul.lateral li a {
display: block;
text-decoration: none;
color: #008585;
padding: 2px;
width: 100%;
z-index: -200;
margin: 0px;
font-family: Arial;
}
ul.lateral li a:hover {
color: #FFFFFF;
border: 2px solid #033E5B;
border-right: none;
padding: 0px;
background: #008585;
}
ul.lateral li a.lateral-seleccionado {
color: #FFFFFF;
border: 2px solid #033E5B;
border-right: none;
padding: 0px;
background: #008585;
}
div.contenido p {
color: #FFFFFF;
}
div.contenido li {
color: #FFFFFF;
}

El script que cambia las descripciones es de lo más sencillo: tenemos una variable que contiene el índice del elemento seleccionado, y cuando se quiere cambiar una descripción, la descripción anterior se oculta y se muestra la actual, a su vez el enlace anterior se deja como es por defecto y al actual se le pone un estilo que sea igual que cuando es hover.

var pestana = 0;
function mostrarPestana(pos) {
document.getElementById("ventana"+pestana).style.display = "none";
document.getElementById("pestana"+pestana).className = "";
pestana = pos;
document.getElementById("pestana"+pestana).className = "lateral-seleccionado";
document.getElementById("ventana"+pestana).style.display = "block";
}