Cum Se Face Un Meniu Orizontal Derulant

Cuprins:

Cum Se Face Un Meniu Orizontal Derulant
Cum Se Face Un Meniu Orizontal Derulant

Video: Cum Se Face Un Meniu Orizontal Derulant

Video: Cum Se Face Un Meniu Orizontal Derulant
Video: How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials 2024, Mai
Anonim

Unul dintre cele mai importante aspecte în dezvoltarea de software și site-uri web este crearea de meniuri. Microsoft și cel mai faimos concept creat de acesta, sistemul de operare Windows, ar trebui luat ca un prim exemplu. În ciuda faptului că acest produs este utilizat de majoritatea covârșitoare a utilizatorilor de PC-uri din lume, criticile nu numai că nu scad, dar sunt în continuă creștere. Practic, se referă la inconvenientul localizării elementelor de meniu. Următoarea este o descriere a modului de creare a meniurilor în CSS și Expression Web.

Cum se face un meniu vertical orizontal
Cum se face un meniu vertical orizontal

Instrucțiuni

Pasul 1

Pentru a începe crearea unui meniu orizontal, accesați Gestionare stil, apoi faceți clic pe butonul Stil nou. Denumiți noul stil Selector ul li. Important! Asigurați-vă că fișierul generat are extensia drop-down.css. Pentru a crea un meniu orizontal, indicați elementului creat că acesta va fi exact orizontal. Apoi, determinați lățimea fiecărui element de meniu și eliminați toate punctele inutile plasate în fața tuturor elementelor din listă.

Pasul 2

Accesați opțiunea Aspect, setați atributul Afișare la Inline pentru a face alinierea orizontală. Apoi, setați valoarea din stânga la atributul Float și faceți clic pe butonul Aplicare. Setați toate elementele listei la un singur rând. Pentru ca acestea să fie așezate îngrijit și să nu se acceseze cu crawlere unele peste altele, în atributul Lățime, setați valoarea poziției la 150 px. Verificați dacă toate elementele listei au aceeași dimensiune. Apoi, eliminați punctele din fața tuturor elementelor - pentru aceasta, accesați atributul List și setați parametrul None în elementul de tip List Style. Faceți clic pe OK pentru ca toate modificările să fie acceptate și aplicate.

Pasul 3

Reglați dimensiunea și stilul fontului pentru ul li. Pentru a face acest lucru, accesați Gestionare stiluri și faceți clic dreapta pe ul ul, apoi selectați Modificare stil. Va apărea caseta de dialog familiară. Mergeți la Font, selectați atributul Font-family și setați-l la Sans-serif, Arial, Helvetica. Apoi, ajustați dimensiunea fontului setându-l la 0, 9. După aceea, setați atributul Text-transform la Majuscule. Reglați înălțimea elementelor de meniu din atributul Înălțime - Poziție, setând valoarea la 30 px.

Pasul 4

După finalizarea tuturor acțiunilor corective, salvați fișierul ca meniu.html. Apoi, testați meniul creat în diferite browsere pentru a vă asigura că funcționează corect. După cum puteți vedea, designul meniului orizontal este destul de simplu.

Recomandat: