Sådan oprettes en responsiv navigation

En af de vanskeligste dele at være responsified på et websted er “navigationen”, Denne del er virkelig vigtig for tilgængeligheden af ​​hjemmesiden, da det er en af ​​måderne, hvorpå besøgende hopper over websiderne.

Der er faktisk mange måder at oprette responsiv hjemmeside navigation og endda nogle jQuery plugins er tilgængelige for at gøre det om et sekund.

Men i stedet for at anvende en øjeblikkelig løsning, i dette indlæg, vil vi gå igennem hvordan man bygger en simpel navigation fra jorden og ved hjælp af CSS3-medieforespørgsler og lidt jQuery for at vise det i en lille skærmstørrelse som smartphones korrekt.

Så lad os bare komme i gang.

• Demo
• Download kilde

HTML

Først og fremmest, lad os tilføje meta viewporten inde i hoved tag. Dette meta viewport tag er påkrævet for vores side at skalere korrekt inde i enhver skærmstørrelse, især i mobilvisningsporten.

... og tilføj derefter følgende uddrag som navigationsmarkeringen inde i legeme tag.

Som du kan se ovenfor, har vi seks primære menuforbindelser og tilføjet endnu et link efter dem. Denne ekstra link vil blive brugt til trække menu navigationen, når den er skjult i en lille skærm.

Yderligere læsning: Glem ikke visnings-metataggen.

styles

I dette afsnit begynder vi at stylere navigationen. Stilen her er kun dekorativ, du kan vælge farver som du ønsker. Men i dette tilfælde ønsker vi (jeg personligt) legeme at have en blød og cremet farve.

 krop baggrundsfarve: # ece8e5;  

Det nav tag, der definerer navigationen vil have 100% fuld bredde af browservinduet, mens ul hvor den indeholder vores primære menuforbindelser vil have 600px for bredden.

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

Så vil vi flyde menuen forbinder til venstre, så de vises vandret side om side, men flydende et element vil også få deres forælder til at kollapse.

 nav li display: inline; flyde: venstre;  

Hvis du bemærker fra HTML-markeringen ovenfor, har vi allerede tilføjet clearfix i klasse attribut for både nav og ul at rydde tingene rundt, når vi flyder elementerne inde i det ved hjælp af dette CSS clearfix hack. Så lad os tilføje følgende stilregler i stilarket.

 .clearfix: før, .clearfix: efter indhold: ""; display: bord;  .clearfix: efter clear: both;  .clearfix * zoom: 1;  

Da vi har seks menuforbindelser, og vi har også angivet containeren til 600px, hver menukobling vil have 100px for bredden.

 nav en farve: #fff; display: inline-block; bredde: 100px; tekst-align: center; tekst dekoration: ingen; linjens højde: 40px; tekstskygge: 1px 1px 0px # 283744;  

Menuforbindelserne vil blive adskilt med 1px højre grænse, bortset fra den sidste. Husk vores tidligere indlæg på boksmodel, menuens bredde bliver udvidet til 1px gør det 101px Som grænsen tilføjelse, så her ændrer vi box-dimensionering model til border-box for at holde menuen forbliver 100px.

 nav li a border-right: 1px solid # 576979; box-dimensionering: border-box; moz-box-dimensionering: border-box; -webkit-box-dimensionering: border-box;  nav li: sidste-barn a grænse-højre: 0;  

Derefter vil menuen have lysere farve, når den er i : hover eller :aktiv stat.

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

... og endelig vil det ekstra link blive gemt (til skrivebordet).

 nav a # pull display: none;  

På dette tidspunkt styler vi kun navigationen, og der sker ikke noget, når vi ændrer størrelsen på browservinduet. Så lad os hoppe til næste trin.

Yderligere læsning: CSS3 Box-dimensionering (Hongkiat.com)

Medieforespørgsler

CSS3-medieforespørgsler bruges til at definere, hvordan stilarterne skifter i nogle bestemte breakpoints eller specifikt enhedens skærmstørrelser.

Siden vores navigation er oprindeligt 600px fix-bredde, vil vi først definere stilarterne, når den ses i 600px eller lavere skærmstørrelse, så praktisk taget, dette er vores første breakpoint.

I denne skærmstørrelse vises hver af to menuforbindelser side om side, så ulBredden her vil være 100% i browservinduet, mens menuforbindelserne vil have 50% for bredden.

 @media skærm og (maks bredde: 600px) nav højde: auto;  nav ul bredde: 100%; display: blok; højde: auto;  nav li bredde: 50%; flyde: venstre; stilling: relativ;  nav li a border-bottom: 1px solid # 576979; grænse-højre: 1px solid # 576979;  nav en text-align: left; bredde: 100%; tekstindtryk: 25px;  

... og så definerer vi også hvordan navigationen vises, når skærmen bliver mindre ved 480px eller lavere (så dette er vores andet breakpoint).

I denne skærmstørrelse er det ekstra link, vi har tilføjet før, synligt, og vi giver også linket a “Menu” ikon på højre side ved hjælp af :efter pseudo-element, mens de primære menuforbindelser vil blive gemt for at gemme flere lodrette mellemrum på skærmen.

 @media only screen og (maxbredde: 480px) nav border-bottom: 0;  nav ul display: none; højde: auto;  nav en # pull display: block; baggrundsfarve: # 283744; bredde: 100%; stilling: relativ;  nav en # pull: efter indhold: ""; baggrund: url ('nav-icon.png') no-repeat; bredde: 30px; højde: 30px; display: inline-block; position: absolut; højre: 15px; top: 10px;  

Endelig, når skærmen bliver mindre ved 320px og lavere menuen vises lodret øverst til bund.

 @media only screen og (maxbredde: 320px) nav li display: block; flyde: ingen; bredde: 100%;  nav li a border-bottom: 1px solid # 576979;  

Nu kan du prøve at ændre størrelsen på browservinduet. Det skal nu kunne tilpasse skærmstørrelsen.

Yderligere læsning: Media forespørgsler for standard enheder.

Viser menuen

På dette tidspunkt vil menuen stadig være skjult og vil kun være synlig, når det er nødvendigt ved at trykke på eller klikke på knappen “Menu” link og vi kan opnå effekten ved hjælp af jQuery slideToggle ().

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

Men når du ændrer størrelsen på browservinduet lige efter, at du lige har set og skjult menuen på en lille skærm, forbliver menuen skjult, da display: none stil genereret af jQuery er stadig knyttet i elementet.

Så vi skal fjerne denne stil ved vinduets størrelse, som følger:

 $ (vindue) .resize (funktion () var w = $ (vindue). bredde (); hvis (w> 320 && menu.is (': skjult')) menu.removeAttr ('style'); ); 

Okay, det er alle de koder, vi har brug for, vi kan nu se navigationen fra følgende links, og vi anbefaler dig at teste det i et lydhurt designtestværktøj, som f.eks. Responsinator, så du kan se det i forskellige bredder på én gang.

• Demo
• Download kilde

Bonus: En alternativ måde

Som vi tidligere har nævnt i dette indlæg, er der andre måder at gøre det på, og ved hjælp af et JavaScript-bibliotek, der hedder SelectNav.js er en af ​​de nemmeste måde. Dette er et rent JavaScript, der ikke stole på et andet tredjepartsbibliotek som jQuery.

Dybest set vil det duplikere din listemenu og omdanne det til en dropdown menu, så er du i stand til at vælge hvilken der er skjult eller vist afhængigt af skærmstørrelsen gennem medieforespørgsler.

En af fordelene ved denne praksis er, at vi ikke behøver at bekymre os om navigationsstilen som

menuen vil gøre brug af den oprindelige brugergrænseflade fra selve enheden.

Se venligst den officielle dokumentation for yderligere gennemførelse.

Konklusion

Vi er kommet helt igennem for at skabe responsiv navigation fra bunden. Den ene, vi har skabt her, er blot et af eksempler, og som vi tidligere sagde i dette indlæg og vist ovenfor, er der mange andre løsninger, du kan implementere. Så det er nu efterladt din beslutning om at vælge hvilken praksis der passer bedst til at imødekomme kravet og din websteds navigationsstruktur.