Cum să creați o navigare responsabilă

Una dintre cele mai trucate părți responsified pe un site web este “Navigația”, această parte este foarte importantă pentru accesibilitatea site-ului, deoarece acesta este unul dintre modurile în care vizitatorii navighează peste paginile web.

Există de fapt multe moduri de a crea navigarea în funcție de site-ul web și chiar și unele pluginuri jQuery sunt disponibile pentru a face acest lucru într-o secundă.

Cu toate acestea, mai degrabă decât să aplicăm o soluție instantanee, în acest post, vă vom merge mai departe cum să construiți o simplă navigație de la sol și utilizând interogările media CSS3 și un mic jQuery pentru a le afișa într-o dimensiune mică a ecranului, cum ar fi smartphone-urile în mod corespunzător.

Deci, hai să începem.

Demo
Descărcați sursa

HTML

Mai întâi, să adăugăm fereastra de vizualizare meta în interiorul cap etichetă. Acest meta viewport eticheta este necesară pentru ca pagina noastră să scadă corect în orice dimensiune a ecranului, în special în fereastra de vizualizare mobilă.

... și apoi adăugați următorul fragment ca marcaj de navigare în interiorul corp etichetă.

   Acasă
 Cum să-
 icoane
 Proiecta
 Web 2.0
 Unelte
 
 Meniul

După cum puteți vedea mai sus, avem șase linkuri de meniu primar și adăugăm încă un link după ele. Această legătură suplimentară va fi utilizată pentru Trage navigarea în meniu când este ascunsă într-un mic ecran.

Citirea ulterioară: Nu uitați meta tag-ul de vizualizare.

stiluri

În această secțiune, începem să stilizăm navigația. Stilul este doar decorativ, puteți alege toate culorile după cum doriți. Dar în acest caz, noi (eu personal) vreau corp pentru a avea o culoare moale și cremoasă.

 corp fundal-culoare: # ece8e5;

nav tag-ul care definește navigația va avea 100% lățimea totală a ferestrei browserului, în timp ce ul unde conține meniurile noastre primare pe care le vom avea 600px pentru lățime.

 nav height: 40px; lățime: 100%; fundal: # 455868; font-size: 11pt; font-family: "PT Sans", Arial, sans-serif; font-weight: bold; poziția: relativă; frontieră-fund: 2px solid # 283744;  nav ul padding: 0; marja: 0 auto; lățime: 600px; înălțime: 40px;

Apoi vom pluti meniul se leagă spre stânga, astfel încât acestea vor fi afișate orizontal unul lângă celălalt, însă un element care plutește va cauza, de asemenea, prăbușirea părintelui.

 nav li afișare: inline; plutește la stânga;

Dacă observați din marcajul HTML de mai sus, deja am adăugat clearfix în clasă atribut pentru ambele nav și ul pentru a șterge lucrurile în jurul valorii de atunci când plutim elementele din interiorul său, folosind acest CSS clearfix hack. Deci, să adăugăm următoarele reguli de stil în foaia de stil.

 .clarfix: înainte, .clearfix: după content: ""; afișare: tabel;  .clearfix: după clar: ambele;  .clearfix * zoom: 1;

Deoarece avem șase linkuri de meniu și de asemenea am specificat containerul pentru 600px, fiecare link-uri de meniu va avea 100px pentru lățime.

 nav culoare: #fff; afișare: inline-block; lățime: 100px; text-align: centru; text-decorare: nici unul; linia-înălțime: 40px; text-shadow: 1px 1px 0px # 283744;

Link-urile meniului vor fi separate cu 1px dreapta, cu excepția ultimului. Amintiți-vă postarea noastră anterioară pe modelul cutie, lățimea meniului va fi extinsă 1px făcându-l 101px ca plus de frontieră, deci aici schimbăm box-dimensionare model pentru a frontieră-box pentru a menține meniul rămâne 100px.

 nav li a frontieră-dreapta: 1px solid # 576979; box-dimensionare: de frontieră-box; -moz-box-dimensionare: border-cutie; dimensionarea -webkit-box-: frontieră-box;  nav li: ultim-copil a frontieră-dreapta: 0;

Apoi, meniul va avea o culoare mai luminată atunci când este înăuntru :planare sau :activ stat.

 nav: hover, nav: activ background-color: # 8c99a4;

... și, în sfârșit, linkul suplimentar va fi ascuns (pentru ecranul desktop).

 nav a # trageți display: none;

În acest moment, vom modela doar navigația și nimic nu se va întâmpla când redimensionăm fereastra browserului. Deci, hai să trecem la pasul următor.

Citirea ulterioară: CSS3 Box-size (Hongkiat.com)

Întrebări media

Interogările media CSS3 sunt utilizate pentru a defini modul în care stilurile se vor schimba în anumite puncte de interferență sau în mod specific dimensiunile ecranului dispozitivului.

Deoarece navigația noastră este inițial 600px fix-width, vom defini mai întâi stilurile atunci când este vizualizat în 600px sau dimensiune mai mică a ecranului, deci practic vorbind, acest este prima noastră pauză.

În această dimensiune a ecranului, fiecare dintre cele două linkuri de meniu va fi afișat unul lângă celălalt, astfel încât ullățimea de aici va fi 100% din fereastra browserului în timp ce link-urile de meniu vor fi disponibile 50% pentru lățime.

 Ecran @media și (max-width: 600px) nav height: auto;  nav ul lățime: 100%; afișare: bloc; înălțime: auto;  nav li lățime: 50%; plutește la stânga; poziția: relativă;  nav li a border-bottom: 1px solid # 576979; frontieră-dreapta: 1px solid # 576979;  nav a text-aliniere: stânga; lățime: 100%; text-indent: 25px;

... și apoi, de asemenea, definim modul în care se afișează navigația atunci când ecranul devine mai mic 480 x sau mai mică (deci este al doilea punct de întrerupere).

În această dimensiune a ecranului, link-ul suplimentar pe care l-am adăugat anterior va începe să fie vizibil și vom da și linkul a “Meniul” pictograma din partea dreaptă, utilizând :după pseudo-element de, în timp ce legăturile din meniul principal vor fi ascunse pentru a salva mai multe spații verticale pe ecran.

 Numai ecranul @media și (max-width: 480px) nav border-bottom: 0;  nav ul display: none; înălțime: auto;  nav a # trage display: bloc; fundal-culoare: # 283744; lățime: 100%; poziția: relativă;  nav a # pull: după content: ""; fundal: url ('nav-icon.png') no-repeat; lățime: 30px; înălțime: 30px; afișare: inline-block; poziția: absolută; dreapta: 15px; top: 10px;

În sfârșit, când ecranul devine mai mic 320px și coborâți meniul va fi afișat vertical de sus în jos.

 @media numai pe ecran și (max-width: 320px) nav li display: block; float: nici unul; lățime: 100%;  nav li a border-bottom: 1px solid # 576979;

Acum, puteți încerca să redimensionați fereastra browserului. Acum ar trebui să fie capabil să adapteze dimensiunea ecranului.

Citirea ulterioară: Întrebări media pentru dispozitivele standard.

Afișarea meniului

În acest moment, meniul va fi ascuns și va fi vizibil numai atunci când este necesar prin atingerea sau dând clic pe “Meniul” link și putem obține efectul folosind jQuery slideToggle ().

 $ (pull ()) .on ('click', functie (e)) e.preventDefault (); menu.slideToggle ();););

Cu toate acestea, când redimensionați fereastra browserului imediat după ce ați văzut și ascuns meniul pe un mic ecran, meniul va rămâne ascuns, deoarece afișare: niciuna stilul generat de jQuery este încă atașat în element.

Deci, trebuie să eliminăm acest stil la redimensionarea ferestrei, după cum urmează:

 $ (fereastra) .resize (functie () var w = $ (fereastra) .width );

Bine, toate codurile de care avem nevoie, acum putem vizualiza navigația de la următoarele link-uri și vă recomandăm să o testați într-un instrument de testare a designului receptiv, cum ar fi Responsinator, pentru a putea să îl vizualizați în diferite lățimi dintr-o dată.

Demo
Descărcați sursa

Bonus: O cale alternativă

Așa cum am menționat mai devreme în acest post, există alte modalități de a face acest lucru, și folosind o bibliotecă JavaScript numit SelectNav.js este una dintre cele mai simple moduri. Acesta este un JavaScript pur care nu se bazează pe o altă bibliotecă terță parte, cum ar fi jQuery.

Practic, acesta va duplica meniul listei și îl va transforma în a meniul va utiliza interfața de utilizator nativă de la dispozitivul în sine.

Vă rugăm să consultați documentația oficială pentru continuarea implementării.

Concluzie

Am parcurs tot drumul pentru a crea o navigare receptivă de la zero. Acest lucru pe care l-am creat aici este doar unul dintre exemple și, după cum am afirmat mai devreme în acest post și arătat mai sus, există multe alte soluții pe care le puteți implementa. Deci, este acum lăsat la decizia dvs. de a alege care practica care se potrivesc cel mai bine pentru a satisface cerința și structura dvs. de navigare site-ul web.