Unidad 7. 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 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 CSS Designer.
  6. En el subpanel Fuentes pulsa el botón Agregar origen CSS y seleccionar la opción Definir en página.
  7. En el subpanel Selectores, pulsa el botón Añadir selector.
  8. En la caja de texto escribe #menu y pulsa la tecla Intro.
  9. En el subpanel Propiedades pulsa el icono de Texto.
  10. Establece las propiedades font-family, font-weight y font-size como se muestra.
  11. Pulsa el icono Fondo del subpanel Propiedades y establece las propiedades como se muestran en la imagen.
  12. Pulsa el icono Diseño del subpanel Propiedades y establece la propiedad heigth a 30px.
  13. Ya tenemos la regla completa. Vamos a crear una nueva regla en el mismo Diseñador de CSS.
  14. Asegúrate que <style> está seleccionado en el subpanel Fuentes.
  15. Pulsamos el botón Añadir selector del subpanel Selectores y en la caja de texto escribimos #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.
  16. En el icono Diseño del subpanel Propiedades, hemos establecido las propiedades width a 605px y en margin auto a izquierda y derecha:

    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.
  17. En el icono Texto, hemos cambiado la propiedad list-style-type a none, para que no se muestren las viñetas junto a los elementos.
  18. Hemos acabado con esta regla.
  19. Creamos una nueva regla, pulsamos Añadir selector del subpanel Selectores. En la caja de texto escribimos #menu li y pulsamos Intro.
  20. En el subpanel Propiedades, establecemos las siguientes: Line-height a 30px, Text-align a center: en el icono Diseño, establecimos width a 120px, height a 30px, margin a la derecha 1px y float a left.
  21. Creamos una nueva regla para los enlaces del menú, agregamos un nuevo selector, en la caja de texto escribimos #menu a y pulsamos Intro.
  22. En el subpanel Propiedades, con el icono Texto pulsado, ajustamos las propiedades Color a #CCC y Text-decoration a none, como se ve en la imagen.
  23. Con el icono Fondo estableceremos las imágenes de fondo de los elementos del menú, usaremos el archivo blackmenu_normal.png:
  24. Para acabar con esta regla, en el icono Diseño 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.
  25. Creamos una nueva regla para los enlaces del menú cuando tienen el cursor encima, agregando el selector #menu a:hover.
  26. En Texto, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen de fondo (background-image) a blackmenu_hover.png.
  27. Hemos acabado con esta regla.
  28. Creamos una nueva regla para los enlaces del menú cuando son pulsados, agregando el selector #menu a:active.
  29. En Texto, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen de fondo (background-image) a blackmenu_active.png.
  30. Hemos acabado con esta regla.

    Puedes probar la página (F12) o con 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.
  31. Creamos una nueva regla para el enlace pulsado, agregando el selector #menu .pulsada ,#menu .pulsada:hover (escríbelo en la caja de texto tal y como aparece aquí)..
  32. En Fondo, cambiamos la imagen de fondo (background-image) a blackmenu_pulsada.png.
  33. 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 ellas más adelante.


Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.