Într-un tutorial mai devreme, am învățat cum să particularizăm Fundația 4 Top Bar folosind CSS. De atunci, ZURB a lansat Fundația 5; mai rapid, mai ușor și mai puternic decât predecesorul său. Ceea ce este de remarcat este faptul că ZURB a adus înapoi funcția Off Canvas, care se găsește în Fundația 3.

Astăzi, vom combina caracteristica off-panza cu navigația noastră de top. Rezultatul va fi o navigare personalizată pentru utilizatorii de desktop și un meniu elegant pentru utilizatorii de tablete și dispozitive mobile.

Notă: Funcționalitatea pe care o folosim aici nu funcționează pentru IE8 și mai mică. Am inclus un remediu pentru IE9 în resursele listate la sfârșitul tutorialului.

cerinţe

Pentru a urma acest tutorial, veți avea nevoie de experiență intermediară în următoarele:

• Înțelegerea de bază a Fundației și a Sistemului Grid
• Cunoașterea colaborării cu un proiect Fundația Sass și Compass

Noțiuni de bază

Configurarea mediului

Dacă nu ați făcut-o deja, continuați și configurați Compass și Sass utilizând documentația Foundation Sass dacă aveți nevoie de direcție. Dacă ați făcut deja acest lucru, iată setarea rapidă pentru crearea unui nou proiect Foundation 5 utilizând Promptul de comandă:

Ruby Command Prompt

Accesați directorul preferat

cd c: / utilizator / mediul dvs. de lucru

Utilizați această comandă pentru a vă crea proiectul

fundație nou-dvs. proiect

Accesați fișierul de proiect nou creat

cd-proiectul tău

Utilizați această comandă pentru a obține busola pentru a urmări și a vă compila fișierele Sass

ceas de compas

Dacă totul a mers cu succes, directorul ar trebui să arate cam așa:

Fundația 5 Director de proiect

Un singur lucru rămâne și este acela de a ne crea style.scss. Faceți acest lucru prin crearea unui fișier nou în folderul de șasiu și denumirea acelui fișier stil.scss. Vom avea nevoie de acest fișier mai târziu. Dacă aveți rularea compasului, stilul dvs. stil.scss ar trebui deja să fie compilat la astyle.cssfișier în dosarul foilor de stil. Excelent, avem totul setat, să începem cu codarea structurii noastre generale HTML.

Configurarea structurii HTML

Pasul 1: marcaj general

Deschideți index.html și eliminați tot conținutul dintre etichetele corporale, cu excepția scripturilor chiar înainte de . Avem nevoie de ele pentru ca toate funcțiile Fundației să funcționeze. În al doilea rând, continuați și adăugați următoarea linie de cod în , pentru a ne asigura că încărcăm în fișierul nostru CSS.

Cu această setare, să adăugăm câteva secțiuni și să oferim o pagină cu conținut inactiv. Vom începe cu câteva elemente de bază, adăugând o secțiune antet, principală, serviciu, apel la acțiune, secțiune subsol și drepturi de autor.

  
 
 
 
Fundal 5 meniu Topbar / Offcanvas
 
  
  
     
  
 
 
 
Mergând deoparte pentru oamenii de la Offcanvas!
 
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, acusamus, quo, eum, ipsum voluptatibu aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligibili, laboriosam animi itaque accusantium repudiandae dicta ullam Quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.
 
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus qui tempora iusto facere maxime quasi est qu qui commodi nobis aliquid id eius magnam consectetur. Ut dezerunt respinge asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilita iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus arhitectură iure similique numire caută asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa oficiali rem! Suspiciune, esse, quos. Quos, perferendis, iure nobis modi perspitatis enim error nulla asperiores dignissimos harum. Dolor, care nu se află în nobis ilum id hic laboriosam blanditiis aliquid!
 
  
  
   
 
 
 
Serviciul # 1
 
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit qua queerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!
 
 
 
Serviciul # 3
 
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Sape, în secvență voluptatem impedit rem omnis aliquam?
 
 
 
Serviciul # 3
 
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, lucrătorilor magicieni și a quibusdam autem repellendus ipsum dolorem quasi maxime!
 
 
  
   
 
 
 Contactează-ne! 
 
 
 
      
 
 
 
© 2014
 
  
  
 

Aici am adăugat o secțiune antet cu un logo, apoi o secțiune principală împărțită în secțiunea de conținut, trei servicii și o cerere de acțiune. În sfârșit, există o secțiune de subsol cu ​​trei coloane și o secțiune privind drepturile de autor. Marcaj direct până acum, să ajungem la bara de sus!

Pasul 2: marcajul Top Bar

Îi vom împacheta pe barul nostru Top într-o secțiune cu clasa Navigare secțiune, pentru scopuri de styling. De asemenea, vom oferi această secțiune o altă clasă: arată-pentru-mare-up. Acest lucru vă asigură că bara de sus este afișată numai pentru dispozitive cu o anumită lățime minimă și mai mare. Acesta este unul dintre multe Clase de vizibilitate Fundația ne furnizează (puteți citi mai multe despre acestea în documentația componentei Fundației). Acum pentru marcaj:

Notă: Includeți bara de date din cadrul navigației dvs. În acest fel, ne asigurăm că JavaScript pentru Top Bar funcționează corect (cum ar fi dropdown-ul, de exemplu).

Pasul 3: Marcajul Off-Canvas

Meniul nostru din afara panzei va fi ascuns dincolo de limitele portului de vizualizare. În momentul în care apăsăm meniul, Offcanvas va aluneca (din stânga în cazul nostru) și va muta conținutul paginii spre dreapta. În configurația noastră vom merge excludeantetul și subsolul în această mișcare. Numai zona de conținut va fi mutată deoparte, lăsând antetul și subsolul în poziție. 

În plus, atunci când derulam în jos, antetul nostru (care poate conține un logo și poate un alt conținut), va apărea fix în partea de sus a paginii (Notă: Pagina ar trebui să conțină suficiente conținuturi pentru ca aceasta să funcționeze, deoarece în caz contrar, secțiunea subsolului va pluti deasupra meniului Offcanvas). Aceasta înseamnă că trebuie să "înfășurăm" off-panza în jurul secțiunii principale de conținut. După navigarea din partea de sus a bareiși înainte de secțiunea noastră principală de conținut, puneți următoarele coduri HTML:

Să-l rupem. Am creat două elemente div; unul cu clasa off-panza-folie și unul cu clasa interior-wrap.  Învelișul în afara panzei ascunde conținutul nostru până când apăsați butonul de meniu.folie interioară conține bara de meniuri nav, meniul stânga în afara panzei și secțiunea de conținut principal. Am oferit navei o clasă de ascunde-pentru-mare-up, pentru a vă asigura că acesta se afișează numai pentru dispozitivele cu setări medii și mici. Lăsând la o parte o clasă de stânga-off-panza-meniu, ne asigurăm că meniul nostru de off-panza apare în partea stângă a ecranului. Elementele de meniu din meniul nostru din afara panzei sunt similare cu bara de sus. Pentru off-panza folosim o listă neordonată cu o clasă de off-panza-list pentru a face magia să se întâmple.

Tot ce trebuie să faceți este să dați utilizatorului o modalitate de a închide meniul Offcanvas. După aceea închidem off-panza-folie si interior-wrap divs. Adăugați acest drept după închiderea secțiunii principale.