Como criar um menu suspenso com JavaScript

JavaScript adiciona comportamento dinâmico ao seu site, você pode criar vários menus suspensos, barras de navegação, animações e lidar com a forma como a página responde a cada clique. Isso torna a página da web interativa e adiciona "vida" a um site.

Muitos desenvolvedores dependem do bootstrap para esses propósitos, pois vem com componentes incorporados que podem ser reutilizados com facilidade e aumentar a produtividade de um desenvolvedor, mas entender como cada coisa funciona por si mesma primeiro é importante antes de usar componentes reutilizáveis. Aqui neste artigo, discutiremos como criar um menu suspenso usando JavaScript.

Menu suspenso com javascript

Todos nós vimos menus suspensos e os usamos enquanto preenchem vários formulários on -line para selecionar uma cidade, estado ou simplesmente escolher entre várias opções de suspensão fornecidas para nós.

Estes são menus alternáveis ​​que consistem em várias opções das quais o usuário pode escolher uma opção específica. Essas opções podem ser definidas na lista HTML ou em JavaScript como uma matriz e estão associadas a uma função. Sempre que um usuário clica em uma opção, a função é acionada e uma ação correspondente ocorre.

Pontos importantes para criar um menu suspenso

Você pode criar um menu suspenso simples com o uso de uma lista HTML que usa o Marcar junto com o marcação. Um ID é fornecido à lista usada em JavaScript para obter a opção selecionada pelo usuário.

Você pode criar um menu suspenso mais complexo usando principalmente javascript com um pouco de html. As opções serão definidas como uma matriz em JavaScript.

Vamos entender cada um deles melhor com o código para uma melhor compreensão.

Menu suspenso simples

Primeiro, crie uma lista em html, fornecendo algum ID em uma tag de formulário, aqui fornecemos "opção" como um id.

As opções são definidas em cada tag e a alteração de uma função é chamada.

A função é definida em JavaScript pelo nome "DropDownMenu ()", que aciona sempre que a opção é selecionada.

A última coisa é que uma entrada é criada com o ID "City", no qual a opção aparece selecionada pelo usuário.

Selecione sua cidade na lista

---Escolha a cidade---
Nova Iorque
Amsterdã
Paris
Londres

Sua cidade selecionada é:

Saída:

Menu suspenso usando o div junto com javascript

Primeiro, crie dois divs na tag html que aciona a função e exibe o menu na tela.

Defina a lista como uma matriz em JavaScript e use Documnet.Método CreateElement () para criar uma lista suspensa programaticamente em JavaScript

Em seguida, ligue para o método AppendChild () para anexar o menu suspenso no final da lista.

Mostre a lista

Saída:

Conclusão

JavaScript é usado para criar vários elementos interativos na página da web para aumentar o comportamento dinâmico da página. Neste artigo, criamos um menu suspenso em JavaScript com o código. Em primeiro lugar, um simples menu suspenso foi criado usando HTML e função sendo chamado através do JavaScript, depois o tornamos complexo e criamos o menu suspenso com JavaScript e um pouco de HTML. Os itens foram definidos como uma matriz e um menu suspenso foi criado usando métodos internos. O código é fornecido para ambos para o seu melhor entendimento.