Kaip sukurti reaguojančią navigaciją

Vienas iš sudėtingiausių dalių atsakingas svetainėje yra “navigacijos”, ši dalis tikrai svarbi prieinamumui interneto svetainėje, nes tai yra vienas iš būdų, kuriais lankytojai gali pereiti per tinklalapius.

Iš tikrųjų yra daug būdų, kaip sukurti jautrią interneto svetainės navigaciją ir netgi kai kurie jQuery įskiepiai yra prieinami, kad tai atliktumėte per sekundę.

Tačiau, užuot taikę momentinį sprendimą, šiame pranešime ketiname jus nueiti kaip sukurti paprastą navigaciją iš žemės ir naudojant „CSS3“ žiniasklaidos užklausas ir šiek tiek „jQuery“, kad būtų rodomas mažas ekrano dydis, pvz., išmanieji telefonai.

Taigi, pradėkime.

Demo
Atsisiųsti šaltinį

HTML

Pirmiausia pridėkime meta peržiūros sritį viduje galva žyma. Tai meta peržiūros sritis žyma reikalinga tam, kad mūsų puslapis būtų tinkamas bet kokio ekrano dydžiui, ypač mobiliajame peržiūros lange.

… Ir tada pridėkite šį fragmentą kaip navigacijos žymę viduje kūnas žyma.

   Namai
 Kaip
 Piktogramos
 Dizainas
 „Web 2.0“
 Įrankiai
 
 Meniu

Kaip matote aukščiau, turime šešis pagrindinius meniu saitus ir po jų pridėjome dar vieną nuorodą. Ši papildoma nuoroda bus naudojama traukti meniu naršymas, kai jis yra paslėptas mažame ekrane.

Papildoma literatūra: Nepamirškite peržiūrėti peržiūros srities žymės.

Stiliai

Šiame skyriuje pradedame kurti navigaciją. Stilius yra tik dekoratyvinis, galite pasirinkti bet kokias spalvas, kaip norite. Bet šiuo atveju mes (aš asmeniškai) norime kūnas turėti minkštą ir kreminę spalvą.

 kūnas fono spalva: # ece8e5;

The nav Žymos, apibrėžiančios navigaciją, bus 100% visas naršyklės lango plotis, o ul ten, kur yra mūsų pagrindiniai meniu puslapiai, bus 600px už plotį.

 nav aukštis: 40px; plotis: 100%; fonas: # 455868; šrifto dydis: 11pt; šrifto šeima: „PT Sans“, Arial, sans-serif; šrifto svoris: paryškintas; pozicija: santykinis; apačioje: 2px kietas # 283744;  nav ul padding: 0; paraštė: 0 auto; plotis: 600px; aukštis: 40px;

Tada mes plūdė meniu nuorodos į kairę, todėl jos bus rodomos horizontaliai viena šalia kitos, tačiau elemento plūdimas taip pat sukels jų tėvų žlugimą.

 nav li display: inline; plūdė: kairė;

Jei pastebėsite aukščiau pateiktą HTML žymėjimą, jau pridėjome išvalyti viduje konors klasė atributas tiek nav ir ul išsiaiškinti dalykus, kai plūduriuojame jo viduje esančius elementus naudodami šį CSS klirensą. Taigi, stiliaus lape pridėsime šias stiliaus taisykles.

 .clearfix: prieš, .clearfix: po content: ""; ekranas: lentelė;  .clearfix: po clear: abu;  .clearfix * zoom: 1;

Kadangi turime šešias meniu nuorodas ir mes taip pat nurodėme konteinerį 600px, kiekviena meniu nuoroda bus 100px už plotį.

 nav a color: #fff; ekranas: inline-block; plotis: 100px; teksto derinimas: centras; teksto apdaila: nėra; linijos aukštis: 40px; teksto šešėlis: 1px 1px 0px # 283744;

Meniu nuorodos bus atskirtos 1px dešinėje, išskyrus paskutinį. Nepamirškite ankstesnio pašto dėžutės modelio, o meniu plotis bus išplėstas 1px darau tai 101px kaip sienos papildymas, todėl čia mes pakeisime dėžės dydžio modelis pasienio dėžutė kad išliktų meniu 100px.

 nav li a border-right: 1px solid # 576979; dėžutės dydžio: rėmelis; -moz-box-dydis: rėmelis; -webkit-box-dydis: rėmelis;  nav li: paskutinis vaikas sienos dešinėje: 0;

Toliau meniu bus šviesesnė, kai ji bus : Pakimba arba : aktyvus būsena.

 nav a: hover, nav a: aktyvus fono spalva: # 8c99a4;

Ir galiausiai papildoma nuoroda bus paslėpta (darbalaukio ekranui).

 nav a # pull ekranas: nėra;

Šiuo metu mes tik formuojame navigaciją ir nieko nepadarys, kai pakeisime naršyklės langą. Taigi, pereikime prie kito žingsnio.

Papildoma literatūra: CSS3 dėžutės dydis (Hongkiat.com)

„Media Queries“

CSS3 žiniasklaidos užklausos naudojamos apibrėžti, kaip stiliai bus perkelti kai kuriuose tam tikruose taškuose ar konkrečiai įrenginio ekrano dydžiuose.

Kadangi mūsų navigacija yra iš pradžių 600px „fix-width“, pirmiausia nustatysime stilius, kai jie bus peržiūrėti 600px arba mažesnis ekrano dydis, taip praktiškai kalbant, tai yra mūsų pirmasis pertraukos taškas.

Šiuo ekrano dydžiu kiekviena iš dviejų meniu nuorodų bus rodoma šalia, todėl ulčia bus plotis 100% naršyklės lange, kai bus rodomos meniu nuorodos 50% už plotį.

 @media ekranas ir (max-width: 600px) nav aukštis: auto;  nav ul plotis: 100%; ekranas: blokas; aukštis: auto;  nav li plotis: 50%; plūdė: kairė; pozicija: santykinis;  nav li a border-bottom: 1px solid # 576979; dešinėje: 1px kietas # 576979;  nav a text-align: left; plotis: 100%; teksto įtrauka: 25px;

… Ir tada mes taip pat nustatome, kaip rodoma navigacija, kai ekranas tampa mažesnis 480px arba mažesnis (tai yra mūsų antrasis pertraukos taškas).

Šiuo ekrano dydžiu bus rodoma papildoma nuoroda, kurią pridėjome anksčiau, ir taip pat suteikiame nuorodą a “Meniu” piktograma dešinėje pusėje naudojant : po pseudo elementas, o pagrindinės meniu nuorodos bus paslėptos, kad ekrane būtų išsaugotos daugiau vertikalių erdvių.

 Tik „@media“ ekranas ir (maksimalus plotis: 480px) nav pasienio apačioje: 0;  nav ul display: none; aukštis: auto;  nav a # pull display: block; fono spalva: # 283744; plotis: 100%; pozicija: santykinis;  nav # pull: po content: ""; fonas: URL („nav-icon.png“) ne kartoti; plotis: 30px; aukštis: 30px; ekranas: inline-block; pozicija: absoliutus; dešinėje: 15px; viršuje: 10px;

Galiausiai, kai ekranas tampa mažesnis 320px ir nuleiskite meniu bus rodomas vertikaliai viršų į apačią.

 Tik „@media“ ekranas ir (max-width: 320px) nav li display: block; plūdės: nėra; plotis: 100%;  nav li a border-bottom: 1px solid # 576979;

Dabar galite pabandyti pakeisti naršyklės lango dydį. Dabar ji turėtų sugebėti pritaikyti ekrano dydį.

Papildoma literatūra: Standartinių įrenginių žiniasklaidos užklausos.

Rodomas meniu

Šiuo metu meniu vis dar bus paslėptas ir bus matomas tik tada, kai jį reikia bakstelėję arba spustelėdami “Meniu” ir mes galime pasiekti efektą naudojant jQuery slinktis ().

 $ (funkcija () var pull = $ ('# pull'); meniu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on („click“, funkcija (e) e.preventDefault (); menu.slideToggle ();););

Tačiau, kai naršymo lango dydį pakeitėte iškart po to, kai tik žiūrėjote ir paslėpėte meniu mažame ekrane, meniu bus paslėptas, nes ekranas: nėra JQuery sukurtas stilius vis dar yra prijungtas elemente.

Taigi, mes turime pašalinti šį stilių po lango dydžio keitimo:

 $ (langas) .resize (funkcija () var w = $ (langas) .width (); jei (w> 320 && menu.is (': hidden')) menu.removeAttr („stilius“); );

Gerai, tai visi kodai, kuriuos mums reikia, dabar mes galime peržiūrėti navigaciją iš šių nuorodų ir rekomenduojame išbandyti ją reaguojančiame dizaino testavimo įrankyje, pvz., „Responsinator“, kad galėtumėte jį peržiūrėti įvairiu pločiu vienu metu.

Demo
Atsisiųsti šaltinį

Premija: alternatyvus būdas

Kaip jau minėjome šiame pranešime, yra keletas kitų būdų, kaip tai padaryti, ir naudojant „JavaScript“ biblioteką PasirinkiteNav.js yra vienas iš paprasčiausių būdų. Tai grynas „JavaScript“, kuris nesiremia kita trečiosios šalies biblioteka, pvz., „JQuery“.

Iš esmės, ji dubliuos jūsų sąrašo meniu ir pakeis jį į a meniu bus naudojamas pats prietaisas.

Prašom toliau susipažinti su oficialiu dokumentais.

Išvada

Mes pasiekėme visą kelią, kad galėtume sukurti jautrią navigaciją nuo nulio. Tai, ką sukūrėme čia, yra tik vienas iš pavyzdžių, ir, kaip minėjome anksčiau šiame pranešime, ir kaip parodyta aukščiau, yra daug kitų sprendimų, kuriuos galite įgyvendinti. Taigi, dabar jūs paliekate savo sprendimą pasirinkti, kuri praktika geriausiai tinka reikalavimams ir jūsų svetainės navigacijos struktūrai.