Hvordan lage drop down menyer på et nettsted

September 19

Når du oppretter en nettside er det veldig lett å rote en nettside med informasjon. En av de enkleste måtene å fjerne rot og gi ditt nettsted et rent utseende er ved å legge en fungerende rullegardinmenyen. Sammen med å hjelpe til å rydde opp ditt nettsted, kan en rullegardinmeny også gjøre navigeringen av nettstedet enklere for de besøkende ved å gjøre flere koblinger lett å finne. Sette opp en rullegardinmeny på en nettside krever bare en enkel HTML-kode tillegg til nettsiden din.

Bruksanvisning

1 Plasser rullegardinmenyen i et skjema på ditt nettsted siden. I likhet med papirskjemaer, er et webskjema et sted der brukerne kan legge inn data med avkrysningsbokser, radioknapper og tekstbokser, samt skape en rullegardinmeny. Til å begynne form, start med følgende kode:

</ Form>

Skjemanavnet kan være alt du vil (vi valgte rullegardinmenyen her) og brukes til å merke skjemaet for senere bruk.

2 Tilsett valgfunksjon til webskjema. Den velger funksjonen brukes til å skape en utvalgt liste (eller rullegardinlisten) hvor de enkelte verdiene vil bli holdt. En utvalgt liste vil trekke den valgte verdien i rullegardinmenyen boksen og gjøre verdien aktivt for utvalget. Koden for å lage en utvalgt funksjon ser slik ut:

</ Velge>
</ Form>

3 Legg opsjonsverdier til å velge funksjonen i rullegardinmenyen. De enkelte valgene i en rullegardinmeny er kjent som alternativer. Verdien funksjonen er nettadressen (eller web-adresse) at alternativet er koblet til. Du kan legge til så mange alternativer til rullegardinmenyen som nødvendig, og dette er hvordan rullegardinmenyen kan bidra til å klare rot fra din side. For å legge til opsjonsverdier, legge til denne koden i valgfunksjon:

4 Lag en utvalgt knapp for å aktivere rullegardinmenyen og la brukerne velge alternativet de velger. Valgknappen skal være enten til venstre eller høyre for drop-down menyen og nær nok til at brukerne vet at det er relatert til menyen. Du kan ha din knapp si noe du ønsker å fange brukerens oppmerksomhet. For vår drop-down menyen vil vi bare bruke "Velg". For å legge til en Select-knappen til rullegardinmenyen, legg til følgende linje med kode:

<Form name = "drop-down menyen">
<Velg>
<Option value = "URL"> tekst i menyen </ option>
<Option value = "URL"> tekst i menyen </ option>
<Option value = "URL"> tekst i menyen </ option>
<Option value = "URL"> tekst i menyen </ option>
</ Velge>
<Input type = "button" onclick = "location = document.jump.menu.options [document.jump.menu.selectedIndex] .Value;" value = "Velg">
</ Form>

5 Plasser rullegardinmenyen på ditt nettsted. Rullegardinmenyen kan legges hvor som helst du velger på ditt nettsted. Bare plassere rullegardinmenyen koden inn på din side HTML og sørg for å sjekke funksjonaliteten i rullegardinmenyen med en gang.

Hint

Gjør din nedtrekksmenyen mer visuelt tiltalende ved å legge til CSS (Cascading Style Sheets) kode for å endre farger og utseende på skjemaet.
Ikke legg for mange alternativer til rullegardinmenyen. Det er ingen magisk tall, men har for mange alternativer kan gjøre rullegardinmenyen forvirrende og kan irritere besøkende. Hvis du har en rekke alternativer, vurdere å skille dem i kategorier og opprette flere drop-down menyer.