gtemata.com

Cum se creează un meniu derulant în HTML și CSS

Un meniu drop-down (de asemenea, numit meniul drop-down) oferă o imagine clară și neaglomerat a toate marile secțiuni ale unei pagini web și subcapitolele aferente conținute în acestea. Pentru a face vizibile subsecțiunile, singura acțiune cerută de utilizator este să mutați cursorul mouse-ului peste elementele din meniul principal. Crearea unui meniu drop-down implică utilizarea foilor de stil HTML și CSS.

paşi

Partea 1

Crearea codului HTML
1
Creați bara de meniu principală. Pentru a crea o bară de navigare care se extinde peste lățimea paginii web, utilizați în mod normal eticheta
. Introduceți eticheta aleasă în element
. Astfel puteți schimba cu ușurință stilul meniului.
  • 2
    Atribuiți un atribut "clasă" la fiecare secțiune a meniului. Acest atribut este foarte important și va fi folosit ulterior pentru a schimba stilul fiecărui element prin foi de stil CSS. Atribuiți un atribut "clasă" diferite de secțiune
    care va conține bara de meniu și secțiunea
  • class ="nav-înveliș">
  • 3
    Adăugați lista elementelor care vor apărea în meniu. Eticheta
      (listă neordonată) va conține secțiunile principale ale meniului, fiecare ocupat de diferitele elemente prin utilizarea etichetei
  • . Pentru a afișa meniul derulant pentru fiecare secțiune, utilizatorul trebuie pur și simplu să poziționeze cursorul mouse-ului peste el. Secțiunea identificată de etichetă
      trebuie să aibă următorul atribut "clasă": "clearfix". Ulterior, aceste date vor fi foarte importante pentru că vă vor permite să gestionați stilul meniului prin intermediul foilor CSS.
  • acasă
  • colaboratori
  • contact
  • 4
    Introduceți legăturile. Dacă secțiunile principale ale meniului ar trebui să acționeze și ca un link către paginile web relevante, este timpul să creați linkuri. Chiar dacă aceste secțiuni nu au o pagină la care să se îndrepte, creați un link inactiv folosind o ancora care nu există în cadrul HTML, cum ar fi "#!". În acest fel, când utilizatorul îl plasează pe elementul din meniul în cauză, cursorul mouse-ului își va schimba aspectul. În exemplul nostru, spre deosebire de celelalte două elemente prezente, secțiunea "contact" din meniu nu indică nicio pagină web:
  • acasă
  • colaboratori
  • contact
  • 5
    Creează listele de subsecțiuni din fiecare meniu derulant. După finalizarea creării foilor de stil CSS, aceste liste vor deveni meniurile derulante pe care le poate afișa utilizatorul. Încărcați aceste elemente în secțiunea principală a meniului corespunzător. De asemenea, în acest caz amintiți-vă să includeți atributul în fiecare element "clasă" și pentru a crea hyperlinkul relativ așa cum se vede în pasul anterior.
  • acasă
  • colaboratori
  • Michael Jordan
  • Stephen Hawking
  • contact
  • Raportați o problemă
  • Serviciul Clienți

    • Partea 2

    Creați foi de stil CSS

    1
    Deschideți foaia de stil CSS. Dacă nu ați făcut deja acest lucru, în cadrul secțiunii "cap" din documentul dvs. HTML va trebui să inserați linkul la foaia de stil CSS pe care să o utilizați. Acest articol nu explică elementele de bază privind modul de utilizare și crearea unei foi de stil CSS, de exemplu pentru a schimba culoarea fundalului sau a textului.
  • 2
    Adăugați codul "clearfix". Amintiți-vă atributul "clasă" numit "clearfix" adăugat la structura care conține elementele din meniul principal? În mod normal, elementele dintr-un meniu drop-down sunt afișate pe un fundal transparent și pot fi, de asemenea, înconjurate de alte elemente. O modificare rapidă a foii de stil CSS rezolvă această problemă de afișare. Mai jos este o soluție simplă și elegantă, deși, din păcate, nu este acceptată de Internet Explorer 7 și versiunile anterioare:
  • .clarfix: după {
  • conţinut: "";
  • afișare: tabel;
  • }
  • 3
    Creați structura de bază. Următorul cod are meniul din partea de sus a paginii, ascunzând elementele din meniurile derulante. Doar pentru a ne concentra atenția doar asupra codului relevant pentru scopurile noastre, codul CSS prezentat aici este redus intenționat la minimul necesar. Puteți să o completați prin introducerea tuturor proprietăților suplimentare de care aveți nevoie, cum ar fi gestionarea marjelor și centrarea textului.
  • .nav-wrapper {
  • lățime: 100%;
  • fundal: # 008B8B;
  • }
  • .nav-meniu {
  • Poziția: relativă;
  • display: inline-block;
  • }
  • .submeniul {
  • Poziția: absolută;
  • display: none;
  • fundal: # 555;
  • }
  • 4
    Afișarea elementelor din meniurile derulante. În momentul în care elementele pe care le compun meniurile derulante sunt configurate să nu fie afișate. Deci, următorul pas este afișarea meniului derulant asociat secțiunii principale a meniului pe care utilizatorul a poziționat cursorul mouse-ului:
  • .nav-meniu ulli: hover > ul {
  • display: block;
  • }
  • Notă: dacă elementele din meniurile derulante indică alte submeniuri, toate proprietățile adăugate acestui strat se aplică tuturor elementelor conținute. Dacă doriți ca stilul descris să fie aplicat numai la primul nivel al meniurilor drop-down, trebuie să utilizați următorul cod: ".nav-meniu > ul".
  • 5
    Oferiți meniurile derulante. Pentru a face interfața de utilizator mai intuitiv designeri web indică faptul că, de obicei, un element de meniu conține un meniu drop-down visualizzandovi de lângă o mică săgeată cu vârful în jos. Următorul cod adaugă această pictogramă mică lângă fiecare element din meniul principal:
  • .nav-meniu > ul > li: după {
  • conţinut: " 25BC"- / * cod unicode care identifică simbolul freacției * /
  • font-size: .5em;
  • afișare: bloc;
  • poziția: absolută;
  • }
  • Notă: în funcție de nevoile dvs., puteți modifica poziția în care este afișată săgeata utilizând proprietățile "top". "fund". "dreapta" sau "stânga".
  • Notă: Dacă unele secțiuni din meniul principal nu conțin un meniu drop-down, nu adăugați codul respectiv în clasă "nav-meniu". În schimb, creați oa doua clasă, numită de exemplu "drop-down", și să-l atribuie exclusiv acelor elemente "lor" din codul HTML care va trebui să afișeze pictograma săgeată. Rețineți că în codul HTML văzut în prima parte a acestui ghid va trebui să vă referiți la această clasă în locul clasei "nav-meniu".
  • 6
    Editați proprietățile CSS pe baza nevoilor dvs. În acest moment, bara de meniuri a site-ului dvs. Web ar trebui să funcționeze corect, dar trebuie să obțineți unele îmbunătățiri pentru a vă îmbunătăți aspectul și simțul. În acest scop, puteți utiliza nenumăratele proprietăți ale foilor de stil CSS, cum ar fi atributele "umplutură" sau "fundal". Dacă nu aveți prea multă experiență în gestionarea proprietăților de bază ale unei foi de stil CSS, consultați secțiunea următorul articol. Utilizați proprietățile foilor de stil CSS pentru a modifica aspectul și poziția fiecărei clase de elemente.

    • Sfaturi

    Afișați mai multe ... (4)
    Distribuiți pe rețelele sociale:

    înrudit