Crear un botón con menú desplegable con CSS3 y jQuery

En el tutorial de esta semana vamos a implementar un elemento que está muy presente hoy en día en muchos servicios w

eb, los botones que tienen un cuadro de opciones. La diferencia de este elemento con un elemento de un menú es que con el menú las opciones de despliegan automáticamente, cada vez que el mouse posa sobre el item, pero con los botones para que salga el cuadro hay que darle clic.

Estos botones los podemos ver en Facebook y Twitter específicamente, aunque en realidad ya está bien establecido su uso. Entonces, no se pierdan el tutorial para crear nuestro botón con menú desplegable con CSS3 y jQuery.

Nivel de dificultad: fácil-medio

Demo del tutorial

Archivos del tutorial

HTML

Para este tutorial lo que quiero es que veamos como implementar un botón con menú sencillo, por lo que al menos todavía carece de la opción de ocultarse automáticamente el menú cuando pierde el foco, todavía tenemos que darle clic al botón o al menú para cerrarlo. Entonces, en cuando a la estructura vemos que está el contenedor, y la segmentación del menú para que podamos tener el contenedor, el contenido, el título y las opciones en forma de lista.

CSS

Para nuestro botón definimos dos clases, la del botón, y la del estado seleccionado. Como no es un link no podemos usar :active para configurar el estado del botón cuando está presionado, así que usamos este estilo para hacerlo con jQuery

La flechita que aparece en el centro es indispensable para darle al usuario la indicación que es un menú que deriva del botón. Los estilos casi no se pueden modificar, a excepción del color.

Ahora, lo importante es diseñar el menú que se va a desplegar, y para eso necesitamos hacerlo absolute en la posición, lo demás es la definición de estilos generales, pero lo importante es la posición y el display en none.

Por último solo acomodamos la información que tenemos, no es nada especial, solo colores, márgenes exteriores e interiores y eliminación de viñetas.

jQuery

Para hacer esto más interesante vamos a crear un plugin en jQuery para implementar con la función botonMenu() cualquier botón que cumpla con la estructura del HTML que definimos arriba. Este código es el más básico para nuestro plugin. Lo que hace es crear el espacio para el plugin y luego con el each() recorremos todos los elementos en el sitio en busca de aquellos que tengan la función botonMenu(), para que de esa forma le aplique el código que vamos a definir en nuestra función mensaje().

Nuestra función usa funciones de children() para obtener la primera capa(#info) y toogle() para contraer y descontraer automáticamente nuestro cuadro de opciones. Necesitamos aplicar el estilo de .seleccionado para cuando aparece el menú, y para comprobar que está activo usamos hasClass(), ya que si lo tiene le quitamos el estilo y contraemos el menú, de lo contrario lo aparecemos y agregamos el estilo.

Por último si no saben como implementar su plugin basta mandarlo a llamar como una función del objeto, como cualquier otra función que tiene jQuery, sólo que ahora esta es de nosotros.

Notas

Como podemos ver la única forma de cerrar este menú es darle clic de nuevo al mismo, algo que obviamente como experiencia de usuario no es algo bueno, pero sirve como inicio para ver el funcionamiento de estos elementos de interfaz que están compuestos de varios elementos, en este caso, botón y menú.

Demo del tutorial

Archivos del tutorial