DifiTsi.com

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

Un meniu derulant oferă o vizualizare clară și ierarhică a tuturor elementelor și sub-elementelor de meniu de pe pagina dvs. Web. Pentru a afișa sub-elementele, deplasați mouse-ul peste elementele din meniul principal. Un meniu drop-down este ușor de construit cu HTML și CSS.

metodă

Partea 1
Scrie HTML

Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 1
1
Creați secțiunea de navigare. În mod tipic, se utilizează unul
dacă orice altceva nu se potrivește cu adevărat. Închideți acest cod cu un
Element pentru a putea personaliza atât containerul, cât și meniul însuși.
  • Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 2
    2
    Arătați fiecare secțiune cu o clasă. Atributele de clasă sunt ulterior utilizate pentru personalizarea elementelor individuale ale meniului prin intermediul CSS. Definiți containerul și meniul, fiecare cu o clasă diferită.
  • class = "nav-wrapper">
  • Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 3
    3
    Adăugați o listă cu elementele de meniu. Lista neordonată (
      ) conține elementele de meniu de sus (elementele de listă
  • ), care permite utilizatorului să deplaseze mouse-ul pentru a deschide meniurile derulante. Adăugați clasei "clearfix" la elementul de listă - acest lucru va fi discutat mai târziu în foaia de calcul CSS.
  • acasă
  • Contribuabili
  • contact
  • Imaginea cu titlul Creați un meniu derulant în HTML și CSS Pasul 4
    4
    Inserați legături. Dacă elementele de meniu de top acționează și ca linkuri către paginile respective, adăugați-le acum. Dacă nu doriți să le conectați, introduceți încă o ancoră inexistentă (de exemplu, "#!") Deci cursorul se schimbă. În exemplul nostru, elementul "contact" nu duce nicăieri, dar celelalte două elemente deja:
  • acasă
  • Contribuabili
  • contact
  • Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 5
    5
    Creați sub-elementele pentru elementele drop-down. După editarea acestora cu CSS, aceste liste devin meniuri derulante. Așezați lista în elementul de listă pe care utilizatorul o va trece peste. Adăugați o clasă și o legătură ca înainte.
  • acasă
  • Contribuabili
  • Michael Jordan
  • Stephen Hawking
  • contact
  • Raportați o eroare
  • serviciu clienți


    • Partea 2
    CSS scris

    Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 6
    1
    Deschideți foaia de stil CSS. Dacă nu ați făcut deja, conectați foaia de stil CSS în antetul documentului dvs. HTML. Acest articol nu acoperă elementele de bază ale CSS, cum ar fi setarea culorii fontului sau a fundalului.
  • Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 7
    2
    Adăugați codul de clarificare. Mai ții minte clasa "clarfix" pe care ai folosit-o pentru a defini lista? Elementele din meniurile drop-down sunt de obicei transparente, iar alte elemente se pot suprapune cu ele. CSS elimină această problemă. Iată o soluție drăguță care din păcate nu este acceptată de Internet Explorer 7 sau mai devreme:
  • .clarfix: după {
  • conținut: "";
  • afișare: tabel;
  • }
  • Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 8
    3
    Creați structura de bază. Utilizați codul de mai jos pentru a plasa bara de navigare în partea de sus a paginii și pentru a ascunde meniurile derulante. Codul este scris în mod intenționat foarte simplu, astfel încât să înțelegeți principiul de bază. Mai târziu, puteți adăuga diferite proprietăți, cum ar fi umplutura (distanța) sau marginea (marginea).
  • .nav wrapper {
  • lățime: 100%;
  • fundal: # 008B8B;
  • }
  • .nav-meniu {
  • Poziția: relativă;
  • display: inline-block;
  • }
  • .submeniul {
  • Poziția: absolută;
  • display: none;
  • fundal: # 555;
  • }
  • Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 9
    4
    Lăsați elementele meniului derulant să apară când treceți peste ele. Pe baza codului curent, elementele meniului drop-down nu sunt încă afișate. Iată cum să afișați sub-elementele atunci când faceți clic pe un element de meniu:
  • .nav-meniu ul li: hover> ul {
  • display: block;
  • }
  • Notă - dacă elementele din meniul drop-down duc la alte meniuri (fly-out), acestea vor fi afectate de toate proprietățile stabilite aici. Dacă doriți doar să personalizați primul nivel al meniului drop-down, utilizați ".nav-menu> ul"
  • Imaginea intitulată Creați un meniu derulant în HTML și CSS Pasul 10
    5
    Selectați meniul drop-down cu o săgeată. În designul web, un meniu drop-down este de obicei marcat cu o mică săgeată în jos. Cu următorul cod, adăugați o astfel de săgeată la fiecare element de meniu:
  • .nav-meniu> ul> li: după {
  • conținut: " 25BC" / * a scăpat unicode pentru săgeata în jos * /
  • font-size: .5em;
  • afișare: bloc;
  • poziția: absolută;
  • }
  • Notă - puteți schimba poziția săgeții cu proprietățile de sus, jos, dreapta sau stânga.
  • Notă - Dacă nu există un meniu drop-down în toate elementele de meniu, nu reglați întreaga clasă de navigare. În schimb, adăugați o altă clasă (dropdown, de exemplu) la fiecare element HTML pe care doriți să-l arătați. Consultați această clasă în codul de mai sus.
  • Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 11
    6
    Ajustați distanța, fundalul și alte proprietăți. Meniul dvs. ar trebui să fie acum funcțional, dar este încă foarte rar. Dacă nu sunteți familiarizat cu funcțiile de bază ale CSS, trebuie să vă informați. Cu diferite proprietăți CSS, puteți modifica aspectul și poziția fiecărui element din listă.

    • Sfaturi

    Distribuiți pe rețelele sociale:

    înrudit