Hvordan lage en Dropdown i HTML

Drop-down menyer er mest vanlig med former for å gi brukerne et par forskjellige alternativer å velge mellom. Du kan imidlertid inkludere en rullegardinmeny hvor som helst på siden din ved hjelp av HTML uten å bruke et skjema. Din rullegardinmenyen kan være så lenge du vil, og kan bli stylet med CSS for å bedre passe inn med nettstedets layout og fargevalg.

Bruksanvisning

1 Start rullegardinmeny med "<velg name =" menynavn ">". Hvis du bruker rullegardinmenyen som en del av en form, sørg for at navnet er beskrivende og relevant i skjemaet.

2 Skriv inn din første alternativet som "<option value =" Alternativ 1 "> Alternativ 1 </ option>". Den angitte mellom åpning og lukking tag tekst er hva de besøkende vil se i deres rullegardinmenyen; den behøver ikke å være den samme som den innstilte verdien. Gjenta dette for hvert alternativ på menyen.

3 Utpeke en standard valgte alternativet ved å legge til "selected =" selected "" for å velge kode, f.eks <option value = "Alternativ 1" selected = "selected"> Alternativ 1 </ option>. "Hvis dette ikke er satt, det første elementet på listen vises som standard.

4 Lukk rullegardinmeny med "</ velge>". En rullegardinmeny med tre alternativer, med det andre alternativet er valgt som standard, vil se slik ut:

<Velg name = "menynavn">

<Option value = "Alternativ 1"> Alternativ 1 </ option>

<Option value = "Alternativ 2" selected = "selected"> Alternativ 2 </ option>

<Option value = "Alternativ 3"> Alternativ 3 </ option>

</ Velge>

5 Bruk CSS til å style din rullegardinmenyen, hvis du ønsket å endre menyens utseende på websiden. For eksempel, hvis du ønsker å bruke nettstedets stilark for å gjøre menyen 100 piksler bred med en svart bakgrunn og grå tekst, vil du legge til:

plukke ut {

width: 100px;

bakgrunn: # 000000;

color: # A8A8A8;}

Du kan også legge til denne CSS direkte til åpningen "velg" tag ved å skrive:

<Velg name = "menynavn" style = "width: 100px; bakgrunn: # 000000; color: # A8A8A8;">

Hint

  • Hvis du vil inkludere et tomrom som det første alternativet, starter første alternativet med "<option value =" null "> </ option>".
  • Hvis du ønsker å bruke en rullegardinmeny som en del av navigasjon ordningen, må du bruke noen Javascript for å gjøre valg klikkbare. HTML kode Tutorial tilbyr en grunnleggende opplæringen og kode for å gjøre dette: Htmlcodetutorial.com/linking/linking_famsupp_114.html
  • Stiler kan også brukes på enkelte opsjons koder.