lunes, 22 de septiembre de 2014

Menú Desplegable con CSS

Muchas formas de realizar un menú desplegable es utilizando javascript para realizar el despliegue, pero en este caso veremos como hacerlo utilizando solo CSS, totalmente sencillo.

Lo primero que necesitamos hacer es crear dos archivos uno será nuestro html que contendrá el menú en si con subitems, ya veremos como, y el otro archivo que necesitamos será el css que será el mas importante ya que en este aplicaremos todo el diseño de nuestro menú y es donde aplicaremos el comportamiento desplegable.

Bien mano a la obra: 

  1. Abrimos el archivo html y si usamos SublimeText ya sabemos que con solo escribir html y la tecla Tab se auto completa con todas las etiquetas necesarias inicialmente.
  2. Una vez hecho esto en el body colocamos la siguiente estructura:
    menu.png
    Bien expliquemos un poco: en la linea 7 se utiliza la etiqueta <ul> la cual es una lista que luego le daremos la forma de menú, luego cada ítem de nuestro menú se agrega a través de las etiquetas <li>, después en la linea 10 se inserta otra lista que será la que contendrá los subítems. Cada ítem tendrá un link al sitio o pagina que nosotros indiquemos en el href="" de cada etiqueta <a>. Entonces para sintetizar cada ítem será un enlace, y si ese ítem tiene subítems, estos estarán en una lista que se desplegará, por lo tanto nuestro menú será una lista superior que contendrá a los items generales.
  3. Bien en el head agregamos el link a nuestro archivo css y guardamos los cambios. Ahora abrimos el css y comencemos por darle estilo a los elementos del tipo "ul"(menú y submenús) y "li" (ítems):  
    Captura de pantalla de 2014-09-18 11:38:41.png
  4. Luego le damos estilo a los links del menu:
  5. Bueno hasta aquí todo lo que respecta al menú general, ahora le diremos que estilo tendrán los submenús:
     Captura de pantalla de 2014-09-18 11:58:15.png
  6. Ahora solo falta lo mas importante, hacer que nuestro menú tenga el efecto de despliegue:
    Captura de pantalla de 2014-09-18 12:10:51.png
    Expliquemos: utilizando ":hover" hicimos que cuando el mouse se posicione sobre el elemento éste tome las propiedades que están dentro del bloque, en este caso "display: block;" mostrando los ítems de los submenús uno bajo el otro.
  7. Ahora guardamos los cambios y si ven su menú en el navegador ya debe funcionar.
  8. Por último le damos un poco de sensibilidad:
    Captura de pantalla de 2014-09-18 12:17:25.png
    Mas adelante explicaré como aplicar responsive design con CSS. Espero les haya gustado, hasta pronto.

No hay comentarios.:

Publicar un comentario