Jak zaprojektować menu rozwijane w Bootstrap 5
Menu rozwijane umożliwia użytkownikowi witryny na wybranie określonej opcji/akcji z podanej listy opcji/akcji. Takie menu jest przełączalne i składa się z linków ustawionych jako elementy listy. Te linki zawierają w nich ogromną zawartość, tym samym, tworząc układ czyszczenia strony internetowej. Tworzenie menu rozwijanego za pomocą Bootstrap 5 odbywa się poprzez użycie różnych klas powiązanych z nim. Tutaj prezentujemy, w jaki sposób możesz utworzyć menu rozwijane za pomocą Bootstrap 5 i różnych sposobów stylizowania.
Jak utworzyć menu rozwijane za pomocą Bootstrap 5
W celu stworzenia menu rozwijanego za pośrednictwem Bootstrap 5 Użyj .upuścić klasa. Tutaj pokazaliśmy, w jaki sposób tworzone jest proste menu rozwijane.
Html
Kontener Div został przypisany .upuścić Klasa, która reprezentuje menu rozwijane. Aby użytkownik mógł otworzyć menu rozwijane, użyj przycisku lub linku i przypisać go .Klasa rozwijana i nastaw Data-BS-Toggle = „Downisja” Aby menu można przełączyć. Następnie utwórz listę nieopisaną i przypisz ją .Klasa rozwijana, podczas gdy przypisz .Klasa rozwijana do każdego elementu listy, aby podać opcje użytkownikowi w menu.
Wyjście
Z powodzeniem utworzono menu rozwijane.
Jak utworzyć dzielnik rozwijany
Jeśli chcesz oddzielić linki lub opcje prezentowane w menu za pomocą linii poziomej, użyj .rozwijany klasa. Może to być pomocne w scenariuszach, w których linki obecne w menu należą do różnych kategorii.
Html
Reszta kodu jest taka sama jak powyżej, z jedyną różnicą, która w celu oddzielenia ostatniego linku od reszty linków, których używamy
element do utworzenia reguły poziomej i przypisania jej .rozwijany klasa. Zauważ, że ten dzielnik jest zagnieżdżony w pozycji listy.
Wyjście
To jest sposób utworzenia poziomego dzielnika.
Jak utworzyć rozwijany nagłówek
Jeśli chcesz dodać nagłówek do wielu kategorii linków w menu, użyj .Drużyciel rozwijany klasa.
Html
W powyższym kodzie, przed każdą kategorią linków gniazdujemy element wewnątrz element i przypisanie go .Drużyciel rozwijany klasa. W ten sposób nagłówek zostanie włożony przed każdą kategorią opcji.
Wyjście
Wyjście wyświetla menu rozwijane z dwoma nagłówkami.
Jak przypisać stany aktywne i niepełnosprawne do elementów w menu rozwijanym
Aby dodać stany aktywne i niepełnosprawne do określonych linków w menu, po prostu użyj .aktywny i .wyłączony zajęcia.
Html
W powyższym kodzie pierwszego linku jest przypisywany stan aktywny, podczas gdy drugi link jest podawany stanowi niepełnosprawne. Tymczasem link ze stanem aktywnym ma niebieski kolor, link ze stanem niepełnosprawnym ma jasnoszary kolor.
Wyjście
.aktywny i .Zajęcia niepełnosprawne działają poprawnie.
Jak przypisać różne stanowiska do rozwijanych menu
Aby stylizować swoje menu rozwijane, możesz przypisać mu różne pozycje, takie jak koniec, start, prawy lub w górę. Tutaj pokazano każdą z tych pozycji.
Jak przypisać pozycję w górę do menu rozwijanego
W celu przypisania kierunku w górę do menu użyj .Dropup klasa.
Html
Jakiś tekst.
Jakiś tekst.
Jakiś tekst.
Div, który reprezentuje menu rozwijane, zostało przypisane .Dropup klasa, która sprawi, że menu będzie otwarte w kierunku w górę po kliknięciu przycisku. Zauważ, że dodaliśmy trochę Wyjście Wyjście pokazuje menu, które otwiera się w górę. Jak przypisać pozycję końcową do menu rozwijanego Aby otworzyć menu na końcu przycisku rozwijania, użyj .Dropend klasa wraz z .upuścić klasa. Html Powyższy kod wygeneruje menu rozwijane, które otworzy się na końcu przycisku rozwijania po kliknięciu przycisku. Wyjście Tutaj pomyślnie stworzyliśmy menu rozwijane, aby otworzyć na końcu przycisku. Jak przypisać pozycję początkową do menu rozwijanego Ta pozycja będzie działać w odwrotny sposób na stanowisko omówione w poprzednim przykładzie, a pozycja ta może zostać osiągnięta za pomocą .Dropstart klasa. Html Aby uzyskać menu rozwijane z pozycją początkową, należy go umieścić na końcu strony internetowej. Dlatego używamy .end tekstowy klasa wraz z .Dropstart I .upuścić zajęcia. Ponadto strzałka zostanie włożona przed tekstem w przycisku automatycznie. Wyjście .Klasa Dropstart działa poprawnie. Jak przypisać odpowiednią pozycję do menu rozwijanego W celu wyrównania menu rozwijanego po prawej stronie użyj .Zarówno menu klasa. Html Jeśli chcesz otworzyć menu rozwijane po prawej stronie zamiast pokrycia całego miejsca poniżej przycisku, przypisz .Zarówno menu klasa wraz z .Klasa rozwijana. Zauważ, że aby właściwie zademonstrować działanie tej klasy, dodaliśmy wydłużony tekst wewnątrz przycisku. Wyjście Menu rozwijane zostało z powodzeniem wyrównane po prawej stronie. Jak dodać zwykły tekst do menu rozwijanego W niektórych scenariuszach należy dodać zwykły tekst w menu rozwijanym, dlatego użyj .tekst rozwijany klasa. Html W powyższym kodzie utworzono proste menu rozwijane, podczas gdy na końcu linków utworzono inny element listy; Jednak dodanie prostego tekstu zamiast używania znacznika kotwicy Zastosowano tag i przypisano został .tekst rozwijany klasa. Tekst został umieszczony wewnątrz etykietka. Wyjście Oto jak dodajesz zwykły tekst w menu rozwijanym. Jak utworzyć rozwijanie z pogrupowanymi przyciskami Kolejną interesującą rzeczą, którą można zrobić za pomocą menu rozwijanych, jest dodanie tych menu wewnątrz zgrupowanych przycisków. Poniżej pokazaliśmy, jak można to zrobić. Html Powyższy kod generuje dwie grupy przycisków, każda składa się z jednego przycisku, a każdy przycisk zawiera menu rozwijane z nim. Każde z menu rozwijanych zostało stworzone w podobny sposób, jak pokazano w poprzednich przykładach. Wyjście Menu rozwijane połączone z pierwszą grupą przycisków. Menu rozwijane połączone z grupą drugiego przycisku. Wniosek W celu utworzenia menu rozwijanego przypisz .upuścić menu do kontenera Div, który będzie miał w sobie menu rozwijane. Następnie użyj przycisku lub linku, aby użytkownik mógł otworzyć menu rozwijane i przypisać go .Klasa rozwijana I Ustaw dane-BS-Toggle = „Downiste” Aby menu można przełączyć. Następnie utwórz listę nieopisaną i przypisz ją .Klasa rozwijana, podczas gdy przypisz .Klasa rozwijana do każdego elementu listy, aby podać opcje użytkownikowi w menu. W tym poście omówiono, jak szczegółowo tworzyć i stylizować menu rozwijane.