comparte el articulo 

Código listo para hacer un menú desplegable con XHTML y CSS

Actualizado el 05/10/2013 < > 14 Cometarios

Resumen: Menú emergente desarrollado exclusivamente con XHTML (o HTML) y CSS.

Con la finalidad de conseguir efectos visuales dinámicos y atractivos, los diseñadores en muchas oportunidades empleamos lenguajes propicios para ello, como Javascript, y en otras ocasiones recurrimos a animaciones, como Flash.

En sí mismo, esto no es ningún inconveniente. Sin embargo, la mayoría de los usuarios de internet cuentan con navegadores que, en pos de conseguir una mayor seguridad, bloquean muchos scripts. Otro de los inconvenientes que puede surgir, es relativo al peso de las animaciones hechas en Flash.

Por estas razones, hemos decidido mostrar un recurso muy podo empleado, y es la utilización de XHTML (o HTML) y CSS para la creación de menús complejos formados por varios submenús.

Así mismo, en lawebera.es también hemos publicado otros artículos sobre creación de menús, puedes encontrarlos aquí: diseño de menús ys submenús con CSS, menú desplegable con CSS y HTMLmenu rollover con CSS y una sola imagen.

Sub-utilización de las posibilidades de CSS

Una vez que hemos finalizado de aprender como ubicar unos contenedores en una página web y a darle las propiedades a los elementos que componen una página, creemos que ya sabemos todo lo relativo a este maravilloso lenguaje. Sin embargo, muchas de las etiquetas ni siquiera hemos aprendido para que sirven.

Esta sub-utilización hace que en muchas ocasiones recurramos a formas más complejas de desarrollo, cuando con el empleo de ciertas técnicas de los lenguajes que ya conocemos, se consiguen efectos muy similares y que resultan más compatibles con todos los navegadores, no requieren de instalación de plugins por parte de los usuarios ni hace ralentizar el acceso a la página.

Descripción de la técnica empleada para el desarrollo del menú

En forma somera, podríamos decir que se trata de la utilización de una etiqueta CSS poco usada por los desarrolladores: visibility. Esta etiqueta define solo si la capa o el objeto están visibles o no. Sus posibles valores son visible, hidden y collapse. La primera indica que el elemento marcado con este valor es visible, mientras que la segunda indica que el objeto no es visible. Collapse se emplea en tablas, por lo que la utilización en otro tipo de elementos es igual a hidden.

El truco con el que se desarrolla este menú consiste en ubicar un submenú que tenga la propiedad visibility con el valor hidden, y que cuando se pase el puntero del ratón por encima del botón ubicado encima del submenú, la propiedad visibility pase a visible a través de la utilización de la pseudoclase :hover, que hace que el elemento varíe en sus propiedades CSS en cuanto se pasa el puntero por encima.

Página de ejemplo

Para comprender completamente el funcionamiento de este tema, hemos creado una pequeña página web de ejemplo, la cual pueden descargar desde esta página. Así mismo pueden ver el resultado desde aquí: ver el menú desplegable de ejemplo.

Contenido:

  • Una carpeta contenedora llamada “menú”.
  • Un archivo HTML llamado “ejemplo.html”.
  • Un archivo CSS llamado “estilo.css”.
  • Una carpeta nombrada “img” conteniendo las imágenes empleadas en la página.

Contenido de la carpeta “img”:

  • 12 imágenes JPG
  • 5 imágenes PNG

Todo esto está comprimido en un archivo .rar que pesa 98.9 Kb, mientras que el contenido luego de descomprimir es de 153 Kb.

Tras la descarga, descomprimir el archivo, abrir la carpeta “menú” y ejecutar el archivo “ejemplo.html”. Para abrir los archivos HTML y CSS, puede emplearse un editor de texto plano.

Descripción del menú

Botones visibles

El menú está definido en el archivo HTML en las etiquetas <div> que tienen los siguientes identificadores y clases:

  • Id=”botonera” – Es la capa que contiene todos los botones del menú que siempre está visible.
  • class=”boton” – Cada uno de los cinco botones que componen el menú.
  • Listas no ordenadas. Cada uno de los ítems de las listas, es uno de los enlaces que componen los menús desplegables.

La parte que siempre está visible del menú, se define en el archivo CSS mediante:

  • #botonera, que contiene las propiedades de la capa contenedora de los botones.
  • .boton, que define las características de los botones visibles.
  • .boton:hover, que define el comportamiento de los botones visibles cuando pasamos el puntero por encima.
  • .boton a, para definir las características del texto con enlaces de los botones visibles.
  • .boton a:hover, igual que el anterior, pero cuando se pasa el puntero por encima.

Hasta aquí, todo es sencillo y normal. Se trata del desarrollo de un contenedor, unas capas flotantes a la izquierda (los botones), que tienen un texto enlazado en su interior, que se modifica cuando el puntero pasa por encima.

El “menú emergente”

El menú emergente no es más que unas capas no visibles que, cuando se pasa el puntero por el botón se hacen visibles. ¿Cómo es posible esto?

El concepto es bastante elemental y está dentro de las características fundamentales de las Hojas de Estilo en Cascada. Las características de los elementos se heredan. Esto quiere decir que un elemento contenido (hijo) dentro de otro, heredará las propiedades del elemento contenedor (padre).

Como habrán podido ver, dentro de cada uno de los botones aparece una serie de elementos: textos, enlaces, listas y una capa, sin identificador ni clase. Todos estos elementos, heredan las características del elemento padre (.boton), y todos los eventos que sucedan en él podrán tener consecuencias en los elementos hijos.

Veamos ahora como están descritos en el archivo CSS estos elementos dependientes de la clase .boton:

  • .boton div (cualquier div que se encuentre dentro de un elemento clase boton) – Esta capa, tiene como finalidad establecer las características de la “capa invisible” que contiene todos los demás elementos. No tiene identificador (que podría tenerlo) porque no es necesario identificarla.
  • .boton:hover div (igual que el anterior, pero cuando el puntero se encuentra sobre el botón o cualquiera de los elementos contenidos en él)
  • .boton ul (listas contenidas dentro de los elementos de clase boton)  - Se definen aquí las características de los elementos contenidos en las listas.
  • .boton li a (cada uno de los ítems de la lista con enlace)
  • .boton li a:hover (igual al anterior pero cuando el puntero pasa por encima)

Funcionamiento

  1. Para que la capa “invisible-visible” se ubique en la posición que se encuentra cuando pasamos el puntero por encima del botón, a la capa que se encuentra dentro del botón (.boton div) hay que asignarle una posición fija. Para que se posiciones exactamente debajo del botón (que es su padre), le fijamos un “position: relative”, con lo que los valores de top: y left: (que por no estar descriptos tienen valor 0). Si le diéramos un “position: absolute”, los valores de top y left serían respecto del body, con lo que sería muy complejo de ubicar las capas invisibles para diferentes resoluciones de pantalla.
  2. Cuando el puntero pasa por encima del botón, el div contenido en él (.boton div) adquiere el valor contenido dentro de “.boton:hover div”, que es donde se indica que la capa se hará visible. Pero si movemos el ratón hacia abajo y lo posamos sobre los elementos del menú emergente, la capa no desaparece. Esto se debe a que al definir la visibilidad en “.boton:hover div”, mientras el puntero se encuentre dentro del div mensionado o dentro de cualquier elemento “.boton”, esta capa será visible.

Y nada más. Como pueden apreciar, el funcionamiento de este menú está relacionado con elementos de CSS avanzado, pero que no son difíciles de entender. La forma más sencilla de entenderlo todo, es tomar los archivos, modificarlos y “jugar” con ellos para que podamos ir comprendiendo como funcionan y para que sirven cada uno de los elementos definidos.

Publicado el 30/04/2010, última actualización 05/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

14 Cometarios

  1. Daniel

    yo tengo un div que es mi pagina y dentro de el e heccho 3 divisiones 1 cabezera 2 centro donde van los botones 3 pie de pagina kiero saber si es posible dentro del div “centro” puedo meter botones en posiciones que yo kiero es mas yo ya tenog las posiciones en X y en Y pero nos e cual es el codigo css para ubircarlos de acuerdo a las cordenadas alguien me puede colaborar gracias saludos ^^

    Martes, 25 de mayo 2010

  2. Maquetación de páginas web: crear un menu horizontal con CSS

    [...] Menús y submenús con CSS, menú desplegable con CSS y menu desplegable con XHTML y CSS. [...]

    Miércoles, 9 de junio 2010

  3. Fsc. Xavier

    Muchas gracias por el aporte.
    Aproechando la oportunidad desearia preguntar algo. Si el menu en lugar de ser Horizontal fuera Vertical, habria forma alguna de hacer que al aparecer los SUBMenus, el resto de las opciones se desplazaran hacia abajo. Me refiero a forzar un efecto “cuña” donde las opciones del primer nivel estuvieran incialmente visibles, pero que al provocar la aparición del SUBMenu correspondiente, el resto de opciones se desplazaran hacia abajo, no quedano ocultas bajo el submenu? O pido algo demasiado complicado para hacerlo en CSS y debere acabar muriendo en Java…
    Gracias por vuestro tiempo.

    Sábado, 19 de junio 2010

  4. Verónica Milán

    Xavier, no sé si te he entendido bien, ¿te refieres a un acordeón tipo los que se hacen con JavaScript, pero con html y css puro?

    Como este ejemplo: http://jquery.bassistance.de/accordion/demo/

    Jueves, 24 de junio 2010

  5. Julio Cesar

    yo tengo un menu ya echo pero el problema es que cuando quiero que aparesca al centro de mi pagina no puedo siempre aparese en la parte superior isquierda probe con position pero es una estable osea si entro en una pc de mayor resolucion de pantalla no se vee bien ayudenme porfavor

    Lunes, 17 de enero 2011

  6. Andrés Fernández

    Hola Julio Cesar:
    Es muy difícil saber cual puede ser el problema que tienes con la maquetación de tu menú, ya que el origen de este tipo de inconveniente puede ser variado. Algunas posibilidades pueden ser dar posición relativa a la capa que contiene el menú para que se posicione respecto del elemento padre, o utilizar márgenes y rellenos en porcentaje. Pero francamente, sin conocer el código, no puedo aportarte mucho más.

    Lunes, 17 de enero 2011

  7. Fidel

    Hola

    ¿Os funciona con mozilla firefox?

    Gracias. Saludos

    Domingo, 6 de febrero 2011

  8. Andrés Fernández

    Hola Fidel. Fue desarrollado visualizándolo en Mozilla Firefox, así que funciona perfectamente. Un cordial saludo.

    Miércoles, 9 de febrero 2011

  9. fernando

    como puedo descargar estos archivos?? me los puedes enviar porfavor que no veo ningun link XD
    a noser que este medio ciego ajaja en todo caso, tu aporte esta super bueno >.<
    me sirvio para entender algunas cosas =P gracias

    Jueves, 19 de enero 2012

  10. Verónica Milán

    Fernando, puedes verlo en funcionamiento aquí:
    http://www.lawebera.es/ejemplos/menu-desplegable/ejemplo.html

    Y descargarlo desde aquí: http://www.lawebera.es/ejemplos/menu-desplegable/menu-desplegable.rar

    Está en el artículo pero es cierto que está muy escondido.

    Jueves, 2 de febrero 2012

  11. diego

    Hola a la comunidad la webera.es estoy siguiendo en estos días este importante proyecto que ustedes han creado , me parece de gran utilidad y sus ejemplos son fáciles de interpretar.
    Yo estoy diseñando una pagina web con fines de aprender cada día sobre este mundo de la programación de web. ¿ Quiero comentarles si los ejemplos que ustedes suben a qui a esta pagina. Puedo coger un menú que esta hecho.. para agregarlo a mi pagina con todo el respeto?

    Domingo, 13 de mayo 2012

  12. Verónica Milán

    Hola Diego,

    Claro, no hay problema, los ejemplos que están compartidos aquí puedes usarlos para tus proyectos si te ayudan ;)

    Gracias por preguntar de todas formas.

    Viernes, 18 de mayo 2012

  13. Albañil

    Muy buen aporte

    Lunes, 26 de noviembre 2012

  14. kepa

    Este sistema es más facil que el display block, display none..
    Gracias, me ha servido de mucho.
    Estaba adquiriendo un complejo de ladrillo.

    Domingo, 20 de octubre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras