Cómo crear un menú desplegable con JavaScript
Muchos desarrolladores confían en Bootstrap para estos fines, ya que viene con componentes incorporados que se pueden reutilizar fácilmente y aumentar la productividad de un desarrollador, pero comprender cómo cada cosa funciona por sí misma es importante antes de saltar a usar componentes reutilizables. Aquí en este artículo discutiremos cómo crear un Menú desplegable Usando JavaScript.
Menú desplegable con JavaScript
Todos hemos visto menús desplegables y los usamos mientras llenamos varios formularios en línea para seleccionar una ciudad en particular, estado o simplemente elegir entre un montón de opciones desplegables que nos proporcionan.
Estos son menús alternables que consisten en múltiples opciones desde las cuales el usuario puede elegir una opción particular. Estas opciones se pueden definir en la lista HTML o en JavaScript como una matriz y están asociadas con una función. Cada vez que un usuario hace clic en una opción, se activa la función y se produce una acción correspondiente.
Puntos importantes para crear un menú desplegable
Puede crear un menú desplegable simple con el uso de una lista HTML que usa el etiquetar junto con el etiqueta. Se proporciona una ID a la lista que se utiliza en JavaScript para obtener la opción seleccionada por el usuario.
Puede crear un menú desplegable más complejo utilizando principalmente JavaScript con un poco de HTML. Las opciones se definirán como una matriz en JavaScript.
Entendamos mejor cada uno de estos con el código para una mejor comprensión.
Menú desplegable simple
Primero, cree una lista en HTML proporcionándole alguna identificación en una etiqueta de formulario, aquí le proporcionamos "opción" como ID.
Las opciones se definen en cada etiqueta y en el cambio se llama a una función.
La función se define en JavaScript por el nombre "Dropdownmenu ()" que se desencadena cada vez que se selecciona la opción.
Lo último es que se crea una entrada con ID "Ciudad" en la que la opción aparece seleccionada por el usuario.
Producción:
Menú desplegable usando DIV junto con JavaScript
Primero, cree dos divs en la etiqueta HTML que desencadena la función y muestra el menú en la pantalla.
Defina la lista como una matriz en JavaScript y use Documnet.Método createElement () para crear una lista desplegable programáticamente en JavaScript
Luego llame al método appendChild () para agregar el menú desplegable al final de la lista.
Producción:
Conclusión
JavaScript se utiliza para crear varios elementos interactivos en la página web para aumentar el comportamiento dinámico de la página. En este artículo creamos un menú desplegable en JavaScript con el código. En primer lugar, se creó un menú desplegable simple usando HTML y una función que se llama a través de JavaScript, luego lo hicimos complejo y creamos el menú desplegable con JavaScript y un poco de HTML. Los elementos se definieron como una matriz y se creó un menú desplegable utilizando métodos incorporados. Se proporciona código para ambos para su mejor comprensión.