Off-canvas mønsteret er en klassisk tilnærming til responsiv navigering. Når visningsporten er liten nok til å rettferdiggjøre den, er den omfattende navigasjonen skjult "off-canvas" og bare tatt i betraktning når du byttet.
I dag skal vi bygge en off-canvas navigasjon, ved hjelp av CSS for å gjøre bytte (ingen JavaScript kreves) og vår gode venn Grid for å danne sidestrukturen. Her er fullsiden demo av hva vi jobber med.
Grunnleggende sidestruktur
La oss begynne med å bygge en grunnleggende side; vi sikter mot noe slikt:
Semantisk sidestruktur
Dette er en ganske typisk semantisk sidestruktur; Du ser at alt forblir i en enkelt kolonne for små visningsporter, og siden går over på større skjermbilder. De elementet er uthevet i blått for klarhet.
Her er vårt oppslag:
Overskrift
Artikkel
Curabitur orci lacus, auktor ut facilisis nec, ultricies quis nibh. Phasellus id di sicicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed i mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu i vehicula vehicula. Donec varius justo på nulla aliquet volutpat.
Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut en lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.
Ut kurset er avgjørende for øynene, selvfølgelig selvfølgelig. Etiam suscipit ipsum eu augue ultricies, hos rhoncus mi faucibus. In a tellus vitae leo scelerisque fringilla nek på nunc.
La oss nå legge til noen visuelle stiler og noen Grid-regler.
Gettin 'Griddy With It
Begynn med å pakke inn alle våre strukturelle elementer i et inneholdende element av noe slag - dette vil være vår Grid-beholder. jeg bruker .
Her erklærer vi at beholderen skal være skjerm: grid;, at den skal ha en enkelt kolonne av en brøkdel (ikke strengt nødvendig på dette punktet, men vi legger til det for å være grundig), og at gapet mellom alle rutenettet skal være 10px.
Deretter legger du til et par visuelle stiler for å gjøre ting litt klarere:
.container> * farge: # 353535; fontstørrelse: 1.2em; linjehøyde: 1,5; polstring: 20px; bakgrunn: # d0cfc5; . container nav (bakgrunn: # 136fd2; nav ul listestil: none; margin: 0; polstring: 0; nav en color: # d0cfc5 nav a: hover text-decoration: none;
Gjør det Responsive
La oss legge til en medieforespørsel, slik at når visningsporten treffer en viss størrelse (la oss gå på 600px) endres oppsettet.
Så nå, på større skjermer, endres nettverksdeklarasjonen til Rutenett-mal-kolonner: Gjenta (4, 1fr);. Dette gir oss fire kolonner av like bredde, så vi må da erklære hvor bredt vi vil ha hver av våre strukturelle elementer. De Overskrift, nav, og bunntekst vil alle spanne 4 (strekk over fire kolonner) mens seksjon vil spenne over bare tre, etterlater et gap i en kolonne for side å fylle automatisk.
Til slutt, noen stilarter for å endre måten naven ser ut på:
/ * navstiler * / nav ul li display: inline-block; polstring: 0 20px 0 0;
Her er det vi har så langt:
Venturing Off-Canvas
Dette er et perfekt eksempel på hvordan CSS-posisjonering fortsatt kan fungere på strukturelle elementer, selv innenfor et deklarert grid. Vi skal hente naven vår, fjerne den fra dokumentflyten, og plasser den av lerretet. De andre rutenettene kommer til å falle på plass helt fint.
Begynn med en annen medieforespørsel. Vi har allerede vår en minstebredde spørring, men denne gangen vil vi bare stilere elementer opp til en max bredde. Inntil vår visningsport når den magiske 600px vil vi ha navet plassert utenfor lerret:
@media bare skjerm og (maksimal bredde: 599px) #nav posisjon: fast; / * eller velg 'absolutt' avhengig av ønsket oppførsel * / topp: 0; bunn: 0; bredde: 300px; venstre: -340px; overgang: forvandle .3s brukervennlig
Vi har gitt nav en fast bredde, posisjonering det igjen med nok til å gjemme det helt.
Vi brukte posisjon fast, men du kan også bruke absolutte her, avhengig av om du vil at navet skal rulle med vinduet eller ikke.
Du vil også legge merke til overgang regelen, som vil tre i kraft når vi bygger noen veksle kontroller. Vi overfører nav-panelet tilbake til visningen ved hjelp av forvandle. Takk, gå til Rachel Nabors og Joe Zimmerman for å minne meg om å bruke forvandle er alltid mer performant for animasjon enn stilling!
veksling
Etter å ha gjort vår nav forsvunnet, trenger vi nå noen kontroller for å få den tilbake når det trengs. La oss legge til en lenke for å utløse den, og en kobling for å lukke den igjen.
Legg til dette i overskriften:
åpen
og dette til naven:
Lukk
Vi trenger ikke den åpne linken for å være synlig på større skjermbilder, så vi vil gjemme .toggle-elementene i spørsmålet vårt med min bredde:
.veksle display: none;
:mål
Det som er viktig i de ovennevnte koblingene er tilstedeværelsen av en "fragmentidentifikator" (den #nav i href). Disse identifikatorene brukes av nettlesere til å navigere direkte til bestemte elementer på en side. I dette tilfellet målretter vi etter hvilket element som matcher ID-navet, og når det er målrettet, kan vi stile det ved hjelp av :mål pseudoklasse. Ingen JavaScript nødvendig!
Merk: Ved å bruke en fragmentidentifikator på denne måten vil det bli lagt til en oppføring i nettleserloggen hver gang den klikkes. Dette kan ikke være resultatet brukerne vil ha! Takk til Joe Zimmerman for å peke ut dette.
Legg til følgende i vårt spørreskjema med maks bredde:
#nav: mål transform: translateX (340px);
Det er det! Det er vårt veksle.
Her er hva vi har nå:
Du må ta en titt på fullsiden demo for å fullt ut sette pris på hva den gjør.
Konklusjon
Og vi er ferdige! Jeg har holdt styling ned til et minimum for ikke å komme i veien, men vær så snill å gå på nøtter og få dette til å se akkurat slik du vil.
Du kan også foretrekke en JavaScript-bytte, i stedet for :mål, I så fall har du alle brikkene på plass for å få det til å fungere også.
Jeg håper du likte denne lille Grid-øvelsen, hold deg innstilt for mer å komme!
Nyttige ressurser
Forstå CSS Grid Layout-serien på Tuts+
Undersøk Responsive Navigation: Off Canvas Patterns av Steven Bradley
Abonner på csslayout.news
High Performance Animasjoner av Paul Lewis og Paul Irish
Accentsconagua
Share
Semantisk sidestruktur
