Hvordan lage en responsiv navigasjon

En av de vanskeligste delene å være responsified på et nettsted er “Navigasjonen”, Denne delen er veldig viktig for nettstedets tilgjengelighet, da dette er en av måtene besøkende hopper over nettsidene.

Det er faktisk mange måter å lage responsiv nettside navigasjon, og selv noen jQuery plugins er tilgjengelige for å gjøre det på et sekund.

Men i stedet for å bruke en øyeblikkelig løsning, i dette innlegget, skal vi gå igjennom deg hvordan å bygge en enkel navigasjon fra bakken og bruker CSS3 medieforespørsler og en liten jQuery for å vise den i en liten skjermstørrelse som smarttelefonene riktig.

Så, la oss bare komme i gang.

Demo
Last ned kilde

HTML

Først av alt, la oss legge til meta-visningsporten inne i hode stikkord. Dette meta viewport Etikett kreves for at vår side skal skaleres riktig innenfor alle skjermstørrelser, spesielt i mobilvisningsporten.

... og legg deretter til følgende utdrag som navigasjonsmarkeringen inne i kropp stikkord.

   Hjem
 Hvordan
 ikoner
 Design
 Web 2.0
 Verktøy
 
 Meny

Som du kan se over, har vi seks primære menykoblinger og lagt til en ekstra lenke etter dem. Denne ekstra lenken vil bli brukt til dra menynavigasjonen når den er skjult i en liten skjerm.

Videre lesning: Ikke glem visnings-metataggen.

Styles

I denne delen begynner vi å style navigasjonen. Stilen her er bare dekorativ, du kan velge noen farger som du ønsker. Men i dette tilfellet vil vi (jeg personlig) ha kropp å ha en myk og kremaktig farge.

 kropp bakgrunns-farge: # ece8e5;

De nav tag som definerer navigasjonen vil ha 100% Full bredde på nettleservinduet, mens ul hvor den inneholder våre primære meny lenker vil ha 600px for bredden.

 nav høyde: 40px; bredde: 100%; bakgrunn: # 455868; skriftstørrelse: 11pt; font-familie: 'PT Sans', Arial, sans-serif; font-weight: bold; posisjon: relativ; border-bottom: 2px solid # 283744;  nav ul polstring: 0; margin: 0 auto; bredde: 600px; høyde: 40px;

Da vil vi flyte menyen kobler til venstre, så de vil bli vist horisontalt side om side, men flytende et element vil også føre til at foreldrene faller sammen.

 nav li display: inline; flyte: venstre;

Hvis du merker fra HTML-merket ovenfor, har vi allerede lagt til clearfix i klasse attributt for begge nav og ul å rydde ting rundt når vi flyter elementene inne i det ved hjelp av denne CSS clearfix hack. Så la oss legge til følgende stilregler i stilarket.

 .clearfix: før, .clearfix: etter innhold: ""; skjerm: bord;  .clearfix: etter clear: both;  .clearfix * zoom: 1;

Siden vi har seks meny lenker og vi har også angitt beholderen for 600px, hver menykobling vil ha 100px for bredden.

 nav a color: #fff; display: inline-block; bredde: 100px; tekstjustering: center; tekst-dekorasjon: ingen; linjehøyde: 40px; tekstskygge: 1px 1px 0px # 283744;

Menylinkene vil bli skilt med 1px høyre kant, unntatt den siste. Husk vårt forrige innlegg på bokmodell, menyens bredde vil bli utvidet for 1px gjøre det 101px Som grense tillegg, så her endrer vi box-sizing modell til border-box for å holde menyen igjen 100px.

 nav li a border-right: 1px solid # 576979; box-sizing: border-box; -moz-box-sizing: border-boksen; -webkit-box-sizing: border-boksen;  nav li: siste barn a grense-høyre: 0;

Deretter vil menyen ha lysere farge når den er i :sveve eller :aktiv stat.

 nav a: svever, nav a: aktiv bakgrunnsfarge: # 8c99a4;

... og til slutt vil den ekstra linken bli skjult (for skrivebordet).

 nav a # pull display: none;

På dette tidspunktet styler vi bare navigasjonen, og ingenting skjer når vi endrer størrelsen på nettleservinduet. Så, la oss hoppe til neste trinn.

Videre lesning: CSS3 Box-dimensjonering (Hongkiat.com)

Media spørringer

CSS3-mediespørsmålene brukes til å definere hvordan stilene vil skifte i noen bestemte bruddpunkter eller spesifikt enhetens skjermstørrelser.

Siden vår navigasjon er i utgangspunktet 600px fix-bredde, vil vi først definere stilene når den vises i 600px eller lavere skjermstørrelse, så praktisk talt, dette er vårt første breakpoint.

I denne skjermstørrelsen vises hver av to menylinker side ved side, slik at ulBredden her vil bli 100% i nettleservinduet mens menylinkene vil ha 50% for bredden.

 @media skjerm og (maks bredde: 600px) nav høyde: auto;  nav ul bredde: 100%; skjerm: blokk; høyde: auto;  nav li bredde: 50%; flyte: venstre; posisjon: relativ;  nav li a border-bottom: 1px solid # 576979; border-right: 1px solid # 576979;  nav en text-align: left; bredde: 100%; tekstinnhold: 25px;

... og da definerer vi også hvordan navigasjonen vises når skjermen blir mindre av 480px eller lavere (så dette er vårt andre brytepunkt).

I denne skjermstørrelsen vil den ekstra lenken vi har lagt til, begynne synlig, og vi gir også linken a “Meny” ikonet på høyre side ved hjelp av :etter pseudo-element, mens de primære menylinkene vil bli skjult for å lagre flere vertikale mellomrom på skjermen.

 @media bare skjerm og (maksimal bredde: 480px) nav border-bottom: 0;  nav ul display: none; høyde: auto;  nav a # pull display: block; bakgrunnsfarge: # 283744; bredde: 100%; posisjon: relativ;  nav a # pull: etter content: ""; bakgrunn: url ('nav-icon.png') no-repeat; bredde: 30px; høyde: 30px; display: inline-block; posisjon: absolutt; høyre: 15px; topp: 10px;

Til slutt, når skjermen blir mindre av 320px og lavere menyen vil bli vist vertikalt topp til bunn.

 @media bare skjerm og (maks bredde: 320px) nav li display: block; flyte: ingen; bredde: 100%;  nav li a border-bottom: 1px solid # 576979;

Nå kan du prøve å endre størrelsen på nettleservinduet. Det skal nå kunne tilpasse skjermstørrelsen.

Videre lesning: Medieforespørsler for standard enheter.

Viser menyen

På dette punktet vil menyen fortsatt være skjult og vil bare være synlig når det trengs ved å trykke på eller klikke på “Meny” link og vi kan oppnå effekten ved hjelp av jQuery slideToggle ().

 $ (funksjon () var pull = $ ('# pull'); meny = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on e.preventDefault (); menu.slideToggle ();););

Men når du endrer størrelsen på nettleservinduet rett etter at du nettopp har sett og skjult menyen i en liten skjerm, forblir menyen skjult, ettersom skjerm: ingen stilen generert av jQuery er fortsatt festet i elementet.

Så, vi må fjerne denne stilen ved å endre størrelsen på vinduet, som følger:

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

Ok, det er alle kodene vi trenger, vi kan nå se navigasjonen fra følgende koblinger, og vi anbefaler deg å teste det i et responsivt designtestverktøy, for eksempel Respentator, slik at du kan se det i ulike bredder samtidig.

Demo
Last ned kilde

Bonus: En alternativ måte

Som vi tidligere har nevnt i dette innlegget, er det noen andre måter å gjøre det på, og ved hjelp av et JavaScript-bibliotek kalt SelectNav.js er en av de enkleste måtene. Dette er et rent JavaScript som ikke stole på et annet tredjepartsbibliotek som jQuery.

I utgangspunktet vil det duplisere listemenyen og forvandle den til en menyen vil gjøre bruk av det opprinnelige brukergrensesnittet fra selve enheten.

Vennligst se den offisielle dokumentasjonen for videre implementering.

Konklusjon

Vi har kommet gjennom hele veien for å skape responsiv navigering fra bunnen av. Denne som vi har laget her er bare ett av eksemplene, og som vi tidligere nevnte i dette innlegget og vist ovenfor, er det mange andre løsninger du kan implementere. Så, det er nå etterlatt til din beslutning om å velge hvilken praksis som passer best for å imøtekomme kravet og ditt nettsted navigasjonsstruktur.