Share
Velkommen til den andre i en serie som ser på responsive navigasjonsmønstre. Denne artikkelen vil gå deg gjennom fire mønstre der navigasjonen flytter til bunnteksten, og sparer plass øverst på siden.
Så, for å samle. I den forrige opplæringen utviklet vi tre mønstre hvor navigasjonen var i toppteksten, uansett hvilken skjermstørrelse. Målet med disse mønstrene var å minimere det vertikale rommet da navigasjonen ble vist på mindre skjermer.
I dag skal vi flippe ting og utvikle fire nye mønstre der navigasjonen ligger i foten av designet vårt. Ved å flytte vår meny til bunnen av siden sparer vi naturligvis plass øverst. Som med forrige artikkel er disse mønstrene trolig kjent for deg gjennom Brad Frost som komponerte mønstre som brukes på lydhørstedene, samt noen komplekse mønstre som brukes.
Med de tre toppmønstrene var vår største bekymring plass, spesielt vertikal plass og hvordan ikke å bruke for mye av det. Du vil at besøkende skal se innholdet ditt så snart som mulig, og de kan ikke gjøre det hvis navigasjonen tar opp hele skjermen. En måte vi kan løse dette problemet på er å flytte navigasjonen til bunnteksten.
Det åpner opp et nytt sett med utfordringer. Mens besøkende lettere kommer til innholdet, må de nå bla ned til bunnen av siden for å oppdage navigasjonen.
Mønstrene vi skal utvikle i denne artikkelen er:
Hvert av disse mønstrene vil bygge på mønsteret før det. Først flytter vi navigasjonen til bunnteksten, og vi legger til variasjoner som gjør det mer synlig og lettere å få tilgang til.
Som med den forrige artikkelen om toppmønstrene, vil jeg beholde koden nedenfor spesifikk for menyen og tilhørende elementer. Den fulle koden er tilgjengelig via nedlastingskoblingen over og kan også ses ved å besøke demoen og vise kildekoden.
Som navnet antyder, flyttes bare mønsteret til den globale navigasjonen til bunnteksten. I all ærlighet vil du sannsynligvis ikke bruke dette mønsteret som det er. Mens det frigjør vertikal plass øverst på siden, skjuler den navigasjonen nederst. Det kan fungere fint på smarttelefonskjermene, men det gir ikke mye mening på en widescreen-nettleser.
Dette mønsteret setter imidlertid grunnlaget for de andre mønstrene, som vil bygge på denne, og bidra til å gjøre menyen mer tilgjengelig.
Nærme seg: På de minste skjermene vil vi sette opp menyen som skal vises nederst på siden som en vertikal liste over lenker. Så stiler vi dem for å gjøre dem litt mer attraktive. Gjennom medieforespørsler overfører vi menyen fra vertikal til horisontal, men hele tiden vil menyen forbli nederst på siden.
Siden vi beveger oss, lar vår navigasjonskode se på den generelle strukturen på siden for en viss kontekst. Tidligere var navigasjonen plassert inne i topptekstelementet med logoen. Nå ligger den inne i bunnteksten med kreditt.
Ellers er det samme liste over lenker vi så i del ett. Alt jeg gjorde var å kopiere og lime inn den eksakte koden i demoen for å flytte den fra topp til bunn.
Som standard viser en liste sine elementer som blokknivåelementer, en av toppen av en annen. Dette er hva vi vil, så vi får en enkel start. Standardstilene er hovedsakelig estetiske. Først vil vi sette marginen og utfyllingen til listen til 0 og fjerne kulene. Deretter gir vi listepostene en toppramme og angir gjeldende lenke som en annen farge.
# demo-nav margin: 0; polstring: 0; listestil: none; # demo-nav li border: solid # 878382; kantbredde: 0 0 1px 0; # demo-nav li.current a color: # 9b9796; # demo-nav li.current a: hover color: # 111;
På samme måte får resten av koblingene en farge og noe polstring. Understrekket er fjernet, og koblingene er satt til å vises som blokknivåelementer for å øke klikkbart område på lenken. Jo mer område du kan røre for å aktivere lenken, desto bedre for små skjermer og fettfinger. Kanskje mest interessant er bakgrunnen. For å legge til noen visuell interesse bestemte jeg meg for å gi koblingene en gradient og gjøre bakgrunnen litt lettere på hover.
# demo-nav en color: #fff; polstring: 0.75em 5%; tekst-dekorasjon: ingen; skjerm: blokk; bakgrunnsfarge: # 575352; bakgrunnsbilde: -webkit-lineær-gradient (topp, # 777372, # 676362); bakgrunnsbilde: -moz-lineær-gradient (topp, # 777372, # 676362); bakgrunnsbilde: -ms-lineær-gradient (topp, # 777372, # 676362); bakgrunnsbilde: -o-lineær gradient (topp, # 777372, # 676362); # demo-nav a: svever bakgrunns-farge: # 777372; bakgrunnsbilde: -webkit-lineær-gradient (topp, # 878382, # 777372); bakgrunnsbilde: -moz-lineær-gradient (topp, # 878382, # 777372); bakgrunnsbilde: -ms-lineær-gradient (topp, # 878382, # 777372); bakgrunnsbilde: -o-lineær-gradient (topp, # 878382, # 777372); farge: # 111;
Igjen dette er alt rent estetisk. Som standard har menyen vist en vertikal liste over lenker, som er alt vi virkelig trengte.
Den vertikale listen over lenker vi stylet over fungerer fint før nettleserbredden når omtrent 42.5em (680px). På dette punktet føles det horisontale rommet litt for tomt. Vi overfører menyen til en horisontal en fremdeles nederst på siden.
Overgangen gjøres ved å flytte linkene inne i listen til venstre. Alt annet er å gjenta estetikken. Først ga jeg listen en bakgrunnsfarge som ville fungere mellom sub footer-linkene og kreditt. Jeg har også gitt det litt polstring og en bunngrense. Siden koblingene innsiden er nå floated jeg lagt overløp: skjult til listen for å tvinge den til å holde seg åpen.
Lenkene får så litt polstring. 5% til venstre er den samme polstring alt annet langs venstre kant har satt. Jeg fjernet grensen som koblingene ikke lenger er oppe på hverandre og fjernet også bakgrunnsfargen bak dem. Fordi jeg tidligere hadde brukt en gradient i bakgrunnen, trengte jeg også å rydde ut bakgrunnsbildeegenskapen på koblingene, inkludert deres sveverstat.
@media skjerm og (min bredde: 42.5em) # demo-nav bakgrunn: # 474342; polstring: 1.5em 0; border-bottom: 1px solid # 878382; overløp: skjult; # demo-nav li border: 0; # demo-nav en padding: 0.75em 0 0.75em 5%; flyte: venstre; bakgrunnsfarge: gjennomsiktig; bakgrunnsbilde: ingen; kantbredde: 0; # demo-nav a: svever bakgrunnsfargen: gjennomsiktig; bakgrunnsbilde: ingen;
Det neste medieforespørsmålet er bare å gi koblingene litt mer plass ettersom nettleseren blir bredere.
@media skjerm og (min bredde: 56em) # demo-nav a polstring: 0.75em 1.5em 0.75em 5%;
Vi kunne forlate ting akkurat slik og fortsette å legge til mer mellomrom mellom koblinger etter behov. I stedet bestemte jeg meg for å droppe koblingene ned og til høyre for kreditten når det var nok plass.
Først satte jeg listen til å flyte til høyre, som for det meste faller den på plass. Etter litt justering til koblingen er den helt på plass. Vi må også fjerne bakgrunnen til hele menyen, siden vi vil at fotfargene skal være bakgrunnen.
@media skjerm og (min bredde: 64em) # demo-nav float: right; margin-høyre: 5%; bakgrunn: gjennomsiktig; grense: 0; polstring: 1em 0; # demo-nav li display: inline; # demo-nav en padding: 0.5em 1.25em; # demo-nav a: hover color: # 777 # demo-nav li.current a: hover color: # 777; # demo-nav li: siste barn a padding-right: 0;
Det siste mediesøket er igjen å justere avstanden mellom koblingene. Vi stopper her, men du kan fortsette å legge til flere medieforespørsler for å øke plassen.
@media skjerm og (min bredde: 75em) # demo-nav a polstring: 0.5em 1.75em;
Det er egentlig ikke mye til dette mønsteret når du flytter html for navigasjonen til bunnen av siden. Flertallet av css ovenfor er estetisk styling, og du er fri til å stillegge menyen din, men du vil. På et tidspunkt vil du sannsynligvis overgå den fra en vertikal meny til en horisontal.
Det som er fint med fotmønsteret, er at det kan fungere uansett hvor mange koblinger navigasjonen inneholder. På de minste skjermene kan du bruke så mye vertikal plass som du vil, og når det er rom kan du passe på disse koblingene horisontalt ved siden av hverandre. Nøkkelen er å sørge for at koblingene har nok plass rundt dem slik at de kan berøres uavhengig uten å treffe en annen lenke.
Igjen, vil du sannsynligvis ikke bruke dette mønsteret som det er, og vil i stedet velge å bruke en av følgende variasjoner av dette mønsteret som bidrar til å gjøre menyen mer synlig og tilgjengelig.
Nettstedene nedenfor bruker alle bare footer-mønsteret
Dette andre mønsteret er en variant av bare footer. Opptil 64em (1024px) er det nesten nøyaktig det samme i koden og vil se nøyaktig det samme når du ser på siden. Men i stedet for å flytte navigasjonen til høyre side av fotfeltet når et mellomrom tillater det, flytter vi det til høyre side av toppteksten som du kan se på bildet over.
På små skjermer må folk fortsatt rulle for å finne menyen, men nå er det øverst på siden der de fleste forventer å se det på bredere skjermer. Siden det meste av koden er identisk, vil jeg bare dekke hvor mønstrene er forskjellige nedenfor.
Nærme seg: Vi gjør det samme som på små skjermbilder. Vi starter med en vertikal meny, og når en plass tillater det, overgår vi menyen til å vise horisontalt. Vi vil avvike når skjermen vokser stort nok. I stedet for å flytte menyen til høyre side av bunnteksten, beveger vi den opp til høyre på toppteksten.
Den eneste forskjellen i html mellom dette og bare footer-mønsteret er at navigasjonen er fjernet fra innsiden av bunnteksten og nå sitter rett over den. Dette påvirker ikke visningen på små skjermer, men det gjorde det litt enklere å flytte navigasjonen til overskriften.
Den eneste endringen i standard css er under. Siden jeg flyttet menyen utenom bunnteksten, trengte den den minste bit av styling for å legge en kant til toppen.
nav border-top: 1px solid # 878382;
De første par medieforespørsmålene (på 42.5em og 56em er identiske med det vi så i bare footer-mønsteret ovenfor. Forskjellen kommer når vi når 64em. Over flyttet jeg menyen til høyre side av bunnteksten. Flytt den til høyre side av toppteksten.
Mye av det som er under er som vi gjorde over. Det viktigste å merke seg er plasseringen på nav-elementet som inneholder vår meny. Vi kan ikke flyte det denne gangen som det er nederst i html-strukturen. I stedet kommer vi til posisjonering.
Mens jeg ikke har nevnt det tidligere, er kroppselementet satt til posisjon: relativ. Med det kan vi sette navet til å bli plassert helt og sett det er topp og høyre verdier.
Alt annet er enten det samme eller en tweak av det vi så over. Paddings er litt annerledes, og vi må fortsatt fjerne bakgrunnen og grensen på menyen.
@media skjerm og (min bredde: 64em) nav posisjon: absolutt; topp: 0; høyre: 5%; bakgrunn: ingen; grense: 0; # demo-nav bakgrunn: transparent; grense: 0; polstring: 1em 0; # demo-nav li display: inline; # demo-nav a padding: 0.5em 1em; # demo-nav a: hover color: # 777 # demo-nav li.current a: hover color: # 777; # demo-nav li: siste barn a padding-right: 0;
Når navigasjonen er flyttet til toppen av siden, eksisterer resten av medieforespørsmålene for å støte opp polstringen mellom koblinger. Her stoppet jeg på 90em, men igjen har du drosjen så bred som du vil.
@media skjerm og (min bredde: 75em) # demo-nav a padding: 0.5em 1.75em; @ media skjerm og (min bredde: 80em) # demo-nav a polstring: 0.5em 2.1em; @ media skjerm og (min bredde: 90em) # demo-nav a polstring: 0.5em 2.5em;
Dette mønsteret har de samme fordelene med bare footer-mønsteret ovenfor. Det kan fungere med så mange lenker som du vil. Enda bedre flytter navigasjonen til toppen av siden når det er nok plass. Når det er, vil det avhenge av detaljene i designet. Nøkkelen igjen sørger for at målene for koblingene er store nok til fingrene.
Selvfølgelig har dette mønsteret også den samme ulempen som bare footer-mønsteret på mindre skjermer hvor folk fortsatt må rulle for å finne navigasjonen din.
Footer-ankermønsteret forsøker å løse problemet med å måtte bla for å komme til menyen ved å inkludere en ankerkobling øverst på siden direkte til menyen. Bortsett fra dette tillegget, vil dette mønsteret være identisk med bunntekstvariasjonsmønsteret vi nettopp har bygget.
Nærme seg: På små skjermer starter vi med samme vertikale meny vi har jobbet med så langt. Vi vil inkludere en css-knapp som når du klikker, tar oss direkte til navigasjonen i bunnteksten. Når skjermen er bred nok og vi flytter navigasjonen tilbake til toppen av siden, skjuler vi ankerknappen.
Html er identisk med bunntekstvariationen ovenfor med ett unntak. Vi må legge til en kobling øverst på siden, som vi vil stile som en knapp. Vi benytter oss av den allerede eksisterende # demo-nav-ID for å fungere som ankeret for lenken. Når du klikker den, vil den laste siden og legge til en # demo-nav hash til slutten av webadressen som tar deg rett til navigasjonen.
Meny
Den eneste forskjellen i standard css er at vi må utforme linken for å se mer ut som en knapp og plassere den til høyre side av toppteksten. Å flytte lenken til høyre og gi den litt margin tar vare på stillingen.
For å gjøre det tøft, setter vi først linken for å vise som et blokknivåelement og legg til noe polstring. Etter at du har fjernet underlinjen og endret fargen til hvit, legger vi til en liten kantradius og deretter litt bakgrunn.
Igjen bruker vi en gradient i bakgrunnen for å gjøre knappen mer klikkbar. For en eller to nettlesere som ikke klarer å håndtere det, ikke så mye, men for de som kan det, vil det legge litt dybde til knappen. For hover-tilstanden gjør vi fargene litt lettere.
.anker float: right; margin-topp: 1,25em; skjerm: blokk; polstring: 0,25em 2%; farge: #fff; tekst-dekorasjon: ingen; border-radius: 0.25em; bakgrunn: # 5b5756; bakgrunnsfarge: # 5b5756; bakgrunnsbilde: -webkit-lineær-gradient (topp, # 6b6766, # 5b5756); bakgrunnsbilde: -moz-lineær-gradient (topp, # 6b6766, # 5b5756); bakgrunnsbilde: -ms-lineær gradient (topp, # 6b6766, # 5b5756); bakgrunnsbilde: -o-lineær gradient (topp, # 6b6766, # 5b5756); .anchor: svever bakgrunnsfarger: # 7b7776; bakgrunnsbilde: -webkit-lineær-gradient (topp, # 8b8786, # 7b7776); bakgrunnsbilde: -moz-lineær-gradient (topp, # 8b8786, # 7b7776); bakgrunnsbilde: -ms-lineær-gradient (topp, # 8b8786, # 7b7776); bakgrunnsbilde: -o-lineær gradient (topp, # 8b8786, # 7b7776);
Det er bare en ny ting å se i media spørringene. På 64em (der vi flyttet navigasjonen til toppen av siden) må vi gjemme knappen og så satte vi skjermen til ingen. Alt annet er nøyaktig det samme som i bunntekstvariasjon.
@media skjerm og (min bredde: 64em) .anchor display: none;
Dette mønsteret har alle fordelene med de ovenfor. Det holder vertikalt plass øverst på siden til et minimum. Som med de andre mønstrene du vil sørge for at koblingsmålene er store nok. Ankeret gjør navigasjonen mer tilgjengelig når den er i bunnteksten.
Ulempen er hoppet fra toppen til bunnen av siden. Det kan potensielt forvirre besøkende som kanskje ikke skjønner at de hoppet til bunnen. En måte å gi en anelse på er å legge til en "tilbake til topp" -link. Jeg har ikke lagt til en her, men det ville begge hjelpe orientere leseren og gi rask tilgang til toppen av siden.
En annen måte å løse dette problemet på er vårt neste mønster.
Hvor fotfesteanker forsøker å løse rullingsproblemet ved å ta deg til menyen, holder dette mønsteret navigasjonen synlig, slik at ingen hopp er nødvendig. Den bruker fast posisjonering for å holde navigasjonen nederst i nettleseren. Navigasjon nederst på siden er svært brukbar på svært små skjermer, og mens dette mønsteret for tiden ikke brukes mye, begynner det å bli brukt mer.
Nærme seg: På grunn av antall koblinger vi har, benytter vi fotfesteankermønsteret på de minste skjermene. Så snart rom tillater, fjerner vi ankerknappen og overfører menyen, slik at den er horisontal og festet på bunnen av nettleseren. Vi holder det der til det er nok plass til å flytte det til toppen av siden.
Html er identisk med det vi så med bunntekstankermønsteret over. Seriøst er det absolutt ingenting å se her. Flytt sammen.
Jepp. Identisk her også. Igjen ingenting å se. Flytt sammen, vær så snill.
Endelig litt ny kode. Når nettleseren er åpen til 37.5em (600px) er det nok plass til å plassere menyen horisontalt. Først legger vi til en margin til bunnen av bunnteksten, eller det vil forbli bak den posisjonerte menyen. Siden menyen er synlig trenger vi ikke lenger ankerknappen, og vi slår den av.
For å fikse navigasjonen skal vi stile nav-elementet. Vi setter den posisjonen til fast og gir den en bunnverdi på 0. Z-indeksen forhindrer at kreditten vises gjennom når den ligger bak menyen. Eventuell positiv verdi vil fungere. 10 var vilkårlig. Vi vil også gi nav-elementet en bakgrunn, og vi må sette bredden til 100%, da navigasjonen ikke er den totale bredden på siden som standard.
@media skjerm og (min bredde: 37.5em) footer margin-bottom: 4em; .anchor display: none; nav posisjon: fast; bunn: 0; z-indeks: 10; bakgrunn: # 474342; bredde: 100%; # demo-nav polstring: 0.5em 0; # demo-nav li border: 0; skjerm: inline; # demo-nav a padding: 0.75em; flyte: venstre; bakgrunnsfarge: gjennomsiktig; bakgrunnsbilde: ingen; kantbredde: 0; # demo-nav a: svever bakgrunnsfargen: gjennomsiktig; bakgrunnsbilde: ingen;
Alt annet er det samme som det var over. Inne i nav-elementet blir koblingene flyttet til venstre og har paddings set. Vi bør fjerne bakgrunnsfarge og gradient også, akkurat som vi gjorde over. Jeg antar vi er ferdige her. Flytt sammen.
Igjen bruker dette mønsteret minimal vertikal plass øverst på siden. Den løser både problemet med skjult navigasjon og et hopp til navigasjonen ved å holde navigasjonen synlig til enhver tid. Eller det gjorde det nesten.
I demoen var det for mange koblinger til å bære den faste posisjoneringen under 600px, så jeg forlot fotmønsterankermønsteret på plass i disse størrelsene. Bedre ville ha vært å redusere navigasjonsetikettene til 4 eller 5 ord eller til og med ta det et skritt videre og bruk ikoner.
Dette mønsteret er ikke så vanlig for øyeblikket. Du kan se jeg fant bare 2 eksempler for å vise deg. Gitt hvordan de fleste av oss bruker tommelen til å navigere når du holder mobile enheter med en hånd, mistenker jeg at vi får se mer av dette mønsteret og varianter av det i fremtiden.
Alle fire mønstrene her er variasjoner på et tema. I stedet for å bruke den verdifulle og knappe vertikale eiendommen øverst på siden, beveger mønstrene navigasjonen til bunnen av siden. Den største fordelen er at folk på de minste skjermene kan se og komme raskt til innholdet ditt. Ulempen er at navigasjonen er helt nede nederst på siden.
Den første varianten av mønsteret flyttet navigasjonen tilbake til toppen når et tillatt rom er tillatt. Det hjelper, men det er fortsatt jakt og rulling for menyen på små skjermer. Fodreanker korrigerer det ved å bruke en liten mengde plass i overskriften for å gi en direkte kobling og rask tilgang til menyen. Det etterlater oss med et raskt og potensielt disorientert hopp nedover siden, skjønt.
Fotenmønsteret korrigerer det ved å holde menyen synlig nederst på siden. Med få navigasjonsetiketter eller bruk av ikoner kan menyen alltid være synlig uansett hvorvidt nettleseren er bred.
Vi har fortsatt flere mønstre å komme til. Neste gang flyttes vi tilbake til toppen av siden. Vi vil tilpasse det vi gjorde med footer ankeret, så i stedet for å hoppe oss til navigasjonen vil vi avsløre navigasjonen på plass.
Accentsconagua
Meny