Slik lager du en rullegardinmeny i Dreamweaver

Du kan plassere etiketten før eller etter rullegardinmenyen.

Tilgangsnøkkel

Dette er nøkkelen som kan brukes sammen med Alt eller Valg taster for å komme direkte til skjemafeltet. Dette gjør skjemaene dine veldig enkle å bruke uten at du trenger en mus.

Tab Index

Dette er rekkefølgen der skjemafeltet skal åpnes når du bruker tastaturet til å bla gjennom nettsiden.

Når du har oppdatert tilgjengelighetsalternativene dine, klikker du OK.

Velg menyen

Når du har rullegardinmenyen din i Dreamweaver-designvisning, må du legge til de ulike elementene i den. Velg først rullegardinmenyen ved å klikke på den. Dreamweaver vil sette en annen prikket linje rundt bare rullegardinmenyen, for å vise at du har valgt den.

Menyegenskaper

Egenskapsmenyen endres til listen / menyegenskapene for den nedtrekksmenyen. Der kan du gi din meny en ID (hvor det står "velg"), bestemme om du vil at det skal være en lis eller en meny, gi den en stil klasse fra stilarket ditt og tilordne verdier til rullegardinmenyen.

Hva er forskjellen mellom liste og meny?

Dreamweaver kaller en rullegardinmeny på menyen, en rullegardin som bare tillater ett valg. En "liste" tillater flere valg i rullegardinmenyen og kan være mer enn ett element høyt.

Hvis du vil ha en rullegardinmeny for å være flere linjer høy, må du endre den til en "liste" -type og la boksen "valg" ikke merkes av.

Legg til nye listeposter

For å legge til nye elementer i menyen, klikk på "List values ​​…" knappen. Dette åpner vinduet ovenfor. Skriv inn varemerket i den første boksen. Dette er hva som skal vises på siden. Hvis du lar verdien tomt, er det også det som skal sendes i skjemaet.

Legg til mer og ombestille

Klikk på plussikonet for å legge til flere elementer. Hvis du vil ombestille dem i listeboksen, bruk opp- og nedpilene til høyre.

Gi alle elementer verdier

Som nevnt i trinn 8, hvis du lar verdien stå tom, vil etiketten bli sendt til skjemaet. Men du kan gi alle dine verdier - for å sende annen informasjon til skjemaet ditt. Du vil bruke dette mye for ting som hoppemenyer og hyperlinking.

Velg en standard

Websider som standard for å vise hvilken rullegardinliste som er oppført, er først oppført som standardelement. Men hvis du vil ha en annen valgt, marker du den i boksen "Utvalgt valgt" på Egenskaper-menyen.

Se listen i designvisning

Når du er ferdig med å redigere egenskapene, viser Dreamweaver din rullegardinliste med standardverdien som er valgt.

Se listen i kodevisning

Hvis du bytter til kodevisning, kan du se at Dreamweaver legger til rullegardinmenyen med veldig ren kode. De eneste ekstra attributter er de som vi har lagt til med tilgjengelighetsalternativer. Koden er alt innrykket og veldig lett å lese og forstå. Den legger til og med i det valgte = "valgt" attributtet fordi jeg har fortalt Dreamweaver at jeg som standard for å skrive XHTML.

Lagre og vise i nettleser

Hvis du lagrer dokumentet og ser det i en nettleser, kan du se at rullegardinmenyen ser ut som du ville forvente det.

Men det gjør ikke noe …

Menyen vi opprettet ovenfor ser bra ut, men det gjør ingenting. For å få det til å gjøre noe, må du sette opp en form handling på selve skjemaet.

Heldigvis har Dreamweaver en innebygd rullegardinmeny som du kan bruke umiddelbart på nettstedet ditt uten å måtte lære om skjemaer, CGIer eller skripting. Det kalles en hoppemeny.

Dreamweaver Jump-menyen setter opp en rullegardinmeny med navn og nettadresser. Deretter kan du velge et element i menyen, og nettsiden vil flytte til den plasseringen, akkurat som om du hadde klikket på en lenke.

Gå til Sett inn-menyen, og velg Form og deretter Jump Menu.

Hopp menyvinduet

I motsetning til standard-rullegardinmenyen åpner Hopp-menyen et nytt vindu for at du skal navngi menyelementene dine og legge til detaljer om hvordan skjemaet skal fungere.

For det første elementet, endre teksten "untitled1" til det du vil at den skal lese og legg til en nettadresse som den koblingen skal gå til.

Legg til elementer i hoppemenyen

Klikk på add-elementet for å legge til et nytt element i hoppemenyen. Legg til så mange elementer som du ønsker.

Hopp menyalternativer

Når du har lagt til alle linkene du vil ha, bør du velge alternativer:

Åpne nettadresser i

Hvis du har rammesett, kan du åpne koblingene i en annen ramme. Eller du kan endre muligheten til hovedvinduet til et spesielt mål slik at nettadressen vil åpnes i et nytt vindu eller et annet sted.

Menynavn

Gi menyen en unik ID for siden. Dette kreves slik at skriptet fungerer som det skal. Det lar deg også ha flere hoppemenyer i en form - bare gi dem alle forskjellige navn.

Sett inn Go-knappen etter menyen

Jeg liker å velge dette fordi noen ganger fungerer ikke skriptet når menyen endres. Det er også mer tilgjengelig.

Velg første element etter URL-endring

Velg dette hvis du har en melding som "Velg en" som det første menyelementet. Dette vil sikre at det aktuelle elementet forblir standard på siden.

Hoppmeny Designvisning

På samme måte som med din første meny, oppretter Dreamweaver hoppemenyen i designvisning med standardelementet som er synlig. Du kan deretter redigere rullegardinmenyen som du ville noe annet.

Hvis du redigerer det, må du ikke endre noen IDer på elementene, ellers kan ikke skriptet fungere.

Hopp-menyen i nettleseren

Ved å lagre filen og trykke på F12, vises siden i din foretrukne nettleser. Der kan du velge et alternativ, klikk "Go" og hoppemenyen fungerer!