Jak utworzyć menu rozwijane z JavaScript

JavaScript dodaje dynamiczne zachowanie do Twojej witryny, możesz tworzyć różne menu rozwijane, paski nawigacyjne, animacje i obsłużyć, jak strona reaguje na każde kliknięcie. To sprawia, że ​​strona internetowa jest interaktywna i dodaje „życie” do strony internetowej.

Wielu programistów polega na bootstrapie do tych celów, ponieważ jest on wyposażony w wbudowane komponenty, które można łatwo ponownie wykorzystać i zwiększyć produktywność programisty, ale zrozumienie, jak każda rzecz działa samodzielnie, jest ważne przed wejściem do komponentów wielokrotnego użytku. Tutaj w tym artykule omówimy, jak utworzyć Menu rozwijane za pomocą JavaScript.

Menu rozwijane z JavaScript

Wszyscy widzieliśmy menu rozwijane i wykorzystaliśmy je podczas wypełniania różnych formularzy online do wyboru konkretnego miasta, stanu lub po prostu wybierania dostarczonych nam mnóstwa opcji rozwijanych.

Są to przełączalne menu, które składają się z wielu opcji, z których użytkownik może wybrać określoną opcję. Te opcje można zdefiniować na liście HTML lub w JavaScript jako tablica i są powiązane z funkcją. Ilekroć użytkownik kliknie opcję, funkcja jest uruchamiana i następuje odpowiednie działanie.

Ważne punkty do tworzenia menu rozwijanego

Możesz utworzyć proste menu rozwijane za pomocą listy HTML, która używa tag wraz z etykietka. Identyfikator jest dostarczany na liście używanej w JavaScript, aby uzyskać opcję wybraną przez użytkownika.

Możesz utworzyć bardziej złożone menu rozwijane za pomocą głównie JavaScript z odrobiną HTML. Opcje zostaną zdefiniowane jako tablica w JavaScript.

Rozumiemy każdy z nich lepiej z kodem dla lepszego zrozumienia.

Proste menu rozwijane

Najpierw utwórz listę w HTML, zapewniając jej identyfikator w znaczniku formularzy, tutaj podajemy „opcję” jako identyfikator.

Opcje są zdefiniowane w każdym znaczniku i po zmianie wywoływane jest funkcja.

Funkcja jest zdefiniowana w JavaScript według nazwy „DetdownMenu ()”, która uruchamia się za każdym razem, gdy wybrana jest opcja.

Ostatnią rzeczą jest tworzenie danych wejściowych z identyfikatorem „miasto”, w którym opcja pojawia się wybrana przez użytkownika.

Wybierz swoje miasto z listy

---Wybierz miasto---
Nowy Jork
Amsterdam
Paryż
Londyn

Twoje wybrane miasto to:

Wyjście:

Menu rozwijane za pomocą DIV wraz z JavaScript

Najpierw utwórz dwa Divy w znaczniku HTML, który wyzwala funkcję i wyświetla menu na ekranie.

Zdefiniuj listę jako tablicę w JavaScript i użyj Documnet.Metoda createElement () do utworzenia listy rozwijanej programowo w JavaScript

Następnie wywołaj metodę appendChild (), aby dołączyć menu rozwijane na końcu listy.

Pokaż listę

Wyjście:

Wniosek

JavaScript służy do tworzenia różnych interaktywnych elementów na stronie internetowej w celu zwiększenia dynamicznego zachowania strony. W tym artykule utworzyliśmy menu rozwijane w JavaScript z kodem. Najpierw utworzono proste menu rozwijane przy użyciu HTML i funkcji wywoływania przez JavaScript, a następnie uczyniliśmy go skomplikowane i stworzyliśmy menu rozwijane z JavaScript i mnóstwo HTML. Elementy zostały zdefiniowane jako tablica i utworzono menu rozwijane przy użyciu wbudowanych metod. Kod jest przewidziany zarówno dla lepszego zrozumienia.