Cum se creează un meniu drop-down cu HTML și CSS

Meniurile drop-down oferă o imagine clară și ierarhică asupra tuturor secțiunilor principale ale unei pagini web, precum și a subsecțiunilor conținute în fiecare dintre ele. Tot ce trebuie să faceți pentru a crea subsecțiunile este să mutați cursorul mouse-ului peste secțiunile principale. Puteți face un meniu drop-down folosind doar cod HTML și CSS.

conținut

Pași
Partea 1scrieți codul html
Partea 2scrieți codul css
Sfaturi

pași

Partea 1
Scrieți codul HTML

Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 1

Creați secțiunea de navigare. În mod normal, este mai bine să le folosiți

când aparent niciuna dintre celelalte opțiuni nu se potrivesc mai bine. Plasați această secțiune într-un element

astfel încât să puteți aplica atât stilul containerului, cât și aceluiași meniu.

Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 2

Dați fiecărei secțiuni un atribut de clasă. Veți folosi atributul de clasă mai târziu pentru a aplica stil acestor elemente utilizând CSS. Oferiți un atribut de clasă containerului și altui meniu separat.

class ="nav-înveliș">

Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 3

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

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

), pe care utilizatorul poate trece pointerul mouse-ului pentru a vedea meniurile derulante. Adăugați o clasă "clearfix" în articolul dvs. de listă, îl veți folosi mai târziu, atunci când dezvoltați foaia CSS.

inițiere

contribuitori

Contactați-ne

Imaginea cu titlul Creați un meniu derulant în HTML și CSS Pasul 4

Introduceți linkuri Dacă elementele de meniu de nivel superior sunt, de asemenea, legate de propriile dvs. pagini, inserați linkurile corespunzătoare acum. Chiar dacă nu sunt legate de niciun alt site, acesta include legături către o ancoră inexistentă (de exemplu "#!") astfel încât cursorul utilizatorului să își modifice aspectul. În acest exemplu, "Contactați-ne" Nu duce nicăieri, dar celelalte două meniuri fac:

inițiere

contribuitori

Contactați-ne

Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 5

Creați subliste pentru elementele din meniul drop-down. Odată ce ați aplicat stilurile, aceste liste vor deveni un meniu derulant. Nest liste în cadrul elementului din lista pe care utilizatorul va trece cursorul. Includeți un atribut de clasă și un link, la fel cum ați făcut înainte.

Serviciu de asistență

Partea 2
Scrieți codul CSS

Imaginea intitulată Creați un meniu derulant în format HTML și CSS Pasul 6

Deschideți foaia dvs. de stil CSS Adăugați un link la foaia de stil CSS din secțiune "cap" (antetul) al documentului dvs. HTML, dacă nu ați făcut-o deja. Acest articol nu acoperă aspectele de bază ale CSS, cum ar fi stabilirea unui font și a unei culori de fundal.

Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 7

Adăugați codul "clearfix". Vă amintiți de clasă "clearfix" Ce ați adăugat în lista de meniuri? În mod normal, elementele dintr-un meniu derulant au un fundal transparent și împing alte elemente în alte direcții. Puteți rezolva această problemă cu o setare CSS rapidă. Aici aveți o soluție practică și ușoară, deși nu este compatibilă cu Internet Explorer 7 și versiunile anterioare:

.clarfix: după {

conţinut: ""-

afișare:

}

Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 8

Creați designul de bază. Acest cod va sorta meniul din partea de sus a paginii și va ascunde elementele din meniul derulant. Acesta este în mod intenționat un exemplu limitat, pentru a vă concentra doar pe codul relevant. Apoi, puteți să o îmbunătățiți prin adăugarea de proprietăți CSS suplimentare, cum ar fi "umplutură" (umplutură) și "margine" (Marja).

.nav-wrapper {

lățime: 100% -

fundal: # 999-

}

.nav-meniu {

poziția: relativ-

afișare: inline-block-

}

.nav-menu li {

afișare: inline-

listă de tip: none-

}

.submeniul {

pozitie: absolut-

display: none-

fundal: # ccc-

}

Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 9

Faceți elementele drop-down să apară când treceți cursorul. Elementele din lista derulantă sunt setate în prezent să nu fie afișate. Aici veți vedea cum să faceți o sublistă completă apărând trecând cu mouse-ul peste lista din care face parte:

.nav-meniu ul li: hover > ul {

afișare: inline-block-

}

Notă: dacă elementele din meniul derulant conduc la meniuri suplimentare (controale plutitoare), toate proprietățile pe care le adăugați aici le vor afecta pe toate. Dacă doriți ca stilul să se aplice doar la primul nivel al meniurilor drop-down, utilizați ".nav-meniu > ul".

Imaginea intitulată Creați un meniu derulant în HTML și CSS Pasul 10

Indică meniul derulant cu o săgeată. Deseori, designerii web afișează că un element deschide un meniu drop-down folosind o săgeată care indică în jos. Acest cod va adăuga acea săgeată pentru fiecare dintre elementele de meniu:

.nav-meniu > ul > li: după {

conţinut: " 25BC"- / * codul unicode al săgeții în jos * /

font-size: .5em-

afișare: inline-

poziția: relativ-

}

Notă: efectuați ajustările necesare pentru a schimba poziția săgeții folosind proprietățile "top" (De mai sus), "fund" (Mai jos), "dreapta" (dreapta) sau "stânga" (Stânga).

Notă: dacă nu toate elementele de meniu conțin săgeți îndreptate în jos, nu aplicați stilul în întreaga clasă "nav-meniu". În schimb, adăugați o altă clasă (de exemplu, "drop-down") în fiecare element

din HTML unde doriți să apară săgeata. În codul anterior, consultați această ultimă clasă.

Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 11

Reglați umplerea, fundalul și alte proprietăți. Meniul dvs. va funcționa acum, dar ar fi bine să faceți un tratament de frumusețe. Dacă nu sunteți familiarizați cu proprietățile de bază ale CSS, puteți căuta un ghid online despre cum să programați în CSS. Utilizați aceste proprietăți pentru a face alte modificări în aspectul și poziția fiecărei clase de elemente.