Pe această pagină există exemple pentru crearea meniului orizontal al site-ului utilizând HTML și CSS. În plus, legăturile din aceste meniuri sunt aranjate orizontal, ele sunt unite de o altă caracteristică: textul din interiorul legăturilor este într-adevăr textul inclus în etichetă . și nu imagini, unde textul face parte din imagine.
Practica obișnuită este de a crea navigație bazată pe liste, deci luăm în considerare și aceste opțiuni. Din motive de reducere a codului, exemplele nu vor folosi delocuri decorative, cum ar fi colțurile rotunjite, dar trebuie să vă amintiți că linkurile din CSS pot fi modificate în multe feluri. Prin urmare, dacă este necesar, puteți adăuga cu ușurință stilurile necesare codului CSS pentru a obține meniul orizontal de care aveți nevoie.
Și încă un lucru. În toate exemplele, veți găsi un element de meniu cu class = "curent", care nu conține un link. Este demonstrativ și indică modul în care ar trebui să arate elementul de meniu, care corespunde paginii pe care se află utilizatorul. Faptul că Internetul este o bună practică pentru lipsa de link-uri către pagini care se leagă de ea însăși și de modul în care, cu privire la aceiași oficiali spun motoarele de cautare (Yandex, Google, etc.).
Meniul orizontal simplu
Cel mai simplu meniu orizontal, fără nici un fel de bibelouri.
Exemplu HTML și CSS: meniu orizontal simplu
Descrierea exemplului
- Creați o listă cu marcatori (etichetă
- ), în care punem legăturile HTML (etichetă ). Eliminați din această listă și marcajele sale de elemente (stil listă CSS), precum și câmpuri externe (marginea CSS) și linii interne (CSS padding).
- Pentru etichete
- aliniate orizontal - făcându-le inline (inline) utilizând afișarea CSS: proprietate inline.
- Din moment ce elementele din listă dispunem acum de un nivel de rând, le putem alinia cu ușurință la marginea stângă sau dreaptă a blocului folosind textul-aliniere CSS.
Puteți să aranjați elementele de meniu într-o singură linie și să le aliniați într-un alt mod - înlocuind ultimele două paragrafe ale descrierii cu proprietatea floating CSS cu valoarea stânga sau dreapta. Dar aici trebuie să înțelegem că, odată cu valoarea rămasă, elementele vor lua ordinea corectă, dar cu dreptate (ca în exemplul nostru) ele vor lua ordinea inversă și vor trebui să facă schimb de legături.
Blocați meniul orizontal (float)
În acest meniu, link-urile sunt blocuri pe care le puteți modifica lățimea și înălțimea, dacă este necesar.
Exemplu HTML și CSS: blocați meniul orizontal cu float
Descrierea exemplului
- Folosind floating-ul proprietății CSS: stânga, aranjăm elementele listei pe orizontală și adăugăm fiecăruia o margine dreaptă (marginea dreaptă CSS) astfel încât să nu se potrivească împreună.
- Facem blocuri încorporate (afișare CSS: inline-block) din linkuri, astfel încât să poată fi redimensionate dacă este necesar. În final, setăm toate elementele meniului orizontal la designul necesar.
Deoarece elementele de meniu sunt afișate în stânga, elementele HTML care vor fi sub navigație vor putea, de asemenea, să curgă în jurul lor. Pentru a preveni acest lucru, puteți face o întrerupere a fluxului utilizând proprietatea de ștergere CSS sau setați un bloc cu class = "meniu" la o înălțime garantată a fi mai mare decât înălțimea legăturilor.
Blocați meniul orizontal (afișaj)
Vom face un alt meniu bloc, dar într-un mod ușor diferit.
Exemplu HTML și CSS: blocați meniul orizontal cu afișaj
Descrierea exemplului
- Pentru a aranja elementele de meniu pe o linie orizontală, vom folosi din nou afișajul: inline. Acest lucru ne permite apoi să aliniem elementele listei la centru.
- Ei bine, convertim legăturile și eticheta cu class = "current" în blocuri încorporate, astfel încât să poată specifica și modifica în mod explicit lățimea (lățimea CSS) și înălțimea (înălțimea CSS), dacă este necesar.
- Noi atribuim toate elementele design-ul necesar sub forma de cadre, culori de text, fundal etc.
Meniu orizontal cu file
Să ne schimbăm puțin exemplul anterior și să facem un meniu care arată ca o filă. Asemenea lucruri sunt destul de des folosite pe site-uri web.
Exemplu HTML și CSS: un meniu bloc orizontal cu file
Descrierea exemplului
Acest exemplu este similar cu cel precedent, deci luați în considerare doar diferențele.
- Am lăsat doar marginea inferioară a frontierei (partea frontală CSS) în blocul principal al meniului nostru orizontal și, de asemenea, schimbăm umplutura interioară (CSS padding), astfel încât elementele listă să fie apăsate la această margine. De data aceasta, nu vom alinia elementele de meniu pe ambele părți sau în centru, ci doar să setăm o margine stângă mare pe blocul principal, astfel încât să le împingă ușor de la margine.
- Ca urmare a acțiunilor din prima etapă, elementele noastre din meniu și, prin urmare, legăturile au fost presate împotriva limitei inferioare a blocului principal. Cu toate acestea, trebuie să ne asigurăm că nu doar că se încrederă, ci că părțile inferioare ale legăturilor la această frontieră sunt suprapuse. Pentru a face acest lucru, atribuim poziționarea relativă (poziția CSS: relativă) elementelor din listă și le deplasăm pe o distanță egală cu grosimea cadrelor (avem 2px). Decalajul se face folosind fundul proprietății CSS.
- Pentru elementul "curent" și linkurile, atunci când mutați cursorul mouse-ului peste ele (CSS: hover), redefiniți culoarea frontală a frontierei (CSS border-bottom-color) și faceți-o la fel ca fundalul acestor elemente. Deci, ascundem marginea inferioară în locurile de legături suprapuse și obținem efectul filelor.
- Cum sa faci un site web
Pentru ea însăși și gratuit - Tutorial HTML
Pentru începători - CSS Tutorial
Pentru începători - Referințe
Prin HTML și CSS - exemple
HTML și CSS - referințe
Site-uri utile pentru webmasteri - unelte
Programe pentru crearea site-urilor web
Trimiteți-le prietenilor: