Hvordan designe rullegardinmenyer i bootstrap 5
En rullegardinmeny lar brukeren av et nettsted velge et spesifikt alternativ/handling fra den gitte listen over alternativer/handlinger. En slik meny er beskyttbar og består av lenker ordnet som listeelementer. Disse koblingene pakker en enorm mengde innhold i dem, og gjør dermed utformingen av en renere webside. Å lage en rullegardinmeny ved hjelp av Bootstrap 5 gjøres gjennom bruk av forskjellige klasser tilknyttet den. Her presenterer vi hvordan du kan lage en rullegardinmeny ved hjelp av Bootstrap 5 og forskjellige måter å style den.
Hvordan lage en rullegardinmeny ved hjelp av Bootstrap 5
For å lage en rullegardinmeny via Bootstrap 5, bruk .fall ned klasse. Her har vi vist hvordan en enkel rullegardinmeny opprettes.
Html
DIV -beholderen ble tildelt .fall ned klasse som representerer en rullegardinmeny. For å la brukeren kunne åpne rullegardinmenyen, bruk enten en knapp eller en kobling og tilordne den .Dropdown-toggle-klasse og sett Data-BS-Toggle = “Dropdown” For å gjøre menyen til å veksle i. Lag etterpå en uordnet liste og tilordne den .rullegardinmeny-klasse, Mens tilordne .Dropdown-artikklasse til hvert listeelement for å oppgi alternativer til brukeren i menyen.
Produksjon
En rullegardinmeny ble opprettet med hell.
Hvordan lage en rullegardindeler
Hvis du ønsker å skille koblingene eller alternativene som er til stede i menyen med en horisontal linje, kan du bruke .Dropdown-divider klasse. Dette kan være nyttig i scenarier der lenker som er til stede inne i menyen tilhører forskjellige kategorier.
Html
Resten av koden er den samme som ovenfor med den eneste forskjellen som for å skille den siste lenken fra resten av koblingene vi bruker
element for å lage en horisontal regel og tilordne den .Dropdown-divider klasse. Merk at denne skillet blir nestet inne i et listeelement.
Produksjon
Slik lager du en horisontal skillelinje.
Hvordan lage en rullegardinoverskrift
Hvis du ønsker å legge til en overskrift til flere kategorier av lenker inne i menyen, kan du bruke .Dropdown-header klasse.
Html
Første overskrift
- valg 1
- Alternativ 2
- Alternativ 3
- Andre
Andre header
I koden ovenfor, før hver kategori av lenker hekker vi en element inne i en element og tilordne det .Dropdown-header klasse. På denne måten vil en overskrift bli satt inn før hver kategori av alternativer.
Produksjon
Utgangen viser en rullegardinmeny med to overskrifter.
Hvordan tilordne aktive og funksjonshemmede tilstander til elementer i en rullegardinmeny
For å legge til aktive og funksjonshemmede tilstander i spesifikke koblinger i menyen, bruker du bare .aktiv, og .funksjonshemmet klasser.
Html
I koden ovenfor blir den første lenken tildelt en aktiv tilstand, mens den andre lenken får den funksjonshemmede staten. En kobling med en aktiv tilstand har blå farge i mellomtiden, en kobling med en funksjonshemmet tilstand har lysegrå farge.
Produksjon
De .aktiv og .funksjonshemmede klasser fungerer som den skal.
Hvordan tilordne forskjellige posisjoner til rullegardinmenyer
For å style rullegardinmenyen din kan du tilordne den forskjellige posisjoner som slutt, start, til høyre eller opp. Her er hver av disse stillingene påvist.
Hvordan tilordne posisjon til rullegardinmenyen
For å tilordne en retning oppover til menyen, bruk .dropup klasse.
Html
Noe tekst.
Noe tekst.
Noe tekst.
Div som representerer rullegardinmenyen er tildelt .dropup Klasse som vil gjøre menyen til å åpne i en oppadgående retning når knappen er klikket. Merk at vi har lagt til noen Produksjon Utgangen viser en meny som åpnes oppover. Hvordan tilordne sluttposisjonen til rullegardinmenyen For å åpne menyen på slutten av rullegardinmenyen, bruk .Dropend klasse sammen med .fall ned klasse. Html Ovennevnte kode genererer en rullegardinmeny som åpnes på slutten av rullegardinmenyen når knappen er klikket. Produksjon Her har vi laget rullegardinmenyen for å åpne på slutten av knappen. Hvordan tilordne startposisjonen til rullegardinmenyen Denne stillingen vil fungere på en motsatt måte av stillingen som er omtalt i forrige eksempel, og denne stillingen kan oppnås ved hjelp av .Dropstart klasse. Html For en rullegardinmeny med en startposisjon må den plasseres på slutten av en webside. Derfor bruker vi .tekst-end klasse sammen med .Dropstart og .fall ned klasser. Dessuten blir pilen satt inn før teksten på knappen automatisk. Produksjon De .Dropstart -klassen fungerer som den skal. Hvordan tilordne riktig posisjon til rullegardinmeny For å justere rullegardinmenyen til høyre side, bruk .rullegardinmeny-end klasse. Html Hvis du ønsker å åpne rullegardinmenyen på høyre side i stedet for å dekke hele plassen under knappen, kan du tilordne .rullegardinmeny-end klasse sammen med .rullegardinlasse. Merk at for å demonstrere arbeid i denne klassen på riktig måte har vi lagt til en langstrakt tekst inne i knappen. Produksjon Rullegardinmenyen var på linje med høyre med suksess. Hvordan legge til ren tekst i en rullegardinmeny I noen scenarier vil du legge til ren tekst i rullegardinmenyen, og bruk derfor .DROPDDOWN-ITEM-TEXT klasse. Html I koden ovenfor ble det opprettet en enkel rullegardinmeny, mens det ble opprettet en annen listeelement på slutten av koblingene; For å legge til ren tekst i stedet for å bruke ankerkoden Tag ble brukt og ble tildelt .DROPDDOWN-ITEM-TEXT klasse. Teksten ble plassert inne i stikkord. Produksjon Slik legger du til ren tekst i rullegardinmenyen. Hvordan lage en rullegardin med grupperte knapper En annen interessant ting som kan gjøres ved hjelp av rullegardinmenyer er å legge til disse menyene i grupperte knapper. Nedenfor har vi demonstrert hvordan dette kan gjøres. Html Ovennevnte kode genererer to knappegrupper består hver av en enkelt knapp, og hver knapp har en rullegardinmeny tilknyttet den. Hver av rullegardinmenyene ble opprettet på en lignende måte som demonstrert i de forrige eksemplene. Produksjon Rullegardinmenyen lenket til den første knappegruppen. Rullegardinmenyen lenket til den andre knappegruppen. Konklusjon For å lage en rullegardinmeny, tilordne .fall ned Meny til en div -beholder som vil ha rullegardinmenyen inni den. Bruk deretter en knapp eller en kobling for å la brukeren kunne åpne rullegardinmenyen og tilordne den .Dropdown-toggle-klasse og Sett data-BS-toggle = “Dropdown” For å gjøre menyen til å veksle i. Lag etterpå en uordnet liste og tilordne den .rullegardinmeny-klasse, Mens tilordne .Dropdown-artikklasse til hvert listeelement for å oppgi alternativer til brukeren i menyen. Dette innlegget diskuterer hvordan du oppretter og styler en rullegardinmeny i detalj.