Meniul este utilizat pentru a facilita navigarea utilizatorului prin secțiunile de pe site. Pentru a atrage atenția vizitatorului, meniul trebuie să fie funcțional, ușor de utilizat și, în același timp, să fie combinat cu designul întregii resurse.
Instrucțiuni
Pasul 1
Înainte de a crea un meniu, decideți tipul acestuia. Puteți crea o casetă verticală orizontală sau verticală care va fi afișată utilizatorului atunci când utilizatorul trece deasupra ei cu cursorul mouse-ului. Atunci când alegeți un anumit meniu, puteți fi ghidat de cât de convenabil va fi vizitatorii să îl folosească și de cum va fi combinat cu designul.
Pasul 2
După ce ați ales un tip de meniu, deschideți fișierul de pagină folosind orice editor de text pe care îl utilizați pentru a edita HTML. Navigați la secțiunea de cod dorită în care doriți să introduceți elementul de interfață.
Pasul 3
După aceea, faceți o listă de opțiuni creând un bloc și făcând o listă numerotată cu id-ul atribuit acestuia. De exemplu:
- Legătura 1
- Legătura 2
- Legătura 3
În acest exemplu, am creat o listă marcată cu trei elemente și am plasat-o într-un strat div cu ID-ul panoului ID.
Pasul 4
Accesați blocul de secțiuni al paginii dvs. și creați meniul corespunzător pentru foaia de stil în cascadă. Dacă doriți să creați un meniu orizontal, puteți include atributul inline pentru lista rezultată:
#panel ul li {display: inline; }
Pasul 5
Pentru a crea o linie orizontală pe toată lungimea paginii, puteți utiliza următorul cod:
#panel ul {margin-left: 0; umplutură: 2px 0; }
Pasul 6
Apoi puteți face împărțirea vizuală în dreptunghiuri:
#panel ul li a {margin-left: 3px; chenar: 1px; umplutură: 2px 3px; fundal: albastru; }
Acest cod setează indentări de text de la elementele de margine prin atributele marginii-stânga și de umplere și, de asemenea, stabilește o culoare de fundal pentru fiecare dintre elementele listei. În acest exemplu, culoarea este albastră, dar o puteți schimba la propria voință.
Pasul 7
Pentru a indica elementul de pe pagina curentă selectat în filă, setați parametrii corespunzători la clasa deschisă:
#menu ul li a # open {background: red; frontieră-fund: 1 px; }
Pagina curentă selectată în panou va fi afișată acum în roșu.
Pasul 8
Salvați modificările la fișier și verificați funcționalitatea codului scris deschizând pagina dvs. printr-un browser. Pentru a seta opțiuni de afișare suplimentare, puteți adăuga oricând CSS sau HTML pentru a îmbunătăți aspectul obiectului.
