Share
En av de viktigste aspektene ved et front-end-rammeverk er hvordan det håndterer navigering. I denne delen av Stiftelsen for nybegynnere, tar vi en titt på flere former for navigering, sammen med noen JavaScript-verktøy som gir ekstra blomstring. Jeg vil også introdusere deg til et annet nyttig verktøy som vil hjelpe deg til å bli en bedre grunnutvikler.
En av Stiftelsens beste JavaScript-tilbud kommer i form av Seksjon; et plugin for å bygge flere former for navigering, for eksempel trekkspill, faner, vertikal og horisontal navigering.
Her er noen eksempeloppslag:
Seksjon 1
Innhold av seksjon 1.
Seksjon 2
Innhold av § 2.
Dette kan se litt mer komplisert ut enn det vi tidligere har dekket, så la meg slå det ned for deg.
Enhver seksjon du lager, uansett om det er et trekkspill, eller faner, eller til og med en navstang, starter med en div ved hjelp av snitt-container klasse etterfulgt av auto klasse. På den samme div legger du til en tom data-seksjon Egenskap. Denne egenskapen dikterer hvilken type seksjon vi har med, som standard, forutsetter at vi vil ha et trekkspill. For å bruke en bestemt type seksjon, endrer du bare auto klasse til faner, trekkspill, vertical-nav eller horisontal-nav. Til slutt legger du til samme klasse som data-seksjon attributtens verdi. Dette vil sikre at du viser riktig type avdeling for dine behov.
Når pakken har blitt satt opp, kan vi legge til noe innhold. For hver seksjon i innpakningen din trenger du en tittel og å koble den tittelen til innholdet:
Seksjon 1
Innhold av seksjon 1.
Vi kan se her at hver seksjon er pakket inn i en tag (som gjør det enkelt, selv om du kan bruke en div). Inne i hver av disse seksjonene har vi en tag med en klasse av tittel som omslutter lenken til den tilsvarende delen. Under avsnittet tag er div som inneholder innholdet for seksjonen; Dette har en klasse av innhold. Dupliserer koden ovenfor vil opprette hver av delene dine i seksjonen din.
Merk: Legge til vertical-nav klassen vil vise en vertikal navigasjon på store skjermer, men vil bytte til et trekkspill når det er på små skjermer. legge horisontal-nav vil fremkalle samme oppførsel.
La oss si at du vil koble til den andre delen av seksjonen din, men når du åpner siden, vises den første delen som standard. Frykt ikke! Stiftelsen har en innebygd løsning i form av Deep Linking. For å få dette til arbeid må vi legge til et nytt attributt til vår wrapper: data-options =”deep_linking: true”. Dette forteller Stiftelsen at når en bruker besøker en URL med en fragmentidentifikator som denne "http://www.website.com/#section3", skal den laste siden med den delen som viser.
Seksjon 1
Innhold av seksjon 1.
Seksjon 2
Innhold av § 2.
Som du kan se, har vi lagt til dyp koblingsdataalternativet og også lagt til data-slug attributt til innholds div. Denne dataskjellet instruerer Foundation hvilken seksjon som skal vises på sidebelastning.
Stiftelsens Side Nav (en enkel måte å vise vertikale menyer) går hånd i hånd med deler. HTML-strukturen er veldig enkel og gir mulighet for deling når det er nødvendig. La oss se på oppslaget.
Dette er en standard uordnet liste, bestående av listeposter som inneholder lenker til ... vel, uansett hva du vil. Legge til side-nav klasse til aktiv klassen kan brukes til å vise hvilken kobling som er i bruk. Hvis du trenger å dele opp listeelementene dine, legger du til et tomt element med en klasse av deler. Lett.
Stiftelsens Sub Nav pleier å bli brukt til ting som filtrering av innhold. Markeringen er like rett frem som Side Nav, men adskiller seg ved at den bruker en beskrivelsesliste i stedet for en uordnet liste. Dette gir deg muligheten til å bruke en begrep sammen med din beskrivelse koder som holder koblingene dine. Det er ingen skillelinjer i Sub Nav, men du kan fortsatt gjøre bruk av aktiv klasse. Her er oppslaget:
Paginering er også en form for navigering; Faktisk bør paginering virkelig være inneholdt i a element. La oss se på oppsummeringen av noen pagineringskoblinger i Foundation:
Skyting av listen din bør være en pil, som krever klassen pil. Du vil kanskje også bruke « eller ‹ eller kanskje til og med ←. Ta en titt på unicode-table.com for flere eksempler du kan bruke.
Pagineringnavigasjonstypen lar oss oppgi klasser utilgjengelig og nåværende, med sistnevnte er svært lik den aktive klassen som vi gikk over tidligere. Du kan også legge til en pil til det siste listen elementet, denne gangen med enten » eller ›, eller kanskje til og med →.
Ettersom dette er enkelt å opprette, legger det til et innholdshåndteringssystem som Wordpress, er ganske enkelt.
Bonus: Du kan sitte på paginasjonen ved å pakke ul-taggen i en nav med paginering-sentrert klasse. Som med alle grunnelementer, er paginering lydhør og lett å stillegge.
Ved hjelp av en responsiv ramme som Foundation er en rask måte å få prosjektet ditt til å se bra ut på alle enheter, men testing er fortsatt en rolle. For å lette den smerten har jeg opprettet et verktøy som heter Respondr, slik at du kan legge til en url til en smarttelefon, nettbrett og skrivebord som gir deg muligheten til å ta tak i problemer raskt og enkelt..
Så langt har vi dekket rutenettet, blokkering av rutenett, rullebrikken for Orbit, delenes plugin og tre typer navigasjon. Neste gang vil vi fokusere på Top Bar-plugin, breadcrumbs og et annet nyttig verktøy.
Accentsconagua