Unidad 6. Avanzado: Menú CSS

Objetivo

Vamos a crear el siguiente menú inspirado en el de Windows Vista, utilizando imágenes y CSS:

En la carpeta ejercicios\menuCSS encontrarás los archivos necesarios para crear este menú.

Observa que tienes las distintas imágenes que se muestran en los elementos del menú.

Nota: Para crear este menú utilizaremos propiedades CSS y elementos HTML que todavía no hemos visto. No vamos a entrar en detalles de cada uno, ya que esto lo haremos más adelante. Únicamente queremos ilustrar lo que podemos lograr con CSS.

Crear el menú

1. Desde el menú Archivo, haz clic en Abrir y busca el archivo menu.htm que encontrarás en la carpeta ejercicios\menuCSS.
   
   Observa que tenemos varios los distintos elementos del menú como párrafos distintos.
   
   Lo habitual es crear los menús a partir de listas. Por tanto vamos a convertirlo.
2. Selecciona los párrafos, y pulsa el botón para convertirlos en una lista.
3. Si te fijas en la barra de estado, verás una etiqueta <div>. Haz clic sobre ella.
   Ahora le vamos a signar un ID, para distinguirlo del resto de elementos que podría tener nuestra página.
4. En el desplegable ID de div, escribe menu.
   
   Vamos ahora a crear las reglas CSS para los distintos elementos.
5. En el Inspector de propiedades CSS, haz clic en el botón Nueva regla.
6. Elige el Tipo de selector ID, y como Nombre #menu, y pulsa Aceptar.
   
7. Ahora definimos las distintas propiedades. En la categoría Tipo hemos definido el aspecto del texto:
   
8. En Fondo hemos repetido la imagen fondo.png horizontalmente:
   
9. A parte, hemos cambiado en Cuadro, Height a 30px;.
10. Pulsamos Aceptar. ya tenemos esta regla completa.
11. Creamos una nueva regla a que afecte a la lista. Para ello elegimos el selector Compuesto #menu ul. Esto lo limita a las listas que estén dentro del elemento con ID menú, lo que evita que se aplique a otras listas que pudiésemos tener en nuestra página.
12. En la categoría Cuadro, hemos establecido las siguientes propiedades:
    
    Nota: Hemos puesto la propiedad Width (ancho) a un valor fijo, porque en nuestro caso tenemos 5 elementos que crearemos con tamaño concreto. Si añadimos o quitamos elementos, habría que variar este tamaño.
13. En Lista, hemos cambiado la propiedad list-style-type a none, para que no se muestren las viñetas junto a los elementos.
14. Hemos acabado con esta regla, pulsamos Aceptar.
15. Creamos una nueva regla para los elementos de la lista, empleando el selector Compuesto #menu li.
16. Hemos cambiado las siguientes propiedades: En la categoría Tipo, Line-height a 30px; en Bloque, Text-align a center; y en Cuadro, les hemos asignado un tamaño fijo (el de la imagen) como puedes ver en el siguiente gráfico:
    
17. Pulsamos Aceptar para guardar esta regla.
18. Creamos una nueva regla para los enlaces del menú, empleando el selector Compuesto #menu a.
19. En la categoría Tipo, ajustamos las propiedades Color a #CCC y Text-decoration a none.
20. En la categoría Fondo es donde estableceremos las imágenes de fondo de los elementos del menú:
    
21. Para acabar con esta regla, en Bloque establecemos la propiedad Display a block.
    
    Si lo pruebas, verás que se muestran los elementos en una línea y con la imagen de fondo. Ahora crearemos las reglas para que cambien según el estado del enlace.
22. Creamos una nueva regla para los enlaces del menú cuando tienen le cursor encima, empleando el selector Compuesto #menu a:hover.
23. En Tipo, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen de fondo (background-image) a blackmenu_hover.png.
24. Hemos acabado con esta regla, pulsamos Aceptar.
25. Creamos una nueva regla para los enlaces del menú cuando son pulsados, empleando el selector Compuesto #menu a:active.
26. En Tipo, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen de fondo (background-image) a blackmenu_active.png.
27. Hemos acabado con esta regla, pulsamos Aceptar.
    
    Puedes probar la página (F12) o con la Vista en vivo, y comprobar qué ocurre al pasar el ratón por un elemento y al hacer clic sobre él.
    
    Imaginemos que nuestro sitio tiene un menú como éste, repetido en cada página. Lo normal sería que el elemento que lleva a la página actual ya aparezca pulsado. Esto lo haremos creando una clase, y en cada página le daremos la clase al enlace correspondiente.
28. Creamos una nueva regla para el enlace pulsado, empleando el selector Compuesto #menu .pulsada ,#menu .pulsada:hover.
29. En Fondo, cambiamos la imagen de fondo (background-image) a blackmenu_pulsada.png.
30. Pulsa Aceptar.
31. Selecciona una etiqueta de enlace (a) y en el desplegable Clase del Inspector de propiedades HTML, asígnale la clase pulsada.

Crear un menú de este tipo es mucho más personalizable que crear una barra de navegación desde Dreamweaver, pero también requiere que conozcamos las propiedades CSS. Profundizaremos en ella más adelante.