Unidad 9. Ejercicio paso a paso: Menú con imágenes


Objetivo

Vamos a crear el siguiente menú inspirado en la barra de tareas de Windows Vista.

Para hacerlo, utilizaremos los archivos de imagen blackmenu_normal.png, blackmenu_hover.png, blackmenu_activa.png, blackmenu_fondo.png, que puedes encontrar en la carpeta ejercicios del curso. Si estás haciendo los ejercicios en otra carpeta, copia ahí las imágenes.

Ejercicio

  1. Abre el archivo menu.html creado en el tema anterior.
  2. Crea una división, con el ID menu3.
  3. Copia una lista <ul></ul> de los menús anteriores y pégala dentro de la división, quitándole el ID de la lista.
  4. Declara el selector #menu3, y como es el elemento contenedor del menú, le asignamos los estilos del texto (font-family: sans-serif; font-size: 13px; font-weight: bold;). Como va a contener elementos flotantes, el alto no se vería. Así que el damos el alto que queremos para el menú (height: 30px;), y la imagen de fondo, repetida en horizontal (background-image:url(blackmenu_fondo.png); background-repeat:repeat-x; background-position: center left;). Aunque no se verá, le vamos a dar un fondo negro (background-color:black;). Así, si las imágenes fallan, se podrá leer el texto, que será de color blanco.
  5. A la lista (#menu3 ul), le quitamos el padding (padding: 0;) y las viñetas ( list-style-type: none;). Los cinco elementos van a ser de 120px de ancho, separados entre ellos por 1px. Sabiendo esto, podemos calcular que el ancho total va a ser de 605 px, y se lo asignamos (width: 605px;). Al tener un ancho fijo, podemos centrarla horizontalmente dándole un margen lateral auto (margin: 0 auto;).
  6. A los elementos del menú (#menu3 li), le damos un estilo centrado (text-align: center;), flotante con un pequeño margen (float: left; margin: 0 1px 0 0;), el tamaño de las imágenes (height:30px; line-height:30px; width: 120px;) y la imagen del elemento normal (background-image:url(blackmenu_normal.png); background-repeat:repeat-x; background-position:center center;).
  7. El estilo del texto, se lo damos al enlace #menu3 a { color: #CCCCCC; text-decoration:none; display: block; height:100%;}.
  8. Cuando el cursor está encima, cambiamos la imagen #menu3 li:hover { background-image:url(blackmenu_hover.png); } y el color del texto #menu3 li:hover a { color: white; }.
  9. Y por último, cambiamos la imagen para la clase actual, que simulará el elemento pulsado. Para que no cambie, le damos el mismo estilo cuando el cursor esté encima #menu3 li.actual, #menu3 li.actual:hover { background-image:url(graficos/blackmenu_activa.png); }.
  10. Guarda la página.
    Inicio




    Página inicial  Cursos Informática Gratuitos