Kako stvoriti prilagodljivu navigaciju

Jedan od najtežih dijelova responsified na web-mjestu je “Navigacija”, ovaj dio je doista važan za dostupnost web stranice, jer je to jedan od načina na koji posjetitelji prelaze preko web stranica.

Zapravo, postoji mnogo načina za kreiranje osjetljive navigacije web-stranicama, a čak su i neki jQuery dodaci dostupni za to.

Međutim, umjesto da primijenimo instant rješenje, u ovom postu, provest ćemo vas kroz kako izgraditi jednostavnu navigaciju od zemlje i korištenje CSS3 medija upita i malo jQuery za prikaz u maloj veličini zaslona poput pametnih telefona ispravno.

Dakle, počnimo.

• Demo
• Preuzimanje izvora

HTML

Prije svega, dodamo meta viewport unutar glava označiti. Ovaj prikaz meta oznaka je potrebna da bi se stranica ispravno proširila unutar bilo koje veličine zaslona, ​​posebno u mobilnom okviru za prikaz.

... i zatim dodajte sljedeći isječak kao navigacijsku oznaku unutar tijelo označiti.

Kao što možete vidjeti gore, imamo šest primarnih linijskih izbornika i dodali još jednu vezu za njima. Na taj će se dodatni link koristiti Vuci navigaciju izbornika kada je skrivena u malom zaslonu.

Daljnje čitanje: Ne zaboravite meta oznaku prikaza.

Stilovi

U ovom odjeljku započinjemo stiliziranje navigacije. Stil ovdje je samo dekorativni, možete odabrati bilo koju boju po želji. Ali u ovom slučaju, mi (ja osobno) želim tijelo imati meku i kremastu boju.

 tijelo pozadinska boja: # ece8e5;  

nav koja definira navigaciju 100% puna širina prozora preglednika, dok je ul gdje se nalaze naši primarni linkovi izbornika će imati 600px za širinu.

 nav visina: 40px; širina: 100%; pozadina: # 455868; veličina fonta: 11pt; obitelj fontova: 'PT Sans', Arial, sans-serif; font-weight: bold; pozicija: relativna; obrub-dno: 2px čvrsto # 283744;  nav ul punjenje: 0; margin: 0 auto; širina: 600px; visina: 40px;  

Onda ćemo plutati izbornik povezuje s lijeve strane, tako da će se prikazivati ​​vodoravno, ali plutajući element također će uzrokovati kolaps njihovih roditelja.

 nav li display: inline; plutajući: lijevo;  

Ako primijetite iz gore navedenog HTML oznake, već smo dodali clearfix u klasa atribut za oba nav i ul da očistimo stvari okolo kada plutamo elemente unutar njega pomoću ovog CSS-a. Dakle, dodamo sljedeća pravila stila u stilsku tablicu.

 .clearfix: prije, .clearfix: nakon content: ""; prikaz: stol;  .clearfix: nakon clear: oboje;  .clearfix * zoom: 1;  

Budući da imamo šest linkova izbornika i odredili smo spremnik za 600px, svaki će izbornik imati veze 100piks za širinu.

 nav a boja: #fff; prikaz: inline-blok; širina: 100px; poravnavanje teksta: centar; text-decoration: none; visina linije: 40px; tekst-sjena: 1px 1px 0px # 283744;  

Linkovi izbornika bit će odvojeni s 1 piksel granica, osim zadnje. Zapamtite naš prethodni post na modelu okvira, širina izbornika će se proširiti 1 piksel izrade 101px kao dodatak granici, pa ovdje mijenjamo kutija-kalibracija model border-box kako bi zadržali izbornik 100piks.

 nav li a border-right: 1px solid # 576979; kutija-dimenzioniranje: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  nav li: posljednje dijete border-right: 0;  

Zatim će izbornik imati svjetliju boju kada je u : hover ili :aktivan država.

 nav a: hover, nav a: aktivno pozadinska boja: # 8c99a4;  

… I na kraju, dodatna veza će biti skrivena (za zaslon na radnoj površini).

 nav # pull display: none;  

U ovom trenutku samo stiliziramo navigaciju i ništa se neće dogoditi kada promijenimo veličinu prozora preglednika. Pređimo na sljedeći korak.

Daljnje čitanje: Veličina okvira CSS3 (Hongkiat.com)

Upiti za medije

CSS3 medijski upiti koriste se za definiranje kako će se stilovi pomaknuti u nekim određenim točkama prekida ili posebno na veličinama zaslona uređaja.

Budući da je naša navigacija u početku 600px fix-width najprije ćemo definirati stilove kada se pregledava 600px ili niže veličine zaslona, ​​praktično govoreći, ovaj je naša prva točka.

U ovoj veličini zaslona svaki od dva linka izbornika bit će prikazan rame uz rame, tako da ulširina ovdje će biti 100% prozora preglednika, dok će veze izbornika imati 50% za širinu.

 @ media zaslon i (max-width: 600px) nav height: auto;  nav ul širina: 100%; prikaz: blok; visina: auto;  nav li širina: 50%; plutajući: lijevo; pozicija: relativna;  nav li a border-bottom: 1px solid # 576979; granica desno: 1px solid # 576979;  nav a poravnavanje teksta: lijevo; širina: 100%; text-indent: 25px;  

… A zatim definiramo i kako će se prikazivati ​​navigacija kada se zaslon smanji 480px ili niže (tako da je ovo naša druga točka prekida).

U ovoj veličini zaslona, ​​dodatni link koji smo dodali prije će početi biti vidljiv i također ćemo dati vezu a “izbornik” na desnoj strani pomoću ikone :nakon pseudo elemenata, dok će primarni linkovi izbornika biti skriveni kako bi se na ekranu spremilo više vertikalnih prostora.

 @ samo za zaslon i (max-width: 480px) nav border-bottom: 0;  nav ul display: none; visina: auto;  nav a # pull display: block; boja pozadine: # 283744; širina: 100%; pozicija: relativna;  nav a # pull: after content: ""; pozadina: url ('nav-icon.png') bez ponavljanja; širina: 30px; visina: 30px; prikaz: inline-blok; položaj: apsolutni; desno: 15px; vrh: 10px;  

Konačno, kada se zaslon smanji 320 i spustite izbornik prikazan vertikalno odozgo prema dolje.

 @ samo za zaslon i (max-width: 320px) nav li display: block; plutaju: nema; širina: 100%;  nav li a border-bottom: 1px solid # 576979;  

Sada možete pokušati promijeniti veličinu prozora preglednika. Sada bi trebao moći prilagoditi veličinu zaslona.

Daljnje čitanje: Upiti za medije za standardne uređaje.

Prikazivanje izbornika

U ovom trenutku, izbornik će i dalje biti skriven i bit će vidljiv samo kada je potreban dodirom ili klikom na “izbornik” link i možemo postići učinak koristeći jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('klik', funkcija (e) e.preventDefault (); menu.slideToggle (););); 

Međutim, kada promijenite veličinu prozora preglednika odmah nakon što pregledate i sakrijete izbornik na malom zaslonu, izbornik će ostati skriven, jer prikaz: nema Stil koji je generirao jQuery još uvijek je pridružen elementu.

Dakle, moramo ukloniti taj stil nakon promjene veličine prozora, kako slijedi:

 $ (window) .resize (funkcija () var w = $ (prozor) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); ); 

U redu, to su svi kodovi koji su nam potrebni, sada možemo pregledavati navigaciju sa sljedećih veza, a preporučujemo da je testirate u odgovarajućem alatu za testiranje dizajna, kao što je Responsinator, tako da ga možete vidjeti u različitim širinama odjednom.

• Demo
• Preuzimanje izvora

Bonus: alternativni način

Kao što smo ranije spomenuli u ovom postu, postoje i drugi načini da se to učini, a koristi se JavaScript biblioteka SelectNav.js je jedan od najlakših načina. To je čisti JavaScript koji se ne oslanja na drugu knjižnicu treće strane kao što je jQuery.

Uglavnom, to će duplicirati popis izbornika i pretvoriti ga u a u padajućem izborniku, tada možete odabrati koji je skriven ili prikazan ovisno o veličini zaslona putem medijskih upita.

Jedna od prednosti koju volim u ovoj praksi je da ne moramo brinuti o navigacijskom stilu kao

izbornik će koristiti izvorno korisničko sučelje iz samog uređaja.

Molimo vas da pogledate službenu dokumentaciju za daljnju provedbu.

Zaključak

Došli smo kroz cijeli put do stvaranja odgovorajuće navigacije od nule. Ovo što smo ovdje stvorili samo je jedan od primjera, a kao što smo ranije naveli u ovom postu i prikazani gore, postoje mnoga druga rješenja koja možete implementirati. Dakle, to je sada ostaviti na svoju odluku da odaberete koji praksa koja najbolje odgovara na zahtjev zahtjev i vaše web stranice navigacijske strukture.