Share
Uno degli aspetti più importanti di un framework front-end è il modo in cui gestisce la navigazione. In questa parte di Foundation for Beginners, daremo un'occhiata a diverse forme di navigazione, insieme ad alcuni strumenti JavaScript che aggiungono ulteriore prosperità. Ti presenterò anche un altro utile strumento che ti aiuterà a diventare uno sviluppatore della Fondazione migliore.
Una delle migliori offerte JavaScript della Fondazione si presenta sotto forma di Sezione; un plugin per costruire diverse forme di navigazione, come fisarmoniche, schede, navigazione verticale e orizzontale.
Ecco alcuni esempi di markup:
Sezione 1
Contenuto della sezione 1.
Sezione 2
Contenuto della sezione 2.
Questo può sembrare un po 'più complesso di quello che abbiamo precedentemente trattato, quindi lascia che lo decidi per te.
Ogni sezione che crei, indipendentemente dal fatto che si tratti di una fisarmonica, o di schede, o persino di una barra di navigazione, inizia con una div che usa il sezione contenitore classe seguita dal auto classe. In quello stesso div aggiungere un vuoto dati sezione attributo. Questo attributo determina il tipo di sezione con cui abbiamo a che fare, per impostazione predefinita la Fondazione presuppone che vogliamo una fisarmonica. Per utilizzare un particolare tipo di sezione, è sufficiente modificare il auto classe a schede, fisarmonica, verticale-nav o orizzontale-nav. Infine, aggiungi quella stessa classe del dati sezione valore dell'attributo. Questo assicurerà che tu stia visualizzando il tipo corretto di sezione per le tue esigenze.
Una volta che il wrapper è stato configurato, possiamo aggiungere del contenuto. Per ogni sezione del tuo wrapper avrai bisogno di un titolo e di collegare quel titolo al contenuto:
Sezione 1
Contenuto della sezione 1.
Possiamo vedere qui che ogni sezione è racchiusa in a tag (che semplifica le cose, sebbene tu possa usare un div). All'interno di ciascuna di queste sezioni abbiamo un tag con una classe di titolo che racchiude il collegamento alla sezione corrispondente. Sotto il tag del paragrafo c'è il div che contiene il contenuto per la sezione; questo ha una classe di soddisfare. La duplicazione del codice sopra creerà ciascuna delle sezioni all'interno del wrapper della sezione.
Nota: Aggiungere il verticale-nav la classe mostrerà una navigazione verticale su schermi di grandi dimensioni, ma passerà a una fisarmonica quando su schermi piccoli. Aggiunta orizzontale-nav evocherà lo stesso comportamento.
Diciamo che vuoi collegare alla seconda sezione del tuo wrapper di sezione, ma quando apri la pagina mostra la prima sezione per impostazione predefinita. Non aver paura! La Fondazione ha una soluzione integrata sotto forma di Deep Linking. Per farlo funzionare abbiamo bisogno di aggiungere un nuovo attributo al nostro wrapper: data-options =”deep_linking: true”. Questo dice a Foundation che quando un utente visita un url con un identificatore di frammento come questo "http://www.website.com/#section3", dovrebbe caricare la pagina con quella sezione che mostra.
Sezione 1
Contenuto della sezione 1.
Sezione 2
Contenuto della sezione 2.
Come puoi vedere, abbiamo aggiunto l'opzione di deep linking data e aggiunto anche il Dati-lumaca attributo al div del contenuto Questo slug di dati indica a Foundation quale sezione visualizzare sul caricamento della pagina.
Foundation's Nav Nav (un modo semplice per visualizzare i menu verticali) va di pari passo con le sezioni. La struttura HTML è molto semplice e consente divisori laddove necessario. Diamo un'occhiata al markup.
Questa è una lista standard non ordinata, che comprende elementi di lista contenenti collegamenti a ... beh, qualunque cosa tu voglia. Aggiungere il side-nav classe al attivo la classe può essere utilizzata per mostrare quale collegamento è attualmente in uso. Se è necessario dividere gli elementi dell'elenco, aggiungere un elemento dell'elenco vuoto con una classe di divisore. Facile.
Il Sub Nav di Foundation tende ad essere usato per cose come il filtraggio del contenuto. Il markup è semplice come Side Nav, ma differisce dal fatto che utilizza una lista di descrizioni invece di una lista non ordinata. Questo ti dà la possibilità di usare a termine insieme al tuo descrizione tag che contengono i tuoi link. Non ci sono divisori nella Sub Nav ma puoi ancora utilizzare il attivo classe. Ecco il markup:
L'impaginazione è anche una forma di navigazione; in effetti, l'impaginazione dovrebbe essere contenuta all'interno di a elemento. Diamo un'occhiata al markup di alcuni link di paginazione in Foundation:
Eliminare gli elementi della lista dovrebbe essere una freccia, che richiede la classe freccia. Potresti voler usare entrambi « o ‹ o forse anche ←. Dai un'occhiata a unicode-table.com per altri esempi che potresti usare.
Il tipo di navigazione Paginazione ci consente di indicare le classi non disponibile e attuale, con quest'ultimo è molto simile alla classe attiva che abbiamo passato in precedenza. Potresti anche voler aggiungere una freccia al tuo ultimo elemento della lista, stavolta usando entrambi » o ›, o forse anche →.
Poiché si tratta di un semplice markup, aggiungerlo ad un sistema di gestione dei contenuti come Wordpress è abbastanza facile.
Bonus: Puoi centrare l'impaginazione avvolgendo il tag ul in un nav con il impaginazione centrato classe. Come con tutti gli elementi di Foundation, l'impaginazione è reattiva e facile da modellare.
L'utilizzo di un framework reattivo come Foundation è un modo rapido per ottenere un ottimo aspetto del tuo progetto su tutti i dispositivi, ma il testing è ancora un lavoro ingrato. Per alleviare questo dolore, ho creato uno strumento chiamato Respondr, che ti consente di aggiungere un url a uno smartphone, tablet e desktop dandoti la possibilità di catturare qualsiasi problema in modo rapido e semplice.
Finora abbiamo coperto il sistema di griglia, le griglie di blocchi, il plugin del cursore Orbit, il plugin di sezione e tre tipi di navigazione. La prossima volta ci concentreremo sul plug-in Top Bar, sui breadcrumb e su un altro utile strumento.
Accentsconagua