Kā izveidot atsaucīgu navigāciju

Viena no visgrūtākajām daļām atbildēja tīmekļa vietnē ir “navigāciju”, šī daļa ir patiešām svarīga, lai piekļūtu tīmekļa vietnei, jo tas ir viens no veidiem, kā apmeklētāji pārlēkt pār tīmekļa lapām.

Ir patiešām daudz veidu, kā izveidot atsaucīgu tīmekļa vietnes navigāciju, un pat daži jQuery spraudņi ir pieejami, lai to izdarītu sekundē.

Tomēr, tā vietā, lai piemērotu tūlītēju risinājumu, šajā amatā mēs ejam jums cauri kā izveidot vienkāršu navigāciju no zemes un izmantojot CSS3 mediju vaicājumus un mazliet jQuery, lai to parādītu mazā ekrāna izmērā, piemēram, viedtālruņiem pareizi.

Tātad, pieņemsim tikai sākt.

Demo
Lejupielādēt avotu

HTML

Pirmkārt, pievienosim meta skatu loga iekšpusē galvu tag. Tas meta skats tagam ir nepieciešams, lai mūsu lapa varētu pareizi izmērīties jebkura ekrāna izmērā, īpaši mobilajā skata logā.

… Un pēc tam pievienojiet šādu fragmentu kā navigācijas atzīmi iekšpusē ķermeni tag.

   Mājas
 Kā
 Ikonas
 Dizains
 Web 2.0
 Rīki
 
 Izvēlne

Kā redzams iepriekš, mums ir sešas galvenās izvēlnes saites un pēc tām pievienojām vēl vienu saiti. Šī papildu saite tiks izmantota velciet izvēlnes navigācija, kad tā ir paslēpta mazā ekrānā.

Papildu lasījums: Neaizmirstiet skatu loga metatagu.

Stili

Šajā sadaļā mēs sākam veidot navigāciju. Stils šeit ir tikai dekoratīvs, jūs varat izvēlēties jebkuras krāsas, kā vēlaties. Bet šajā gadījumā mēs (es personīgi) gribam ķermeni ir mīksta un krēmveida krāsa.

 ķermenis fona krāsa: # ece8e5;

The nav būs atzīme, kas nosaka navigāciju 100% pārlūkprogrammas loga pilnais platums, bet ul tur, kur tā satur mūsu galvenās izvēlnes saites, būs 600px platumam.

 nav augstums: 40px; platums: 100%; fons: # 455868; fonta lielums: 11pt; font-family: “PT Sans”, Arial, sans-serifs; font-weight: bold; pozīcija: relatīvais; robežu apakšā: 2px ciets # 283744;  nav ul polsterējums: 0; starpība: 0 auto; platums: 600px; augstums: 40px;

Tad mēs peldēt izvēlnes saites uz kreiso pusi, lai tās parādītu horizontāli blakus, bet elementa peldēšana arī izraisīs viņu vecāku sabrukumu.

 nav li display: inline; peldēt: pa kreisi;

Ja pamanīsiet iepriekš minēto HTML atzīmi, mēs jau esam pievienojuši skaidrs iekš klasē atribūts gan nav un ul lai nodzēstu lietas, kad mēs pārvietojam tajā esošos elementus, izmantojot šo CSS skaidrojumu. Tātad, pievienosim stila lapā šādus stila noteikumus.

 .clearfix: pirms, .clearfix: pēc content: ""; displejs: tabula;  .clearfix: pēc skaidrs: abi;  .clearfix * zoom: 1;

Tā kā mums ir sešas izvēlnes saites un mēs arī esam norādījuši konteineru 600px, katrai izvēlnes saitei būs 100px platumam.

 nav a krāsa: #fff; displejs: inline-bloks; platums: 100px; teksta saskaņošana: centrs; teksta apdare: nav; līnijas augstums: 40px; teksta ēna: 1px 1px 0px # 283744;

Izvēlnes saites tiks atdalītas ar 1px labo robežu, izņemot pēdējo. Atcerieties mūsu iepriekšējo ziņojumu par kastes modeli, izvēlnes platums tiks paplašināts 1px to padarīt 101px kā robežu papildinājums, tāpēc šeit mēs mainām kastes izmēri modeli rāmis lai saglabātu izvēlni 100px.

 nav li a right-right: 1px ciets # 576979; kastes izmēri: robežkaste; -moz-box-izmēri: rāmis; -webkit-box-izmēri: robežkaste;  nav li: pēdējais bērns robežas tiesības: 0;

Pēc tam izvēlnei būs spilgtāka krāsa, kad tā būs : lidināties vai : aktīvs Valsts.

 nav a: lidināties, nav a: aktīvs fona krāsa: # 8c99a4;

… Un visbeidzot, papildu saite tiks paslēpta (darbvirsmas ekrānam).

 nav a # pull displejs: nav;

Šajā brīdī mēs tikai veidojam navigāciju un nekas nenotiks, kad mainīsim pārlūkprogrammas logu. Tātad, pārejam uz nākamo soli.

Papildu lasījums: CSS3 kastes izmēri (Hongkiat.com)

Multivides vaicājumi

CSS3 multivides vaicājumi tiek izmantoti, lai noteiktu, kā dažos noteiktos pārtraukumos vai konkrēti ierīces ekrāna izmēros mainīsies stili.

Tā kā mūsu navigācija ir sākotnēji 600px noteikt-platums, mēs vispirms definēsim stilus, kad tie tiek skatīti 600px vai zemāks ekrāna izmērs, tā praktiski runājot, to ir mūsu pirmais pārtraukums.

Šajā ekrāna izmērā katra no divām izvēlnes saitēm tiks parādīta blakus, lai ulšeit būs platums 100% pārlūka logā, kamēr būs redzamas izvēlnes saites 50% platumam.

 @media ekrāns un (max-width: 600px) nav augstums: auto;  nav ul platums: 100%; displejs: bloks; augstums: auto;  nav li platums: 50%; peldēt: pa kreisi; pozīcija: relatīvais;  nav li a border-bottom: 1px solid # 576979; labajā pusē: 1px cietais # 576979;  nav a text-align: left; platums: 100%; teksta ievilkums: 25px;

… Un tad mēs arī definējam, kā tiek parādīta navigācija, kad ekrāns kļūst mazāks par 480px vai zemāks (tas ir mūsu otrais pārtraukuma punkts).

Šajā ekrāna izmērā tiks parādīta papildu saite, ko pievienojām pirms tam, un mēs arī piešķirsim saiti a “Izvēlne” ikonu labajā pusē, izmantojot : pēc pseidoelements, kamēr primārās izvēlnes saites tiks paslēptas, lai ekrānā saglabātu vairāk vertikālu atstarpju.

 Tikai @media ekrāns un (max-width: 480px) nav robežu apakšā: 0;  nav ul displejs: nav; augstums: auto;  nav # pull displejs: bloks; fona krāsa: # 283744; platums: 100%; pozīcija: relatīvais;  nav # pull: pēc content: ""; fons: url ('nav-icon.png') nav atkārtots; platums: 30px; augstums: 30px; displejs: inline-bloks; pozīcija: absolūta; labi: 15px; tops: 10px;

Visbeidzot, kad ekrāns kļūst mazāks par 320px un nolaižot izvēlni, tā tiks rādīta vertikāli augšup no apakšas.

 @ media only screen un (max-width: 320px) nav li displejs: bloks; peldēt: nav; platums: 100%;  nav li a border-bottom: 1px solid # 576979;

Tagad varat mēģināt mainīt pārlūkprogrammas loga izmērus. Tagad tai vajadzētu būt iespējai pielāgot ekrāna izmēru.

Papildu lasījums: Multivides vaicājumi standarta ierīcēm.

Izvēlnes rādīšana

Šajā brīdī izvēlne joprojām būs slēpta, un tā būs redzama tikai tad, kad tā būs nepieciešama, pieskaroties vai noklikšķinot uz “Izvēlne” un mēs varam sasniegt efektu, izmantojot jQuery slideToggle ().

 $ (funkcija () var pull = $ ('# pull'); izvēlne = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('klikšķi', funkcija (e) e.preventDefault (); menu.slideToggle ();););

Tomēr, kad pārlūkprogrammas loga izmēru mainīsiet uzreiz pēc tam, kad esat tikko skatījies un paslēpis izvēlni mazā ekrānā, izvēlne paliks slēpta, jo displejs: nav JQuery radītais stils joprojām ir pievienots elementam.

Tātad, pēc loga izmēra maiņas ir jāizdzēš šis stils:

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

Labi, tas ir viss nepieciešamais kods, tagad mēs varam apskatīt navigāciju no šādām saitēm, un mēs iesakām to pārbaudīt atsaucīgā dizaina testa rīkā, piemēram, Responsinator, lai to varētu apskatīt dažādā platumā vienlaicīgi.

Demo
Lejupielādēt avotu

Bonuss: alternatīvs veids

Kā mēs jau iepriekš minējām šo amatu, ir daži citi veidi, kā to izdarīt, un, izmantojot JavaScript bibliotēku, ko sauc AtlasietNav.js ir viens no vienkāršākajiem veidiem. Šī ir tīra JavaScript, kas nav atkarīga no citas trešās puses bibliotēkas, piemēram, jQuery.

Būtībā tas dublēs jūsu saraksta izvēlni un pārveidos to par izvēlne izmantos vietējo lietotāja interfeisu no pašas ierīces.

Lūdzu, skatiet oficiālo dokumentāciju turpmākai ieviešanai.

Secinājums

Mēs esam guvuši visu veidu, lai izveidotu atsaucīgu navigāciju no nulles. Tas, ko mēs šeit esam izveidojuši, ir tikai viens no piemēriem, un, kā jau iepriekš teikts šajā amatā un parādīts iepriekš, ir daudz citu risinājumu, ko jūs varat īstenot. Tātad, tagad ir jāatstāj jūsu lēmums izvēlēties, kura prakse vislabāk atbilst prasībām un jūsu tīmekļa vietnes navigācijas struktūrai.