Tutoriales - Enlaces con Imágenes - Menus CSS. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...
\n";
}
}
}
lecturas();
Hacer menús con CSS y que el resultado final sea aparente suele requerir el uso de imágenes. Vamos a ver como posicionarlas.
Para formar los menús en lista, esto es, Imagen + Texto (enlace) + Salto de línea, se suele hacer utilizando las listas desordenadas de (X)HTML, sin embargo, desde un punto de vista semántico, esto no es correcto, del mismo modo que no es correcto maquetar con tablas.
Utilizando las listas desordenadas nos ahorramos (poco) trabajo, ya que incorporan el formato deseado (Imagen + Texto (enlace) + Salto de línea) por defecto. Para ello simplemente tendríamos que utilizar la propiedad de CSS list-style-image:
El resultado sería:
Antes decía que semánticamente no es correcto utilizar listas desordenadas de (X)HTML para hacer los menús, pero no solo no es correcto semánticamente, además es más limitado su ámbito funcional ¿Por qué? Por que las imágenes no pertenecen a la etiqueta del enlace (<a>), si no a la etiqueta de la lista (<li>), de modo que no podremos hacer un cambio de imagen en el evento hover, es decir, al pasar el ratón sobre el enlace.
La forma correcta y más funcional consiste simplemente en una sucesión de enlaces y añadirle las funcionalidades Imagen + Salto de Línea con CSS, dándole las imagenes a las etiquetas <a> y por lo tanto pudiendo manejarlas para el evento hover del link:
Los enlaces los metemos dentro de un div y le damos un identificador único (id) para poder aplicarle los estilos CSS y que solo le afecten a él.
Click aquí para ver el resultado final.
Como se ve, para provocar el salto de línea, le damos al enlace un display: block; es decir, le decimos al navegador que trate a ese elemento (enlace) como un elemento de bloque (generando un salto de línea antes de él, y otro tras él), y además le damos al enlace un width:100%; para que el comportamiento del display block se haga bien en Internet Explorer.
A continuación le damos al enlace un padding-left de 20px, con el objeto de posicionar en esos 20px a la izquierda la imagen, que tiene una anchura de 15px. Es importante entender la diferencia entre margin y padding, y para eso nada mejor que el tutorial sobre el modelo de cajas en CSS. Pero básicamente la diferencia consiste en que el padding deja un espacio dentro de la caja, mientras que el margin lo deja por fuera de la caja, tal y como se ve en la siguiente ilustración:
Diferencia entre el padding y el margin y como afecta al posicionamiento de la imagen.
Continuamos con la posición de la imagen (background:transparent url('/articulos/tutoriales/css/images/menu.jpg') 0px 4px no-repeat;). Tal y como está escrito quiere decir que, con fondo de color transparente, ubicamos la imagen que indica la ruta en las coordenadas (0, 4) indicando que la imagen no debe repetirse. Para entender como funcionan las coordenadas a la hora de posicionar, veamos la siguiente ilustración:
Sistema de coordenadas de las cajas de CSS de cara al posicionamiento de objetos.
Simpre que posicionamos un objeto (cualquier etiqueta de [X]HTML) en una caja (cualquier elemento de bloque [por defecto] o que lo convirtamos en elemento de bloque con la propiedad display:block; de CSS), se posicionará la coordenada 0px, 0px del objeto a posicionar sobre la coordenada indicada de la caja que lo contendrá. Para el objeto imagen (<img>) sobre la capa enlace (etiqueta <a> convertida a elemento de bloque con la propiedad display:block;) hemos dado un posicionamiento de 0px, 4px, es decir, la imagen se hubicará a 0px de la pared izquierda de la caja y a 4px de la pared superior de la caja:
Resultado final del posicionamiento de la imagen en la coordenada 0px, 4px.
El motivo de posicionar a 0px, 4px es para que la imagen quede a la misma altura del texto del enlace. Esa posición dependerá del tamaño de la caja y el tamaño de la imagen, luego habrá que probar diferentes coordenadas hasta que quede bien posicionado el objeto.
En las siguientes dos líneas de código CSS damos un margen de 4px por abajo y arriba respectivamente, simplemente para que queden más separados los enlaces y no den tanta sensación de apelotonamiento como en elejemplo previo (con listas desordenadas). Por último le damos un color a los enlaces y le quitamos el subrayado.
Para terminar, en el evento hover (al pasar el ratón por encima), le damos otro color al texto, y lo más importante, cambiamos la imagen por otra distinta en la misma posición. Esto no lo podíamos hacer en el ejemplo de las listas desordenadas, ya que en ese ejemplo, la imagen no pertenecía a la etiqueta del enlace (<a>) sino a la etiqueta de la lista (<li>) y en CSS, a diferencia de los lenguajes de programación (CSS es un lenguaje de marcado), no podemos manejar otros elementos desde el evento de uno dado.
La teoría para hacer menús con imágenes en CSS está ya explicada, veamos ahora un ejemplo, para hacer menús donde la imagen ocupa todo el background (toda la superficie) del enlace. Vamos a explicar como hacer el siguiente ejemplo: Ver ejemplo.
En este ejemplo hay una diferencia de base. Cuando en el evento hover del enlace se carga una imagen distinta, el navegador solicita la imagen al servidor, lo que conlleva una demora en la carga de la imagen, más aún si ésta es algo pesada. Una vez que la imagen del evento hover ya se ha solicitado por primera vez, en sucesivas ocasiones no se producirá esta demora. ¿Cómo evitar que esto suceda? bien, de acuerdo a lo explicado anteriormente sobre el posicionamiento, podríamos hacer algo distinto; podríamos hacer que las dos imágenes, la del evento hover y las de los eventos link y visited, sean la misma, y con CSS posicionar de una manera para unos eventos y de otra para el otro evento... algo lioso, veamos la imagen del menú:
Imagen utilizada en el menú. Una sola imagen que contiene las dos.
El código (X)HTML es exáctamente el mismo que el del ejemplo anterior (lo que demuestra la potencia y alcance de CSS):
Y el CSS es el siguiente:
Como se aprecia en el código, la imagen que se utiliza para los eventos de reposo del enlace y la usada para el evento hover, es la misma, con la diferencia de que en los eventos de reposo está posicionada en las coordenadas 0px, 0px y en el evento hover está en 0px, -32px.
Posicionamiento de la imagen en los distintos estados.
Jugando con el padding y el height, se ha dado al background del enlace una altura de 32px, teniendo en cuenta que la imagen mide 64px en total, posicionamos la imagen en la coordenada 0px, 0px para los eventos de reposo, visionando solo los primeros 32px de la imagen, y en la posición 0px, -32px para hover, mostrando así los 32px finales.
Con esto evitamos la demora de la carga para la imagen en el evento hover la primera vez que éste se produzca, pero hay que tener en cuenta que la imagen, aunque se cargue al principio completamente, esta pesa el dobre (dos imágenes en una) con lo que dependerá del peso total la conveniencia de utilizar dos imágenes distintas (como en el ejemplo anterior) o una sola (como en este ejemplo).
Añadir como dato anecdótico, que en CSS hay cuatro unidades de medida (px, pt, em, %) pero cuando el valor es de cero (0), no es obligatorio especificar la unidad de medida, lo que es lógico, ya que 0px es lo mismo que 0em, 0pt o 0%, cero es cero...
Un dato más... a la capa #elmenu se le ha dado un width (anchura) de 200px, ya que ese es el tamaño de la imagen.
