Creați un meniu drop-down cu HTML și CSS

Cu un meniu drop-down creați o imagine de ansamblu clară și ierarhică a tuturor părților importante de pe pagină și a subsecțiunilor pe care le conține pagina. Trebuie doar să mutați mouse-ul peste secțiunile principale pentru a face ca subsecțiunile să apară. Puteți crea un meniu drop-down utilizând numai codurile HTML și CSS.

pași

2

Dați fiecărei secțiuni un atribut de clasă. Vom folosi atributul de clasă mai târziu pentru a personaliza stilul acestor elemente cu CSS. Dați containerului și meniului propriul atribut de clasă.

3

Adăugați o listă cu elementele de meniu. Lista neordonată (

) conține elementele din meniul principal (elementele de listă

4

Adăugați linkuri. Dacă aceste elemente de meniu de nivel superior se leagă și de propriile lor pagini, puteți introduce acum link-urile. Legătura cu o ancoră inexistentă (cum ar fi "#!"), chiar dacă nu leagă nicăieri, astfel încât cursorul utilizatorului să arate diferit. În acest exemplu, Contactul nu duce la nimic, dar celelalte două elemente de meniu fac:

5

Creați subliste pentru elementele drop-down. După crearea stilului, aceste liste formează meniul derulant. Plasați lista în lista pe care utilizatorul îl va deplasa cu mouse-ul. Adăugați un atribut de clasă și un link, la fel ca înainte.

2

Adăugați cod clarfix. Vă amintiți "clearfix"-class adăugat la lista de meniuri? În mod normal, elementele meniului drop-down au un fundal transparent, permițând mutarea altor elemente. O simplă adaptare la CSS poate rezolva această problemă. Aici este o soluție plăcută și rapidă, deși acest lucru nu funcționează în Internet Explorer 7 și mai devreme:

3

Creați designul de bază. Cu acest cod puteți să vă plasați meniul în partea de sus a paginii și să ascundeți elementele derulante. Acest lucru este deliberat foarte sobru, astfel încât să ne putem concentra asupra codului relevant. Puteți să o reglați ulterior cu un cod suplimentar CSS, cum ar fi umplutura și marginea.

4

Aruncați elementele drop-down atunci când mutați mouse-ul peste ele. Elementele din lista derulantă sunt acum setate astfel încât să nu fie afișate. Iată cum puteți face o sublistă completă să apară de îndată ce treceți "părinte" mișcări:

5

Utilizați o săgeată pentru a indica faptul că există un meniu derulant. Desenatorii web, în ​​mod normal, arată cu o săgeată în jos că un element deschide un meniu drop-down. Acest cod adaugă acea săgeată la fiecare element din meniul dvs.:

6

Reglați umplutura, fundalul și alte proprietăți. Meniul funcționează acum când este bine, dar nu este încă foarte frumos. Cu proprietățile din CSS puteți ajusta modul în care arată fiecare clasă sau element și în ce poziție se află.