Crearea de meniuri folosind css si html

anterior ◈ următoarea

Dacă site-ul web nu este limitat la o singură pagină web, ar trebui să se gândească la adăugarea unei bare de navigare (meniu). Meniu - sectiune a site-ului proiectat pentru a ajuta vizitatorii naviga prin site. Fiecare meniu este o listă de link-uri care duc la paginile interne ale site-ului. Cel mai simplu mod de a adăuga o bară de navigare pe site-ul este de a crea un meniu cu CSS si HTML.







meniu vertical

Primul pas în crearea stabilirea unei liste cu marcatori este meniul vertical. De asemenea, trebuie să fie în măsură să identifice lista, astfel încât să se adauge atributul id cu „navbar“ identificator. fiecare element

  • Lista noastră va conține un link:

    Următoarea noastră sarcină este de a reseta lista de stil, stabilită în mod implicit. Avem nevoie pentru a elimina padding interne și externe chiar listă și markeri în lista de articole. Apoi, vom seta lățimea dorită:

    Acum este timpul să stil link-ul în sine. Vom adăuga la el culoarea de fundal, schimba culoarea textului, dimensiunea fontului și greutatea, elimina subliniere, se adaugă un pic de umplutură și redefini elementul de afișare cu linia de pe bloc. În plus, la stânga și ramele de jos în listă au fost adăugate elemente.

    Cea mai importantă parte a modificărilor noastre este o redefinire a elementelor rând din bloc. Acum, link-urile noastre ocupă tot spațiul disponibil lista de articole, care este de a urma link-ul, nu mai avem nevoie pentru a muta mouse-ul exact pe text.

    Am combinat toate din cod, așa cum este descris mai sus, într-un exemplu, acum încercați să faceți clic pe butonul, puteți sări la pagina și a vedea un exemplu de rezultat:







    Când treceți cu cursorul mouse-ului peste meniul aspectul poate varia, atrăgând atenția utilizatorului. Creați un astfel de efect, puteți utiliza pseudo-clasa: hover.

    Să ne întoarcem la exemplul de mai sus a meniului vertical și se adaugă la foaia de stil următoarea regulă:

    meniu orizontal

    Puteți crea un meniu orizontal prin stilizarea o listă simplă. Proprietatea pentru a afișa elemente

  • aveți nevoie pentru a atribui o valoare inline, lista cu elemente dispuse unul în spatele celuilalt.

    Scrie pentru un cuplu de lista noastră de reguli de descărcare stil este utilizat pentru listele implicite, și lista de elemente pentru a redefini blocul în litere mici:

    Acum ne rămâne doar pentru a determina stilul pentru meniul nostru orizontal:

    Meniul drop-down

    Meniul, pe care o vom crea va avea link-urile de navigare principală, situată în bara de navigare pe orizontală, și paragrafe care sunt afișate numai atunci când cursorul mouse-ului la elementul de meniu la care se aplică paragrafele.

    În primul rând avem nevoie pentru a crea HTML-structura a meniului nostru. Principalele link-uri de navigare am pus într-o listă cu marcatori:

    Subparagrafele vom plasa într-o listă separată, punând-o într-o celulă

  • , care conține un link către mamă în ceea ce privește sub-paragrafe. Acum avem o structură clară pentru barul nostru de navigare în viitor:

    Apoi, trebuie să ne asigurăm că ne submeniu drop-down nu se schimba conținutul sub bara de navigare în jos. Pentru a face acest lucru, vă rugăm poziția lista de puncte: relativă;. și o selecție a sub-position: absolute; și se adaugă o proprietate de top, cu o valoare de 100%, la un submeniu pozitionat absolut afișat chiar sub link-ul.

    Înălțimea listei părinte a fost adăugat în mod specific, deoarece browserele nu ia în considerare conținutul ca conținutul unui element flotant, fără a adăuga înălțimea listei noastre vor fi ignorate de browser-ul și conținutul de mai jos lista va încheia în jurul meniul nostru.

    Acum trebuie să stiliza amândoi lista noastră și în meniul drop-down va fi gata:







    • anterior ◈ următoarea