HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Ejercicio: darle estilo a una lista de definiciones HTML creando un menú con contenido navegable sólo con CSS

Un ejercicio en forma de reto creativo con el objetivo de demostrar las posibilidades de las hojas de estilos.

En el blog Webdesign de Tuts publicaron hace unos días una especie de desafío CSS, una prueba dentro de sus community projects.

La idea es que el autor del post propone un fichero HTML, con un contenido que no puede modificarse en ningún caso, y los lectores crean sus propios ficheros CSS para darle estilo a ese contenido. Es una excusa perfecta para que los amantes de las hojas de estilos practiquen con técnicas o ideas nuevas.

En esta ocasión, se propone darle estilo a una lista de definiciones, una estructura HTML difícil de ver por ahí:

<dl>
    <dt>Psdtuts+</dt>
    <dd>Adobe Photoshop Tutorials from Beginner to Advanced.</dd>
    <dt>Nettuts+</dt>
    <dd>Web development Tutorials, from Beginner to Advanced.</dd>
    <dt>Webdesigntuts+</dt>
    <dd>In-depth tutorials and articles on web design.</dd>
    <dt>Wptuts+</dt>
    <dd>A WordPress Website dedicated to WordPress training, tutorials, and WordPress videos.</dd>
</dl>

El elemento engloba la propia lista completa. Dentro de él, los elementos y “ representan cada uno de los términos y de sus correspondientes descripciones.

Yo ya he enviado mi propuesta. Quería probar a jugar con los combinator operators, que permiten tener más flexibilidad para la selección de elementos HTML sobre los que aplicar los estilos. En esta ocasión, yo he usado algunos operadores y selectores para mi ejercicio:

  • : para seleccionar los elementos “hermanos” de uno dado y poder estilizarlos por separado.
  • nth-child: para seleccionar elementos concretos de la estructura HTML.

Además, no he usado ninguna imagen. Los iconos están generados mediante el tipo de letra Font Awesome More, utilizando la propiedad content de CSS. Y los efectos visuales son todos mediante CSS3: transiciones, gradientes de color y sombras.

Con todo esto, he intentado recrear un menú de navegación que funciona mediante el evento “hover”: cuando el cursor del ratón pasa por encima de un item del menú, debajo se muestra su descripción.

Menú navegable mediante CSS Así es como se ve el resultado del ejercicio.

Las ideas principales de la implementación son:

  1. Los elementos “ son posicionados de forma absoluta en la parte superior.
  2. Los elementos ocupan todo el ancho y alto de la página. Inicialmente, todos tienen opacidad salvo el primero, que tiene opacidad 1. Mediante la propiedad z-index pueden ordenarse las capas para que se vea siempre el menú con los elementos “ por encima.
  3. Al detectar el evento “hover” en cada uno de los , se cambia la opacidad de todos los a y se pone a `1` la opacidad del siguiente elemento que aparezca en el HTML justo después del “ sobre el que está el ratón. Esto lo hago así:
dd{  
    display: block;  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    opacity: 0;  
}  
dd:nth-child(2){  
    opacity: 1;  
}  
dt:nth-child(3):hover dd{  
    opacity: 1;  
}  
dt:nth-child(5):hover dd{  
    opacity: 1;  
}  
dt:nth-child(7):hover dd{  
    opacity: 1;  
}

Pues nada, que estuve un ratín enredando con esto y quería publicarlo por si a alguien le interesa, porque todavía estás a tiempo de enviar tu propuesta al ejercicio, :)

Puedes ver el resultado y todo el código del ejercicio aquí: