Hoe maak je een vervolgkeuzemenu in Dreamweaver

U kunt uw label voor of na het vervolgkeuzemenu plaatsen.

Toegangssleutel

Dit is de sleutel die samen met de toetsen Alt of Option kan worden gebruikt om rechtstreeks naar dat formulierveld te gaan. Dit maakt uw formulieren zeer eenvoudig te gebruiken zonder een muis te hoeven gebruiken.

Tab Index

Dit is de volgorde waarin het formulierveld moet worden geopend wanneer u het toetsenbord gebruikt om door de webpagina te bladeren.

Wanneer u uw toegankelijkheidsopties heeft bijgewerkt, klikt u op OK.

Selecteer het menu

Nadat u uw vervolgkeuzemenu hebt weergegeven in de ontwerpweergave van Dreamweaver, moet u de verschillende elementen eraan toevoegen. Selecteer eerst het vervolgkeuzemenu door erop te klikken. Dreamweaver plaatst nog een stippellijn rond het vervolgkeuzemenu om aan te geven dat u het hebt geselecteerd.

Menu-eigenschappen

Het eigenschappenmenu zal veranderen in de lijst- / menu-eigenschappen voor dat vervolgkeuzemenu. Daar kun je je menu een ID geven (waar staat "select"), bepaal je of je een lis of een menu wilt, geef je het een stijlklasse uit je stijlpagina en wijs je waarden toe aan de vervolgkeuzelijst.

Wat is het verschil tussen lijst en menu?

Dreamweaver roept een vervolgkeuzemenu met menu's op in een dropdown-menu dat slechts één selectie toestaat. Een "lijst" staat meerdere keuzes toe in de vervolgkeuzelijst en kan meer dan één item hoog zijn.

Als u wilt dat een vervolgkeuzemenu meerdere regels hoog is, wijzigt u dit in een "lijst" -type en laat u het selectievak "selecties" uitgeschakeld.

Nieuwe lijstitems toevoegen

Om nieuwe items toe te voegen aan uw menu, klikt u op de knop "Lijstwaarden …". Hierdoor wordt het bovenstaande venster geopend. Typ uw artikellabel in het eerste vak. Dit is wat op de pagina wordt weergegeven. Als u de waarde leeg laat, wordt dat ook in het formulier verzonden.

Meer toevoegen en opnieuw ordenen

Klik op het plus-pictogram om meer items toe te voegen. Als je ze opnieuw wilt rangschikken in de keuzelijst, gebruik dan de pijlen omhoog en omlaag aan de rechterkant.

Geef alle items waarden

Zoals ik in stap 8 heb vermeld, wordt het label verzonden naar het formulier als u de waarde leeg laat. U kunt echter al uw artikelwaarden opgeven om alternatieve informatie naar uw formulier te verzenden. Je zult dit veel gebruiken voor dingen zoals jump-menu's en hyperlinks.

Kies een standaard

Webpagina's worden standaard weergegeven als het dropdown-item als eerste wordt vermeld als het standaarditem. Maar als u een andere wilt selecteren, markeer deze dan in het vak "Aanvankelijk geselecteerd" in het menu Eigenschappen.

Zie uw lijst in de ontwerpweergave

Als u klaar bent met het bewerken van de eigenschappen, toont Dreamweaver uw vervolgkeuzelijst met de geselecteerde standaardwaarde.

Zie uw lijst in de codeweergave

Als u naar de codeweergave overschakelt, kunt u zien dat Dreamweaver uw vervolgkeuzemenu toevoegt met zeer schone code. De enige extra attributen zijn degenen die we hebben toegevoegd met toegankelijkheidsopties. De code is allemaal ingesprongen en zeer gemakkelijk te lezen en te begrijpen. Het plaatst zelfs het geselecteerde = "geselecteerde" attribuut omdat ik tegen Dreamweaver heb gezegd dat ik standaard XHTML schrijf.

Opslaan en weergeven in browser

Als u het document opslaat en bekijkt in een webbrowser, ziet u dat uw vervolgkeuzemenu er precies zo uitziet als u zou verwachten.

Maar het doet niets

Het menu dat we hierboven hebben gemaakt ziet er goed uit, maar het doet niets. Om het iets te laten doen, moet je een formulieractie instellen op het formulier zelf.

Gelukkig heeft Dreamweaver een ingebouwd vervolgkeuzemenuformulier dat u onmiddellijk op uw site kunt gebruiken zonder dat u meer te weten hoeft te komen over formulieren, CGI's of scripting. Het heet een springmenu.

Het Jump Menu van Dreamweaver stelt een vervolgkeuzemenu in met namen en URL's. Dan kunt u een item in het menu kiezen en de webpagina zal naar die locatie gaan, net als wanneer u op een link had geklikt.

Ga naar het menu Invoegen en kies Formulier en vervolgens Springmenu.

Jump Menu Venster

In tegenstelling tot het standaard drop-down menu opent het Jump-menu een nieuw venster om uw menu-items een naam te geven en details toe te voegen over hoe het formulier zou moeten werken.

Voor het eerste item wijzigt u de tekst "untitled1" in wat u wilt dat deze leest en voegt u een URL toe waarnaar die link moet verwijzen.

Items toevoegen aan uw Jump-menu

Klik op het item toevoegen om een ​​nieuw item aan uw jump-menu toe te voegen. Voeg zoveel items toe als je wilt.

Spring Menu-opties

Zodra u alle gewenste koppelingen heeft toegevoegd, moet u uw opties kiezen:

Open URL's in

Als je een frameset hebt, kun je de links in een ander frame openen. Of u kunt de optie van Hoofdvenster wijzigen in een speciaal doel, zodat de URL wordt geopend in een nieuw venster of elders.

Menunaam

Geef uw menu een unieke ID voor de pagina. Dit is vereist zodat het script correct werkt. Hiermee kunt u ook meerdere jump-menu's in één vorm hebben - geef ze gewoon alle verschillende namen.

Voer de Go-knop in na het menu

Ik selecteer dit graag omdat het script soms niet werkt wanneer het menu verandert. Het is ook toegankelijker.

Selecteer het eerste item na de URL-wijziging

Selecteer dit als u een prompt hebt zoals "Selecteer een" als het eerste menu-item. Dit zorgt ervoor dat dat item standaard op de pagina blijft.

Spring Menu ontwerpweergave

Net als bij uw eerste menu, stelt Dreamweaver uw jump-menu in de ontwerpweergave in met het standaarditem zichtbaar. U kunt het vervolgkeuzemenu vervolgens bewerken zoals u dat ook zou doen.

Als u het wel bewerkt, zorg er dan voor dat u geen ID's op de items wijzigt, anders werkt het script mogelijk niet.

Spring naar menu in browser

Als u het bestand opslaat en op F12 drukt, wordt de pagina weergegeven in de browser van uw voorkeur. Daar kun je een optie selecteren, op "Go" klikken en het Jump-menu werkt!