Sådan oprettes en drop-down menu i Dreamweaver

Du kan placere din etiket før eller efter rullemenuen.

Adgangstast

Dette er nøglen, der kan bruges sammen med Alt eller Valg tasterne for at komme direkte til formularfeltet. Dette gør dine skemaer meget nemme at bruge uden at have brug for en mus.

Tab Indeks

Dette er den rækkefølge, hvor formularfeltet skal åbnes, når du bruger tastaturet til at fane gennem websiden.

Når du har opdateret dine tilgængelighedsindstillinger, skal du klikke på OK.

Vælg menuen

Når du har din rullemenu, der vises i Dreamweaver designvisning, skal du tilføje de forskellige elementer til den. Vælg først rullemenuen ved at klikke på den. Dreamweaver vil sætte en anden prikket linje kun på drop-down menuen, for at vise, at du har valgt det.

Menuegenskaber

Egenskabsmenuen ændres til listen / menufunktionerne i den rulleliste. Der kan du give din menu et ID (hvor det står "vælg"), beslutter, om du vil have det som en lis eller en menu, giv det en stil klasse fra dit stilark og tildel værdier til rullemenuen.

Hvad er forskellen mellem liste og menu?

Dreamweaver kalder en menu drop-down menu enhver drop-down, der kun tillader et valg. En "liste" tillader flere valg i rullemenuen og kan være mere end et emne højt.

Hvis du vil have en rullemenu til at være flere linjer højt, skal du ændre den til en "listetype" og forlade feltet "valg" ikke.

Tilføj nye listeposter

For at tilføje nye emner til din menu, klik på "List værdier …" knappen. Dette åbner ovenstående vindue. Indtast din varemærke i den første boks. Dette er hvad der vises på siden. Hvis du forlader værdien blankt, er det også det, der sendes i formularen.

Tilføj mere og genbestill

Klik på plusikonet for at tilføje flere elementer. Hvis du vil ombestille dem i listefeltet, skal du bruge pilene op og ned til højre.

Giv alle varer værdier

Som jeg nævnte i trin 8, hvis du forlader værdien blankt, vil mærkaten blive sendt til formularen. Men du kan give alle dine varer værdier - at sende alternative oplysninger til din formular. Du vil bruge dette meget til ting som spring menuer og hyperlinking.

Vælg en standard

Websider som standard for at vise hvilket som helst drop-down-element er først angivet som standardelementet. Men hvis du vil have en anden valgt, skal du markere den i boksen "Initially selected" i menuen Egenskaber.

Se din liste i designvisning

Når du er færdig med at redigere egenskaberne, viser Dreamweaver din rulleliste med den valgte standardværdi.

Se din liste i kodevisning

Hvis du skifter til kodevisning, kan du se, at Dreamweaver tilføjer din rullemenu med meget ren kode. De eneste ekstra attributter er dem, vi tilføjede med tilgængelighedsindstillinger. Koden er alle indrykket og meget let at læse og forstå. Den sætter endda i den valgte = "valgt" attribut, fordi jeg har fortalt Dreamweaver, at jeg som standard til at skrive XHTML.

Gem og se i browseren

Hvis du gemmer dokumentet og ser det i en webbrowser, kan du se, at din rullemenu ser ud som om du ville forvente det.

Men det gør ikke noget …

Menuen vi oprettet ovenfor ser fint ud, men det gør ikke noget. For at få det til at gøre noget, skal du oprette en formular handling på selve formularen.

Heldigvis har Dreamweaver en indbygget drop-down menu, som du kan bruge straks på dit websted uden at skulle lære om former, CGI'er eller scripting. Det kaldes en Jump Menu.

Dreamweaver Jump Menu opretter en rullemenu med navne og webadresser. Derefter kan du vælge et emne i menuen, og websiden flytter til den pågældende placering, ligesom hvis du havde klikket på et link.

Gå til menuen Indsæt og vælg Formular og derefter Spring menu.

Spring menu vindue

I modsætning til standard rullemenuen åbner menuen Hop et nyt vindue, så du kan navngive dine menupunkter og tilføje detaljer om, hvordan formularen skal fungere.

For det første punkt skal du ændre teksten "untitled1" til det, du vil have den til at læse og tilføje en URL, som det link skal gå til.

Tilføj varer til din Jump Menu

Klik på tilføjelseselementet for at tilføje et nyt emne til din springmenu. Tilføj så mange elementer som du ønsker.

Spring menuvalg

Når du har tilføjet alle de links, du ønsker, skal du vælge dine muligheder:

Åbn webadresser i

Hvis du har et rammesæt, kan du åbne linkene i en anden ramme. Eller du kan ændre muligheden for Main Window til et specielt mål, så URL'en åbnes i et nyt vindue eller andre steder.

Menunavn

Giv din menu et unikt id til siden. Dette er påkrævet, så scriptet fungerer korrekt. Det giver dig også mulighed for at have flere hoppemenuer i en form - bare giv dem alle forskellige navne.

Indsæt Go-knappen efter menuen

Jeg kan godt lide at vælge dette, fordi scriptet i nogle tilfælde ikke virker, når menuen ændres. Det er også mere tilgængeligt.

Vælg første element efter URL-ændring

Vælg dette, hvis du har en prompt som "Vælg en" som det første menupunkt. Dette sikrer, at det pågældende element forbliver som standard på siden.

Jump Menu Design View

Ligesom med din første menu opsætter Dreamweaver din hoppemenu i designvisning med standardelementet synligt. Du kan derefter redigere rullemenuen som du ville have andre.

Hvis du redigerer det, skal du sørge for ikke at ændre nogen id'er på emnerne, ellers kan scriptet muligvis ikke virke.

Spring Menu i Browser

Hvis du gemmer filen og rammer F12, vises siden i din foretrukne browser. Der kan du vælge en indstilling, klikke på "Gå" og springmenuen virker!