itholoinfo.com.com

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

Un meniu derulant oferă o vizualizare clară, ierarhică a secțiunii principale a unei pagini și a subsecțiunilor acesteia. Tot ce trebuie să faceți pentru a crea subsecțiunea este să plasați cursorul peste secțiunea principală. Puteți face acest lucru folosind numai limbile de programare HTML și CSS.

pași

Partea 1
Programarea codului HTML

Imagine intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 1
1
Creați secțiunea de navigare. În general, oamenii folosesc
  • Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 2
    2
    Oferiți un atribut de clasă fiecărei secțiuni. Vom folosi atributul de clasă mai târziu pentru a stiliza aceste elemente utilizând CSS. Atribuiți clase separate pentru container și pentru meniu.
    • class = "nav-wrapper">
  • Imaginea intitulată Creați un meniu derulant în format HTML și CSS Pasul 3
    3
    Adăugați o listă cu elementele de meniu. O listă neordonată (
      ) conține elementele de meniu de sus (elementele de listă
    • ), peste care utilizatorii se deplasează peste meniurile drop-down. Adaugă clasa "clarfix" la elementul de listă (vom reveni la acea clasă mai târziu în foaia de stil CSS).
        • Pagina principală
        • angajați
        • Contactați-ne
  • Imagine intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 4
    4
    Introduceți legăturile. Dacă meniurile de nivel superior au, de asemenea, linkuri către propriile pagini, introduceți-le acum. Dacă nu au link-uri, creați unul pentru o pagină inexistentă (cum ar fi "#!"). Astfel că cursorul utilizatorului modifică aspectul. În acest exemplu, linkul "Contact" nu duce la nicio pagină, dar celelalte două elemente de meniu fac:
  • Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 5
    5
    Creați o sublistă pentru elementele suspendate. După terminarea stilului, aceste liste vor deveni meniul drop-down. Păstrați-o în lista de articole pe care utilizatorul o va deplasa. Ca și înainte, includeți un atribut de clasă și un link.


    • Partea 2
    Programarea codului CSS

    Imagine intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 6
    1
    Deschideți foaia de stil CSS. Conectați foaia de stil CSS la secțiunea "cap" a documentului HTML dacă nu ați făcut deja acest lucru Acest articol nu preda elementele de bază ale limbajului de programare CSS, cum ar fi setarea fontului și culoarea de fundal.
  • Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 7
    2
    Adăugați codul "clarfix". Amintiți-vă clasa "clarfix" pe care ați adăugat-o în lista de meniuri? În mod obișnuit, elementele meniului drop-down au un fundal transparent și pot intercală alte elemente din jurul acestuia. Un mic cod CSS poate rezolva această problemă. Iată o soluție simplă și ușoară, dar nu este acceptată de Internet Explorer 7 sau mai devreme:
    • .clarfix: după {
    • conținut: "" -
    • afișare:
    • }
  • Imaginea intitulată Crearea unui meniu derulant în HTML și CSS Pasul 8
    3
    Creați structura de bază. Acest cod organizează meniul din partea de sus a paginii și ascunde elementele suspendate. Acest lucru este strict funcțional pentru a vă concentra pe codul relevant - puteți să îl molidați cu proprietăți CSS suplimentare, cum ar fi umplerea și 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
    4
    Efectuați un element suspendat apărând trecând cu mouse-ul peste el. Elementele din lista derulantă sunt setate să nu apară. Iată cum se poate face o sublistă întreagă prin plasarea cursorului pe lista din care face parte:
    • .nav-meniu ul li: hover> ul {
    • afișare: inline-block-
    • }
    • Notă: dacă elementele meniului derulant conduc la meniuri suplimentare (controale plutitoare), toate proprietățile adăugate aici vor afecta toate acestea. Dacă doriți să stil doar primul nivel al meniului drop-down, utilizați ".nav-meniu> ul".
  • Imaginea intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 10
    5
    Afișați meniul drop-down cu o săgeată. Deseori, designerii web indică faptul că un element deschide un meniu derulant cu o săgeată îndreptată în jos. Următorul cod adaugă această săgeată la fiecare element de meniu:
    • .nav-meniu> ul> li: după {
    • conținut: " 25BC" - / * cod unicode pentru săgeata indicatoare în jos * /
    • font-size: .5em-
    • afișare: inline-
    • poziția: relativ-
    • }
    • Notă: efectuați ajustări la poziția săgeții utilizând proprietățile "sus" (de mai sus), "partea de jos" (mai jos), "dreapta" sau "stânga" (stânga).
    • Notă: Dacă nu toate elementele de meniu sunt suspendate, nu stilul întregii clase "nav-menu". În schimb, adăugați o altă clasă (cum ar fi clasa drop-down) în fiecare element HTML "li" în care doriți să plasați săgeata. În codul de mai sus, menționați această clasă.
  • Imagine intitulată Crearea unui meniu derulant în format HTML și CSS Pasul 11
    6
    Reglați umplerea, fundalul și alte proprietăți. Meniul ar trebui să fie acum funcțional, dar va avea nevoie de stil. Dacă nu sunteți familiarizați cu proprietățile CSS de bază, căutați un ghid pe internet. Utilizați aceste proprietăți pentru a modifica aspectul și plasarea fiecărei clase de elemente.

    • sfaturi