Unidad 9. Imágenes (IX)

9.9. Menú desplegable

También vamos a crear un menú desplegable, con las distintas categorías, que se muestre sólo al poner el cursor sobre la pestaña Flores.

Abre la página del sitio de ejemplo, flores/silvestres.html.

La pestaña Flores, tiene el siguiente código:

<li class="activa"><a href="index.html">Flores</a></li>

Nota: Puede que tengas el enlace como ../flores/index.html. Funcionaría igual.

Lo que vamos a hacer, dentro del elemento, pero después del enlace, crear una nueva lista, con enlaces a las cuatro categorías, asignando la clase activa a la correspondiente en cada caso:

  <li class="activa"><a href="../flores/index.html">Flores</a>
    <ul>
      <li><a href="exoticas.html">Ex&oacute;ticas</a></li>
      <li><a href="ornamentales.html">Ornamentales</a></li>
      <li><a href="plantas.html">Plantas</a></li>
      <li class="activa"><a href="silvestres.html">Silvestres</a></li>
    </ul>
  </li>

No necesitamos asignarle una clase o un ID, ya que como es una lista dentro del menú, podemos utilizar el selector #menu ul.

Para seguir con el diseño, utilizaremos imágenes que simulen botones. En este caso los vamos a hacer de 106 x 30 px para que nos quepa el texto más largo. Utilizando Inkscape, y en el mismo documento que creamos las pestañas, dibujamos un rectángulo (con la herramienta Crear rectángulos y cuadrados ) con los bordes redondeados, y el mismo grosor de borde que en las pestañas.

Como son tres copias, tenemos que crear tres, duplicándolo dos veces (Ctrl + D).

Les vamos a dar el mismo estilo que a las pestañas. Para eso, asígnale un degradado tanto al borde como al relleno. Al hacerlo, verás que en la lista desplegable de los degradados, puede seleccionar cualquiera de los utilizados en el documento. Eso sí, el degradado aparece horizontal, tendrás que cambiarlo a vertical.

Estas son las tres imágenes que hemos creado:

Les hemos llamando, respectivamente, submenu_normal.png, submenu_hover.png y submenu_activa.png.

Ahora, le damos el estilo al menú, teniendo en cuenta que a sus elementos se les está aplicando el mismo estilo que a las pestañas:

A la lista (#menu ul), le vamos a reducir un poco el texto (font-size: 90%;). Como siempre, le quitamos el padding (padding: 0;), margen (margin:0;) y las viñetas (list-style-type: none;).

Ahora, vamos con los elementos (#menu ul li). Le damos el tamaño ( height: 30px; line-height: 30px; width: 108px;) y la imagen utilizada (background-image: url(imagenes/submenu_normal.png); background-position: center center; background-repeat: no-repeat;). La pestaña (en nuestro caso) mide 88 px de ancho, mientras que el submenú 108 px. Para que quede centrado, debemos de desplazarlo 10 px a la izquierda, por ejemplo con un margen negativo (margin: 2px 0 0 -10px;).

Cambiamos la imagen de fondo cuando el cursor esté encima (#menu ul li:hover { background-image: url(imagenes/submenu_hover.png); }) y cuando esté activo #menu ul li.activa ({ background-image: url(imagenes/submenu_activa.png); }).

Si lo probamos, veremos que hay que cambiar varias cosas. Por ejemplo, el color del texto siempre es el más oscuro. Esto lo causa el estilo #menu li:activa a. Para solucionarlo, en cada selector que establece el color, debemos de añadir también el selector del submenú con la clase activa. Y lo mismo pasaría cuando la pestaña Flores no es la activa pero tienen le cursor, que todos los textos se verían naranja. Así, cambiamos #menu a por #menu a, #menu li.activa ul a, #menu li:hover ul a, cambiamos #menu li:hover a por #menu li:hover a, #menu li.activa li:hover a, #menu li:hover li:hover a, y cambiamos #menu li.activa a por #menu li.activa a, #menu li.activa li.activa.

Por otro lado, podemos ver que el texto queda por encima del submenú:

Eso pasa porque se ve por encima el elemento que está "escrito" en último lugar, y el menú está antes que el texto. Para solucionarlo, basta con darle posicionamiento a los elementos (#menu ul li), ya que los elementos posicionados se muestran por encima del flujo normal. Para que no se altere nada, utilizamos el relativo (position: relative;). Si lo pruebas, verás que funciona, pero sólo porque los elementos que lo taparían no tienen también posicionamiento. Para evitar que pueda ser tapado por elementos con posicionamiento, utilizaremos la propiedad z-index, por ejemplo con un valor 10 (z-index: 10). Esto hace que se muestre por encima de cualquier elemento sin z-index, o con z-index menor que 10. Esta propiedad sólo funciona en elementos posicionados.

 

Ahora, tendríamos que hacer que el menú se despliegue y se oculte, pero no podemos hacerlo con lo que hemos visto ahora, necesitamos Javascript, por lo que lo veremos en el tema siguiente. De momento, deja el menú sólo en la página flores/silvestres.html. Ya lo pondremos en el resto cuando esté acabado.

 

Puedes ver el aspecto de una página de nuestro sitio con lo visto hasta ahora pulsando aquí.