I en tidligere opplæring lærte vi hvordan du tilpasser stiftelsen 4 øverste bar ved hjelp av CSS. Siden da har ZURB gitt ut grunnlag 5; raskere, slankere og kraftigere enn sin forgjenger. Det er også merkbart at ZURB har brakt tilbake funksjonen Off Canvas, som finnes i Foundation 3.

I dag skal vi kombinere funksjonen utenfor lerretet med toppnavigasjonen. Resultatet blir en fin tilpasset navigasjon for stasjonære brukere og en slank off-canvas-meny for nettbrett og mobilbrukere.

Merk: Funksjonaliteten som vi bruker her virker ikke for IE8 og lavere. Jeg har tatt med en løsning for IE9 i ressursene som er oppført på slutten av opplæringen.

Krav

For å følge denne opplæringen trenger du litt mellomopplevelse i følgende:

• Grunnleggende forståelse av Foundation og Grid System
• Kunnskap om å jobbe med et Sass og Compass Foundation prosjekt

Starter

Sette opp miljøet

Hvis du ikke allerede har det, gå videre og sett opp Compass og Sass ved hjelp av Foundation Sass-dokumentasjonen hvis du trenger retning. Hvis du allerede har gjort det, er det hurtigoppsettet for å opprette et nytt Stift 5-prosjekt ved hjelp av kommandoprompt:

Ruby Command Prompt

Gå til din foretrukne katalog

cd c: / bruker / arbeidsmiljø

Bruk denne kommandoen til å opprette prosjektet ditt

grunnlaget nytt ditt prosjekt

Gå til din nyopprettede prosjektfil

cd-prosjektet ditt

Og bruk denne kommandoen for å få kompass til å se og kompilere Sass-filene dine

kompass ur

Hvis alt gikk vel, bør katalogen din se slik ut:

Stiftelsen 5 Prosjektkatalog

Bare én ting gjenstår, og det er å skape vår style.scss. Gjør dette ved å opprette en ny fil i scss-mappen og navngi den filen style.scss. Vi trenger denne filen senere. Hvis du har Kompass kjører, bør din style.scss allerede være kompilert til astyle.cssfilen i stilarkets mappe. Flott, vi har alt oppsett, la oss begynne med å kode vår generelle HTML-struktur.

Sette opp HTML-strukturen

Trinn 1: Generell merking

Åpne indeksen.html og fjern alt innholdet mellom kroppskodene, med unntak av skriptene like før . Vi trenger dem for alle stiftelsesfunksjonene til å fungere. For det andre, gå videre og legg til følgende linje av kode i , for å sikre at vi laster inn vår CSS-fil.

Med det satt opp, la oss legge til et par seksjoner og gi vår side noe dummy innhold. Vi starter med noen grunnleggende detaljer ved å legge til en header, hoved, tjeneste, oppfordring til handling, bunntekst og opphavsrett.

  
 
 
 
Stift 5 Topbar / Offcanvas-menyen
 
  
  
     
  
 
 
 
Flytter til side for Offcanvas-folkene!
 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.
 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora i stedet for maksim quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus arkitekto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, ikke rem in illis idi hic laboriosam blanditiis aliquid!
 
  
  
   
 
 
 
Service # 1
 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Natus, veniam, asperiores fugit quas quaerat soluta i quibusdam, hvor du ikke lenger kan ha en eique rem!
 
 
 
Service # 3
 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Alquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, i sequi voluptatem impedit rem omnis aliquam?
 
 
 
Service # 3
 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Voluptate ducimus aut commodi eius! Sequi, magni labore, og jeg vil bare gi deg en autentisk repellendus, så lenge du kan gjøre det maksimalt!
 
 
  
   
 
 
 Ta kontakt med oss! 
 
 
 
      
 
 
 
© 2014
 
  
  
 

Her har vi lagt til en header-seksjon med en logo, deretter en hoveddel delt inn i innholdsdelen, tre tjenester og en oppfordring til handling. Til slutt er det en footer-seksjon med tre kolonner og en opphavsrettsavdeling. Rett fremover markering så langt, la oss komme til topplinjen!

Trinn 2: Topp Bar Markup

Vi skal pakke vår topplinje i en del med klassen navigasjon-seksjon, for styling formål. Vi skal også gi denne delen en annen klasse: show-for-store-up. Dette sørger for at topplinjen bare vises for enheter med en viss minimumsbredde og høyere. Dette er en av de mange Synlighetsklasser Stiftelsen gir oss med (du kan lese mer om disse i stiftelsens komponentdokumentasjon). Nå for oppslaget:

Merk: Ta med data-topplinjen i naven din. På denne måten sørger vi for at JavaScript for topplinjen fungerer riktig (for eksempel rullegardinmenyen, for eksempel).

Trinn 3: Off-Canvas Markup

Våre off-canvas-menyen vil bli skjult utover grensene til visningsporten. Øyeblikket vi trykker på Meny, Offcanvas vil glide inn (fra venstre i vårt tilfelle) og flytte sideinnholdet til høyre. I vårt oppsett skal vi utelukkeoverskriften og bunnteksten i denne bevegelsen. Bare innholdsområdet blir flyttet til side, slik at overskriften og bunnteksten er på plass. 

I tillegg, når du ruller ned, vil vår overskrift (som kan inneholde en logo og kanskje annet innhold) vises fast til toppen av siden (Merk: Siden skal inneholde nok innhold for at dette skal fungere, fordi ellers vil bunntekstdelen også flyte over våre Offcanvas-menyen). Dette betyr at vi må "vikle" off-canvas rundt vårt hovedinnhold. Etter toppnavigasjondelen og før hovedinnholdet vårt, legger du til følgende HTML:

La oss slå det ned. Vi har opprettet to div-elementer; en med klassen off-lerret-wrap og en med klassen indre-wrap.  Av-lerret-wrap skjuler innholdet til menyknappen er trykket. Deindre wrap inneholder nav nav menyen, vår venstre side off-canvas meny og hovedinnhold delen. Vi har gitt nav en klasse av skjule-for-store-up, for å sørge for at den bare viser for små og mellomstore enheter. Ved å gi til side en klasse av venstre-off-lerret-menyen, Vi sørger for at våre off-canvas-menyen vises på venstre side av skjermen. Menyelementene i vår av-lerret-menyen ligner topplinjen. For off-canvas bruker vi en uordnet liste med en klasse av off-lerret-liste for å få den magien til å skje.

Alt du trenger å gjøre er å gi brukeren en måte å lukke Offcanvas-menyen på. Etter det lukker vi off-lerret-wrap og indre-wrap divs. Legg til dette rett etter å ha lukket hoveddelen.