Cómo crear una lista deplegable con CSS y jQuery

HTML nos proporciona de forma nativa la posibilidad de implementar una lista desplegable para usarla en formularios, sin embargo no es muy fácil de añadirle estilos, y de hecho programarlo resulta en mi caso algo tedioso porque en realidad cada elemento no es independiente, por lo que no se puede controlar uno por uno.. Por eso creo que en este tipo de casos es siempre mejor construir su elemento a gusto y eso vamos a hacer en este tutorial.

A continuación vamos a ver cómo construir una lista desplegable usando CSS y jQuery, y verán que la implementación es sumamente sencilla, no se necesitan tantos conocimientos, sólo la imaginación para diseñarlo a nuestro gusto.

Ejemplo del tutorial

HTML

Para configurar nuestra lista desplegable tenemos que usar un contenedor, un span para cambiar el texto por la opción seleccionada y una lista que serán las opciones a elegir.

CSS

Necesitamos diseñar la lista desplegable. Primero, hay que saber que la lista desplegable debe estar oculta, y que debe tener una posición absoluta, ya que de lo contrario si se desplegara todo el contenido de abajo de la lista se desplazaría, y lo que querríamos es que la lista se sobrepusiera. La flecha la ponemos como fondo para no interferir en la estructura.

La clase “activo”  nos sirve para desplegar la lista y que se desaparezca de la misma forma, pero eso lo vamos a ver con jQuery.

jQuery

Para desplegar nuestra lista basta con un evento para cuando se de clic a nuestra capa principal activemos la clase “activo” usando la función toggleClass() que hace activar la clase si no la tiene o desactivarla en caso contrario,e importante lo que sigue, el return debe aparecer ya que de lo contrario cuando queramos cerrar la lista dando clic en cualquier lugar nunca se va a abrir la lista.

Usamos otra función para cuando seleccionamos una opción, en este caso lo que hacemos es quitar la clase activo para cerrar la lista, pero también lo que hacemos es colocar el texto de la opción como título principal.

Y por último una función que cierra la lista cuando le damos clic a cualquier elemento del sitio, de esa forma aparentamos la perdida de foco de la lista.