In un precedente tutorial, abbiamo imparato come personalizzare la barra in alto della Foundation 4 usando i CSS. Da allora ZURB ha rilasciato Foundation 5; più veloce, più snella e più potente del suo predecessore. Ciò che è anche evidente è che ZURB ha riportato la funzionalità Off Canvas, che può essere trovata in Foundation 3.

Oggi combineremo la funzione di stampa su tela con la nostra barra di navigazione superiore. Il risultato sarà una buona navigazione personalizzata per gli utenti desktop e un elegante menu off -canvas per tablet e utenti mobili.

Nota: La funzionalità che usiamo qui non funziona per IE8 e inferiori. Ho incluso una correzione per IE9 nelle risorse elencate alla fine del tutorial.

Requisiti

Per seguire questo tutorial avrai bisogno di un'esperienza intermedia nel modo seguente:

• Comprensione di base di Foundation e The Grid System
• Conoscenza del lavoro con un progetto Sass e Compass Foundation

Iniziare

Impostazione dell'ambiente

Se non lo hai già fatto, vai avanti e configura Compass e Sass usando la documentazione di Foundation Sass se hai bisogno di indicazioni. Se lo hai già fatto, ecco la configurazione rapida per la creazione di un nuovo progetto Foundation 5 utilizzando il prompt dei comandi:

Prompt dei comandi Ruby

Vai alla tua directory preferita

cd c: / user / your-working-environment

Usa questo comando per creare il tuo progetto

fondazione nuovo tuo-progetto

Vai al tuo file di progetto appena creato

cd tuo-progetto

E usa questo comando per fare in modo che la bussola guardi e compili i tuoi file Sass

orologio da bussola

Se tutto è andato a buon fine, la tua directory dovrebbe apparire in questo modo:

Directory di progetto della Fondazione 5

Rimane solo una cosa e cioè creare il nostro style.scss. Fatelo creando un nuovo file nella cartella scss e nominando il file style.scss. Avremo bisogno di questo file più tardi. Se hai Compass in esecuzione, il tuo style.scss dovrebbe già essere compilato su astyle.cssfile nella cartella dei fogli di stile. Bene, abbiamo tutto configurato, iniziamo con la codifica della nostra struttura HTML generale.

Impostazione della struttura HTML

Passaggio 1: Markup generale

Apri il tuo index.html e rimuovi tutto il contenuto tra i tag del corpo, ad eccezione degli script appena prima del . Abbiamo bisogno che tutte le funzioni della Fondazione funzionino. In secondo luogo, andare avanti e aggiungere la seguente riga di codice nel file , per essere sicuri di caricare nel nostro file CSS.

Con questa configurazione, aggiungiamo un paio di sezioni e forniamo alla nostra pagina alcuni contenuti fittizi. Inizieremo con alcune nozioni di base, aggiungendo un'intestazione, un main, un servizio, una call to action, un footer e una sezione sul copyright.

  
 
 
 
Menu di base 5 Topbar / Offcanvas
 
  
  
     
  
 
 
 
Spostamento per il popolo Offcanvas!
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, meno 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.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minimi, quidem repellendus agevolis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquido id eus magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinti modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure simile numquam autem asperiores errore cumque eum. Dolore, minimi aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquido!
 
  
  
   
 
 
 
Servizio # 1
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!
 
 
 
Servizio # 3
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequenza voluptatem impedit rem omnis aliquam?
 
 
 
Servizio # 3
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore e iusto quibusdam autem repellendus ipsum dolorem quasi maxime!
 
 
  
   
 
 
 Mettetevi in ​​contatto con noi! 
 
 
 
      
 
 
 
© 2014
 
  
  
 

Qui abbiamo aggiunto una sezione di intestazione con un logo, quindi una sezione principale divisa nella sezione del contenuto, tre servizi e un invito all'azione. Infine c'è una sezione del footer con tre colonne e una sezione sul copyright. Marcatura straight-forward finora, passiamo alla barra in alto!

Passaggio 2: Top bar markup

Stiamo andando a fasciare la nostra barra superiore all'interno di una sezione con la classe navigazione sezione, per scopi di stile. Daremo anche a questa sezione un'altra classe: show-per-large-up. Ciò garantisce che la barra superiore venga visualizzata solo per i dispositivi con una larghezza minima e superiore. Questo è uno dei tanti Classi di visibilità che Foundation ci fornisce (puoi leggere di più su questi nella documentazione del componente Foundation). Ora per il markup:

Nota: Includi la barra dei dati nella tua nav. In questo modo ci assicuriamo che JavaScript per la nostra barra superiore funzioni correttamente (ad esempio il menu a discesa, ad esempio).

Passaggio 3: markup fuori area

Il nostro menu fuori dalla tela sarà nascosto oltre i confini della finestra. Nel momento in cui premiamo menu, Offcanvas scorrerà (dalla sinistra nel nostro caso) e sposterà il contenuto della pagina verso destra. Nel nostro setup andremo a escluderel'intestazione e il piè di pagina in questo movimento. Solo l'area del contenuto verrà spostata a parte, lasciando l'intestazione e il piè di pagina in posizione. 

Inoltre, quando scorri verso il basso, la nostra intestazione (che può contenere un logo e forse altri contenuti), apparirà fissa in cima alla pagina (Nota: La pagina dovrebbe contenere abbastanza contenuti per far funzionare tutto, perché altrimenti la sezione del footer potrebbe anche fluttuare sopra il nostro menu di Offcanvas). Ciò significa che dobbiamo "avvolgere" la parte off-canvas attorno alla nostra sezione di contenuto principale. Dopo la navigazione nella barra superioresezione e prima della nostra sezione del contenuto principale, inserisci il seguente codice HTML:

Scopriamolo. Abbiamo creato due elementi div; uno con la classe off-canvas-wrap e uno con la classe interno-wrap.  L'off-canvas-wrap nasconde il nostro contenuto fino a quando non viene premuto il pulsante del menu. Ill'involucro interno contiene la barra dei menu di navigazione, il menu laterale sinistro e la sezione del contenuto principale. Abbiamo dato al nav una classe di nascondere-per-large-up, per assicurarsi che mostri solo per dispositivi di set medio e piccolo. Dando a parte una classe di sinistra-off-tele-menù, ci assicuriamo che il nostro menu fuori quadro appaia sulla sinistra dello schermo. Le voci di menu nel nostro menu non in linea sono simili alla barra superiore. Per l'off-canvas utilizziamo una lista non ordinata con una classe di off-canvas-list per far succedere la magia.

Tutto quello che resta da fare è dare all'utente un modo per chiudere il menu di Offcanvas. Dopo ciò chiudiamo il off-canvas-wrap e il interno-wrap div. Aggiungilo subito dopo aver chiuso la sezione principale.