Kuidas luua reageeriv navigeerimine

Üks keerukamaid osi vastutustundlik veebisaidil on “navigatsiooni”, see osa on veebisaidi juurdepääsetavuse jaoks tõesti oluline, sest see on üks viis, kuidas külastajad veebilehtede üle hüpata.

Reaalsete veebisaitide navigeerimise loomiseks on tegelikult palju viise ja isegi mõned jQuery pluginad on saadaval, et seda mõne sekundi jooksul teha.

Kuid selle asemel, et vahetu lahendust rakendada, käime selles postituses läbi kuidas ehitada maapinnast lihtne navigatsioon ja kasutades CSS3 meedia päringuid ja vähe jQueryt, et kuvada see väikese ekraani suuruses nagu nutitelefonid korralikult.

Niisiis, alustame lihtsalt.

Demo
Allalaadimise allikas

HTML

Esiteks lisame meta vaateava pea silt. See metakuva silt on vajalik, et meie lehel saaks mistahes ekraani suuruse, eriti mobiilivaates.

… Ja seejärel lisage järgmine fragment: navigeerimismärk sees keha silt.

   Kodu
 Kuidas
 Ikoonid
 Disain
 Veeb 2.0
 Tööriistad
 
 Menüü

Nagu näete ülalpool, on meil kuus peamist menüü linki ja lisame neile veel ühe lingi. Seda lisalinki kasutatakse tõmmake menüü navigeerimine, kui see on peidetud väikese ekraaniga.

Lisalugemist: Ära unusta vaatluspordi metakoode.

Stiilid

Selles osas alustame navigatsiooni kujundamist. Siinne stiil on ainult dekoratiivne, saate valida mis tahes värvi, kui soovid. Kuid sellisel juhul tahame (isiklikult) seda keha pehme ja kreemja värvusega.

 keha taustavärv: # ece8e5;

The nav märgistusel on märgistus 100% kogu brauseri akna laius, samal ajal kui ul kus see sisaldab meie peamisi menüü linke 600px laiuse jaoks.

 nav kõrgus: 40 px; laius: 100%; taust: # 455868; fondi suurus: 11pt; font-pere: 'PT Sans', Arial, sans-serif; fondi kaal: rasvane; positsioon: suhteline; alumine serv: 2px tahke # 283744;  nav ul padding: 0; marginaal: 0 auto; laius: 600 px; kõrgus: 40px;

Siis me tahame ujuda menüülingid vasakule, nii et need kuvatakse horisontaalselt kõrvuti, kuid elemendi ujuv põhjustab ka nende vanema kokkuvarisemise.

 nav li kuva: inline; float: vasakule;

Kui märkate eespool toodud HTML-märgistusest, oleme juba lisanud selgitus Euroopa klassi atribuut nii nav ja ul selgitada asju ümber, kui me selle CSS-i selgete parandustega häkkida. Seega lisame stiili lehele järgmised stiilieeskirjad.

 .clearfix: enne, .clearfix: pärast content: ""; kuva: tabel;  .clearfix: after clear: mõlemad;  .clearfix * zoom: 1;

Kuna meil on kuus menüü linki ja oleme ka konteineri määranud 600px, iga menüü link on olemas 100tk laiuse jaoks.

 nav a color: #fff; kuva: inline-block; laius: 100 px; teksti joondamine: keskus; teksti kaunistus: mitte; rea kõrgus: 40 pikslit; teksti vari: 1px 1px 0px # 283744;

Menüü lingid eraldatakse 1tk paremale äärele, välja arvatud viimane. Pidage meeles meie eelmise postkasti mudelit, laiendatakse menüü laiust 1tk selle tegemine 101px nagu piiride lisamine, nii et siin me muudame kastide suurus mudel kasti menüü säilitamiseks 100tk.

 nav li a border-right: 1px tahke # 576979; kastide suurus: piirikast; -moz-box-sizing: piirikast; -webkit-box-sizing: piiri-box;  nav li: viimane laps a right-right: 0;

Seejärel on menüüs heledam värv :hõljuma või : aktiivne olekus.

 nav a: hover, nav a: aktiivne taustavärv: # 8c99a4;

… Ja lõpuks, lisalink peidetakse (töölaua ekraani jaoks).

 nav a # pull kuva: pole;

Siinkohal kujundame me ainult navigeerimist ja brauseri akna suuruse muutmisel ei juhtu midagi. Niisiis, lähme järgmisele sammule.

Lisalugemist: CSS3 kasti suurus (Hongkiat.com)

Meedia päringud

CSS3 meedia päringut kasutatakse selleks, et määratleda, kuidas stiilid mõnedes vahemaades või konkreetselt seadme ekraani suurustes nihkuvad.

Kuna meie navigatsioon on esialgu 600px fix-width, määratleme kõigepealt stiilid, kui neid vaadatakse 600px või väiksema ekraani suurus, nii et praktiliselt kõneleb, seda on meie esimene katkestuspunkt.

Selles ekraani suuruses kuvatakse iga kahe menüü linki kõrvuti, nii et ulsiin on laius 100% brauseri aknas, kui menüü linke on 50% laiuse jaoks.

 @media ekraan ja (max-width: 600px) nav kõrgus: auto;  nav ul laius: 100%; kuva: plokk; kõrgus: auto;  nav li laius: 50%; float: vasakule; positsioon: suhteline;  nav li a border-bottom: 1px solid # 576979; paremal: 1tx tahke # 576979;  nav a text-align: vasakule; laius: 100%; tekst-taane: 25px;

… Ja siis me määratleme ka, kuidas kuvatakse navigeerimine, kui ekraan on väiksem 480px või madalam (see on meie teine katkestuspunkt).

Selles ekraani suuruses algab nähtav lisalink, mille oleme lisanud, ja me anname ka lingi a “Menüü” ikooni selle parempoolsel küljel : pärast pseudoelement, kui primaarseid menüü linke peidetakse, et salvestada rohkem vertikaalset ruumi ekraanil.

 @media only screen ja (max-width: 480px) nav piiri-alumine: 0;  nav ul display: no; kõrgus: auto;  nav a # pull display: block; taustavärv: # 283744; laius: 100%; positsioon: suhteline;  nav a # pull: pärast content: ""; taust: url ('nav-icon.png') korduv; laius: 30 px; kõrgus: 30 px; kuva: inline-block; positsioon: absoluutne; õigus: 15x; top: 10px;

Lõpuks, kui ekraan muutub väiksemaks 320px ja alandage menüüd vertikaalselt ülalt alla.

 @media only screen ja (max-width: 320px) nav li display: block; float: mitte; laius: 100%;  nav li a border-bottom: 1px solid # 576979;

Nüüd saate proovida brauseri akna suurust muuta. Nüüd peaks see suutma ekraani suurust kohandada.

Lisalugemist: Meedia päringud standardseadmetele.

Menüü kuvamine

Sel hetkel on menüü ikka veel peidetud ja see on nähtav ainult siis, kui seda on vaja puudutades või klõpsates “Menüü” ja me saame selle efekti saavutada, kasutades jQuery slideToggle ().

 $ (funktsioon () var pull = $ ('# pull'); menüü = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on (kliki, funktsioon (e) e.preventDefault (); menu.slideToggle ();););

Kui aga brauseri akna suuruse muutmine kohe pärast seda, kui olete just vaatanud ja peitnud menüü väikese ekraaniga, jääb menüü peidetud, kuna kuva: pole JQuery loodud stiil on ikka veel elemendis.

Seega peame selle stiili akna suuruse muutmisel eemaldama järgmiselt:

 $ (aken) .resize (funktsioon () var w = $ (aken) .width (); kui (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Alright, see on kõik koodid, mida me vajame, nüüd saame vaadata navigatsiooni järgmistest linkidest ja soovitame teil seda katsetada tundliku disaini testimisvahendis, nagu Responsinator, et saaksite seda erinevatel laiustel korraga vaadata.

Demo
Allalaadimise allikas

Boonus: alternatiivne viis

Nagu me juba selles postituses mainisime, on mõned muud viisid seda teha ja JavaScripti raamatukogu kasutamine ValiNav.js on üks lihtsamaid viise. See on puhas JavaScript, mis ei tugine teisele kolmanda osapoole raamatukogule nagu jQuery.

Põhimõtteliselt dubleerib see teie loendimenüü ja muudab selle a-ks menüü kasutab seadme enda kohalikku kasutajaliidest.

Palun vaadake edasiseks rakendamiseks ametlikku dokumentatsiooni.

Järeldus

Oleme jõudnud läbi kõik, et luua tundlik navigatsioon nullist. See, mille me siin oleme loonud, on vaid üks näide, ja nagu me varem selles ametikohas teatasime ja ülalpool näidatud, on palju muid lahendusi, mida saate rakendada. Niisiis, nüüd on jätta oma otsus valida, milline praktika sobib kõige paremini nõudluse ja veebisaidi navigeerimisstruktuuriga.