Bare de navigare folosind CSS. Bară de navigare orizontală foarte simplă Cum se creează o pagină web cu navigare CSS
Să începem prin a ilustra o structură HTML tipică. Iată o diagramă a unei bare de navigare tipice, care conține mai multe link-uri.
Codul HTML este extrem de simplu: un bloc div și o listă neordonată în interior. După cum probabil știți, a fost introdusă specificația HTML5 element nou(nav) care identifică bara de navigare. Eticheta nav înlocuiește eticheta div generică, dar după cum puteți vedea mai jos, structura generală a barei de navigare nu se schimbă.
Organizarea barei de navigare folosind o listă neordonată (ul) este întotdeauna o practică bună, mai ales dacă trebuie să organizați interacțiuni mai complexe între legăturile principale și submeniuri.
În fața dumneavoastră Exemplu HTML aspectul panoului de navigare cu submeniuri.
Sugestii CSS
Deocamdată, să ne uităm la trei lucruri care vă vor îmbunătăți codul CSS. Înălțimea etichetei li trebuie să fie egală cu înălțimea listei neordonate (ul).
Pentru o aliniere verticală perfectă a textului, setați proprietatea line-height la înălțimea etichetei ul.
Pentru o navigare ușoară prin site, pe toate paginile este folosit un meniu pentru ca utilizatorul să înțeleagă ce și unde aveți. Aproape întotdeauna în partea de sus a paginii (în antet) există meniu orizontal pe secțiuni (categorii) site-ului, iar meniul vertical este scris în bara de site (într-o coloană) și este folosit pentru a naviga prin articole.
Din articol veți înțelege cum să faceți un meniu pentru un site html, ce trebuie să scrieți pentru a obține un meniu orizontal și vertical în css, sau un meniu cu o listă derulantă.
Pentru a face un meniu (orice) vom folosi listă cu puncte, căruia îi vom atribui direct propria noastră clasă și vom scrie parametrii noștri pentru această clasă cu valorile necesare.
De exemplu, pentru a crea un meniu folosim o listă cu clasa class="menu" (orice nume de clasă, doar litere latine), iar codul html va arăta astfel:
ÎN styling pentru meniu Am specificat proprietățile necesare cu valorile necesare:
Parametri și valori CSS obligatorii
- marja: 0; - eliminați toate indentările listei, altfel browserul va înlocui valorile implicite de 20px;
- list-style-type: niciunul; - eliminați marcajele din elementele de meniu, altfel browserul va adăuga puncte sau numere.
Asa se face meniul pagini html, iar acum să trecem la crearea unui meniu orizontal și să privim totul cu exemple.
Cum se face un meniu orizontal cu CSS
Pentru a afișa un meniu orizontal folosind o listă, trebuie doar să adăugăm un singur parametru la codul de mai sus: display: inline; astfel încât elementele de meniu să fie aliniate pe o linie și să se succedă orizontal. Vom adăuga, de asemenea, umplutură între elementele de meniu folosind margine .
Și va arăta așa:
Avem gata un meniu orizontal, nu mai rămâne decât să îl facem frumos aspect.
Să dăm fiecare element din meniul orizontal cadru de chenarși faceți-l să aibă margini teșite, umpleți-l cu o anumită culoare de fundal (adăugați un fundal pentru elementul de meniu) și schimbați aspectul link-ului.
Meniul orizontal va fi afișat astfel:
Deoarece un meniu orizontal este în majoritatea cazurilor scris în antetul site-ului, în exemplu am adăugat un fundal la meniu, pe care îl puteți modifica pentru a se potrivi cu culoarea antetului.
Și pentru claritate, am făcut elementele de meniu centrate folosind proprietatea text-align: center;. , care poate fi eliminat (aliniat automat la stânga) sau setat la text-align: right; iar meniul orizontal va apărea pe marginea dreaptă.
Apropo, îl puteți folosi și pe care îl puteți vedea acolo cu proprii ochi și descărca gratuit.
Cum se face un meniu vertical cu CSS
Meniu vertical în CSS se realizeaza si se proiecteaza pe pagina aproape la fel ca cel orizontal, doar ca aici se schimba in .menu-2 li (... parametru cu afisarea valorii: bloc; (indica un element bloc), care ii da o afișare verticală a elementelor de meniu.
Și încă o adăugare la meniul vertical: deoarece în majoritatea cazurilor este situat în coloana laterală a site-ului, care are o lățime fixă, suntem obligați să setăm latime latime: 100%; meniul nostru vertical astfel încât să ocupe complet toată lățimea coloanei.
Să ne uităm la verticală meniul CSS De exemplu:
Iată cum va apărea meniul vertical pe pagină:
Atenție!
Cum să faci un meniu drop-down cu CSS
Faceți un meniu derulant cu folosind CSS destul de simplu. Vom adăuga doar câțiva parametri la codul existent pentru meniul vertical, care va fi responsabil pentru lista derulantă a elementelor de meniu.
Asigurați-vă că vă amintiți!
Pentru ca meniul derulant să apară strict vizavi de link-ul principal, trebuie să scrieți poziția: relativ; în CSS pentru eticheta li unde se află acest link. , iar pentru poziția meniului derulant: absolut;
Hai să scriem cod html pentru un meniu drop-down în CSS.
Vedeți cum va arăta un meniu derulant folosind CSS pe pagină.
Meniul drop-down este scris exact în același mod pentru aspectul de navigare orizontal. Singurul lucru este că nu uitați să modificați valorile parametrilor de sus și din stânga (indentație de sus și stânga).
Uite!
Cum, cu doar 3 modificări ale CSS, aspectul nostru de navigare verticală cu un meniu derulant se transformă într-un aspect de navigare orizontal cu un meniu vertical.
Modificări CSS pentru meniul drop-down
- Înlocuiește în .saitbar - lățime: 240px; pe latime: 100%;
- Înlocuiți în .meniu-4 li - afișaj: bloc; pe display:inline-block;
- Înlocuiește în .menu-4 ul.podmenu - sus: 0; deasupra: 34px;
- Înlocuiește în .menu-4 ul.podmenu - stânga: 214px; în stânga: 7px;
Una dintre cele mai dificile părți ale unui site web de adaptat este navigarea. Această parte este foarte importantă pentru utilizarea unui site web, deoarece este unul dintre modurile în care utilizatorii se deplasează de la o pagină la alta.
Există multe modalități de a crea o navigare receptivă pe site și mai multe plugin-uri jQuery o pot face chiar instantaneu.
Totuși, în loc să aplici soluție gata făcutăÎn acest tutorial, vom parcurge procesul de construire a unei navigări simple de la zero folosind interogări media CSS3 și puțin pentru a o afișa corect pe un ecran mic, cum ar fi un smartphone.
Deci, să începem.
HTML
Stiluri
În această secțiune, vom aplica stiluri pentru navigare. Stilul de aici este pur decorativ, puteți alege orice culoare doriți. Dar în acest caz, corpul va avea o culoare crem delicată.
Corp (culoare de fundal: #ece8e5; )
Eticheta nav care definește navigarea va avea 100% lățime completă în fereastra browserului, în timp ce ul unde conține link-urile meniului nostru principal va avea o lățime de 600px.
Nav (înălțime: 40px; lățime: 100 % ; fundal : # 455868 ; dimensiunea fontului: 11pt; familie de fonturi: "PT Sans", Arial, sans-serif; greutate font: bold; poziție: relativă; chenar-jos: 2px solid # 283744 ; ) nav ul ( umplutură : 0 ; margine : 0 automat ; lățime : 600 px ; înălțime : 40 px ; )
Vom aplica apoi o proprietate float stânga linkurilor de meniu, astfel încât acestea să fie aranjate orizontal într-un rând, dar aplicarea acestei proprietăți unui element va duce la colapsul elementului părinte.
Nav li (afișare: inline; float: stânga;)
Dacă ați observat din markupul html de mai sus, am adăugat deja clearfix la proprietatea de clasă a nav și ul pentru a elibera spațiu atunci când plasăm elemente „plutitoare” în interiorul acestuia folosind hack-ul CSS clearfix. Deci, să adăugăm următoarele reguli de stil în foaia de stil.
Clearfix :before, .clearfix :după ( conținut : " " ; afișare : tabel; ) .clearfix :după ( clear : ambele ; ) .clearfix ( *zoom: 1 ; )
Deoarece avem șase link-uri de meniu și am dat și containerului o lățime de 600 px, fiecare link de meniu va avea o lățime de 100 px.
Nav a (culoare: #fff; afișare: bloc în linie; lățime: 100px; aliniere text: centru; decor text: niciuna; înălțime linie: 40px; umbră text: 1px 1px 0px # 283744 ; }
Legăturile de meniu vor fi separate printr-un chenar drept de 1px, cu excepția ultimului. Reamintindu-ne modelul casetei din ultimul tutorial, lățimea link-ului meniului va fi mărită cu 1px datorită adăugării chenarului, făcându-l la 101px, așa că aici vom schimba modelul de dimensionare a casetei în border-box pentru a păstra meniul lățimea linkului la 100px.
Nav li a ( chenar-dreapta: 1px solid # 576979 ; dimensionare cutie:border-box ; -moz-box-sizing:border-box ; -webkit-box-sizing:border-box ; ) nav li:last-child a ( chenar-dreapta : 0 ; )
Nav a:hover , nav a:active (culoare de fundal: #8c99a4 ; )
Nav a#pull (afișare: niciunul; )
În acest moment, aplicăm doar stiluri blocului de navigare și nu se va întâmpla nimic când redimensionăm fereastra browserului. Deci, să trecem la pasul următor.
Interogări media
Ieșire meniu
În acest moment, meniul va fi în continuare ascuns și va fi vizibil doar atunci când este necesar, după ce atingem sau facem clic pe linkul Meniu și putem obține acest efect folosind jQuery slideToggle().
$(function() ( var pull = $("#pull" ) ; meniu = $("nav ul" ) ; menuHeight = menu.height () ; $(pull).on ("click", function(e) ( e.preventDefault () ; menu.slideToggle () ; ) ) ; ) ) ;
Cu toate acestea, când redimensionați fereastra pe un ecran mic imediat după ce ați vizualizat și ascuns meniul, meniul va fi ascuns deoarece afișajul: niciun stil generat de jQuery nu este încă aplicat elementului.
Deci, trebuie să eliminăm acest stil când redimensionăm fereastra astfel:
$(window).resize (function() ( var w = $(window).width () ; if(w > 320 && menu.is (":hidden") ) ( menu.removeAttr ("stil" ) ; ) ) ) ;
Gata, asta este tot codul de care avem nevoie, acum ne putem uita la blocul de navigare folosind următoarele link-uri și vă recomandăm să îl testați cu un instrument de design responsive precum Responsinator, astfel încât să puteți vedea diferite variante lățimea sa în același timp.
Bonus: metodă alternativă
După cum am menționat mai devreme în tutorial, există și alte modalități de a face acest lucru, iar utilizarea bibliotecii JavaScript SelectNav.js este una dintre cele mai simple moduri. Este JavaScript pur și nu depinde de alte biblioteci terțe, cum ar fi jQuery.
Practic, aceasta va duplica lista de meniuri și o va transforma în
Un avantaj al acestei metode este că nu trebuie să ne îngrijorăm cu privire la stilizarea barei de navigare, deoarece meniul
Traducere – Cameră de serviciu
Navigarea este prezentă pe orice site bun, chiar dacă este unul de o pagină. În funcție de situație, link-urile de navigare pot duce la diverse secțiuni ale site-ului sau pot trimite către un marcaj (ancoră) aflat pe pagina curentă. Proiectarea cu competență a navigației în care utilizatorul să nu se încurce necesită anumite cunoștințe și experiență. Proiectarea barei de navigare trebuie, de asemenea, făcută cu înțelepciune, iar în acest tutorial vă vom arăta cum să creați un meniu de navigare ușor de utilizat.
Crearea navigației
Ce este navigația? Aceasta este o colecție de link-uri, adesea ordonate și grupate după semnificație. Un meniu de navigare este adesea creat folosind o etichetă de listă HTML
- , unde în fiecare punct
- conține un singur link . În HTML5, a fost introdusă o etichetă separată pentru navigare