Cum se creează un meniu derulant în Dreamweaver

Puteți plasa eticheta înainte sau după meniul derulant.

Cheie de acces

Aceasta este cheia care poate fi folosită împreună cu tastele Alt sau Opțiuni pentru a ajunge direct la câmpul respectiv. Acest lucru face ca formele dvs. să fie foarte ușor de utilizat fără a necesita un mouse.

Indice tab

Acesta este ordinea în care câmpul de formular trebuie să fie accesat atunci când se utilizează tastatura pentru file prin intermediul paginii Web.

Când ați actualizat opțiunile de accesibilitate, faceți clic pe OK.

Selectați meniul

Odată ce ați afișat meniul drop-down în vizualizarea de proiectare Dreamweaver, trebuie să adăugați diferite elemente în el. Mai întâi selectați meniul derulant dând clic pe el. Dreamweaver va pune o altă linie punctată în jurul meniului derulant, pentru a arăta că l-ați selectat.

Proprietăți ale meniului

Meniul de proprietăți se va schimba în proprietățile listă / meniu pentru meniul derulant respectiv. Acolo puteți oferi meniului dvs. un ID (unde se spune "selectați"), decideți dacă vreți să fie un lis sau un meniu, dați-i o clasă de stil din foaia dvs. de stil și atribuiți valori drop-down.

Care este diferența dintre listă și meniu?

Dreamweaver apelează un meniu drop-down din meniu în orice meniu care permite doar o selecție. O "listă" permite mai multe opțiuni în meniul derulant și poate fi mai mare decât un element ridicat.

Dacă doriți ca un meniu vertical să fie mai multe linii înalte, schimbați-l într-un tip "listă" și lăsați neinchizată caseta "selecții".

Adăugați elemente de listă nouă

Pentru a adăuga elemente noi în meniu, faceți clic pe butonul "Valori listă …". Aceasta va deschide fereastra de mai sus. Introduceți eticheta articolului în prima casetă. Aceasta este ceea ce se va afișa pe pagină. Dacă lăsați valoarea necompletată, aceasta va fi și cea care va fi trimisă în formular.

Adăugați mai multe și reordonați

Faceți clic pe pictograma plus pentru a adăuga mai multe elemente. Dacă doriți să le comandați din nou în caseta de listă, utilizați săgețile sus și jos din partea dreaptă.

Dați toate valorile elementelor

După cum am menționat în pasul 8, dacă lăsați valoarea necompletată, eticheta va fi trimisă la formular. Dar puteți da toate valorile elementelor dvs. - pentru a trimite informații alternative la formularul dvs. Veți folosi acest lucru foarte mult pentru lucruri cum ar fi meniurile de salt și hiperlink.

Alegeți o valoare implicită

Paginile Web implicite pentru a afișa elementul drop-down este listat mai întâi ca element implicit. Dar dacă doriți să fie selectat altfel, evidențiați-l în caseta "Initially selected" din meniul Properties.

Vedeți lista dvs. în vizualizarea Design

După ce ați terminat editarea proprietăților, Dreamweaver va afișa lista verticală cu valoarea implicită selectată.

Vedeți lista dvs. în vizualizarea codului

Dacă treceți la vizualizarea de cod, puteți vedea că Dreamweaver vă adaugă meniul drop-down cu un cod foarte curat. Singurele atribute suplimentare sunt cele pe care le-am adăugat cu opțiuni de accesibilitate. Codul este complet indentat și foarte ușor de citit și de înțeles. Se pune chiar și în atributul selectat = "selectat", pentru că i-am spus lui Dreamweaver că implicit scriu XHTML.

Salvați și vizualizați în browser

Dacă salvați documentul și îl vizualizați într-un browser web, puteți observa că meniul drop-down arată la fel cum v-ați aștepta.

Dar nu face nimic …

Meniul pe care l-am creat de mai sus arată bine, dar nu face nimic. Pentru a face ceva pentru a face ceva, trebuie să creați o acțiune pe formular în sine.

Din fericire, Dreamweaver are un meniu drop-down meniu încorporat pe care îl puteți utiliza imediat pe site-ul dvs., fără a fi nevoie să aflați despre formulare, CGI-uri sau scripting. Se numește Meniul de salt.

Meniul Jump Dreamweaver stabilește un meniu drop-down cu nume și adrese URL. Apoi puteți alege un element din meniu și pagina Web se va muta în acea locație, ca și cum ați fi făcut clic pe un link.

Mergeți la meniul Inserare și alegeți Formă și apoi Jump Meniul.

Salt la fereastra meniului

Spre deosebire de meniul derulant standard, meniul Jump deschide o fereastră nouă pentru a vă numi articolele de meniu și pentru a adăuga detalii despre modul în care ar trebui să funcționeze formularul.

Pentru primul articol, schimbați textul "untitled1" la ceea ce doriți să îl citească și adăugați o adresă URL la care ar trebui să accesați acel link.

Adăugați elemente în meniul dvs. de salt

Faceți clic pe elementul de adăugare pentru a adăuga un element nou în meniul dvs. de salt. Adăugați cât mai multe elemente pe care le doriți.

Alegeți opțiunile meniului

După ce ați adăugat toate legăturile dorite, trebuie să alegeți opțiunile:

Deschideți adrese URL în

Dacă aveți un set de cadre, puteți deschide linkurile într-un cadru diferit. Sau puteți schimba opțiunea ferestrei principale la o destinație specială, astfel încât adresa URL să se deschidă într-o fereastră nouă sau în altă parte.

Nume meniu

Dați meniului un cod unic pentru pagină. Acest lucru este necesar pentru ca scriptul să funcționeze corect. De asemenea, vă permite să aveți mai multe meniuri de salt într-o singură formă - dați-le doar toate numele diferite.

Introduceți butonul Du-te după Meniu

Îmi place să selectez acest lucru deoarece, uneori, scriptul nu funcționează atunci când se modifică meniul. Este și mai accesibil.

Selectați primul element după modificarea adresei URL

Selectați această opțiune dacă aveți un element de selectare ca "Primul element de meniu". Acest lucru va asigura ca elementul respectiv sa ramana implicit pe pagina.

Salt în meniu Vizualizare proiect

La fel ca în primul meniu, Dreamweaver configurează meniul de salt în vizualizarea de proiectare cu elementul implicit vizibil. Puteți edita apoi meniul drop-down ca și dvs.

Dacă îl editați, asigurați-vă că nu modificați codurile de identificare ale elementelor, în caz contrar scriptul ar putea să nu funcționeze.

Salt în meniu în browser

Salvarea fișierului și apăsarea lui F12 va afișa pagina în browserul preferat. Acolo puteți selecta o opțiune, faceți clic pe "Du-te" și meniul de salt funcționează!