Hvordan lage en rullegardinliste Box med lenker

De fleste nettsteder presentere navigasjons varer ved hjelp av blokker av alternativene som kjører enten over toppen av siden eller ned en av sine sider. Fordi disse navigasjonsstrukturer presentere alle tilgjengelige alternativer, de tilbyr en stor mengde kontekstuell informasjon. Men de også oppta betydelig plass på skjermen. Designere med en begrenset mengde plass kan i stedet velge å bruke drop-down menyer som inneholder en liste over elementer som bare utvider seg når valgt. Lag denne typen navigasjonsstrukturen på din nettside ved hjelp av HTML og Javascript.

Bruksanvisning

1 Åpne din nettside og se sin kode. Hvis du bruker en teksteditor, åpner siden i redigeringsprogrammet og velg linjen med kode der du vil ha på rullegardinmenyen til. Hvis du bruker en visuell nettredaktør i stedet (for eksempel Adobe Dreamweaver eller Microsoft Expression Web), åpne siden din og klikk på siden hvor du vil på rullegardinmenyen skal vises. Når du gjør dette, endre visningsmodus til kodevisning. Dette viser HTML-koden som bestemmer innhold og utseende på siden din.

2 Trykk på "Enter" -tasten for å opprette en tom linje.

3 Kopier og lim inn følgende kode på den blanke linjen:

<Form name = "link">
<Velg name = "meny">
<Alternativet valgt> Velg linken </ option>
<Option value = "Sample"> http://www.sample.com/ "> Prøve hjemmeside 1 </ option>
<Option value = "Sample"> http://www.sample.com/ "> Prøve hjemmeside 2 </ option>
<Option value = "Sample"> http://www.sample.com/ "> Prøve hjemmeside 3 </ option>
</ Velge>
<Input type = "button" onclick = "location = document.link.menu.options [document.link.menu.selectedIndex] .Value;" value = "Go">
</ Form>

4 Oppdaterer koblingen parametere for å møte dine design behov. Oppgi standardtekst på toppen av listen ved å endre verdien direkte etter <option valgt> tag; endre nettadressen til hver etterfølgende element ved å justere den tilsvarende verdien parameter; og erstatte "Sample website" tekst med ønsket lenketekst. Du kan også erstatte teksten i verdiparameteren for <input> -taggen for å oppdatere teksten som vises på "Send" -knappen.

5 Lagre nettsiden og deretter åpne den i nettleseren din. Velg et alternativ fra rullegardinlisten, og klikk deretter på knappen for å få tilgang til det valgte elementet.