Share
Diamo un'occhiata alla barra superiore inclusa nel framework Foundation. Dato che c'è parecchio da coprire, scomporremo in pezzi facili.
La barra in alto della Foundation è un piccolo componente molto utile, ma non è obbligatorio utilizzarlo nelle tue build. Stimo che ne ho fatto uso in circa il 40% dei progetti che ho costruito con Foundation. Presta particolare attenzione al fatto che soddisfi o meno le esigenze del tuo progetto; il componente barra superiore è facile da usare come qualsiasi altro, ma l'interazione è praticamente impostata.
Per iniziare a costruire la barra in alto abbiamo bisogno di a tag, con la classe richiesta di "top-bar".
Dentro ciò si trova a 's, uno dei quali terrà il nostro titolo / logo l'altro il nostro menu "mobile".
Nota: puoi rimuovere la classe "menu-icon", o il contenuto "Menu", se preferisci avere solo una delle due che mostrano.
L'aggiunta di link parent è il nostro prossimo obiettivo, quindi prima di aggiungere il tag nav in a con la classe "top-bar-section". In questa sezione dobbiamo aggiungere una lista non ordinata con diverse voci di elenco.
Foundation ha un utile "divisore" di classe che può essere applicato agli elementi della lista vuota, consentendo di separare ciascun link di menu con una linea attraente. Vengono utilizzati nell'esempio seguente per dividere i collegamenti dei menu.
Noterai anche che ul ha la classe "sinistra" ad essa applicata, che manda le cose a sinistra. Ad esempio, potresti avere due gruppi di collegamenti di menu, uno a sinistra mobile e uno (usando la classe "destra") a destra.
- Voce principale 1
- Elemento principale 2
Tutti i link che abbiamo aggiunto fino ad ora verranno visualizzati orizzontalmente lungo la barra. Sugli schermi più piccoli diventeranno un menu a discesa, attivato dal pulsante Menu che abbiamo aggiunto in precedenza.
Ogni voce di elenco può contenere un elenco non ordinato nidificato per i sottomenu. Affinché questo funzioni e sia visualizzato correttamente, la classe "has-dropdown" deve essere applicata al collegamento padre, con la classe "dropdown" applicata alla lista non ordinata nidificata:
Nota: Per contrassegnare il link corrente della pagina attivo, aggiungi una classe "attiva".
I sottomenu vengono visualizzati come elenco a discesa standard in circostanze "schermo grande". Sugli schermi più piccoli fanno scorrere da "fuori dallo schermo".
Nonostante sia indicata come la barra 'superiore', puoi posizionare questo componente ovunque nel tuo layout. Se hai bisogno che la barra rimanga fissa sulla pagina mentre scorri, puoi avvolgere la barra superiore in un div con la classe "fissa". In alternativa, se si desidera mantenere la barra superiore all'interno del contenitore principale, è possibile impostare la larghezza della barra superiore sulla larghezza della griglia utilizzando la classe "contiene sulla griglia". Fortunatamente, è possibile utilizzare entrambe queste classi ("contain-to-grid" e "fixed") in combinazione.
Diciamo che vuoi la barra in alto al centro del layout, ma devi tenere la barra in cima alla pagina quando l'utente scorre verso il basso. Questo è possibile avvolgendo la barra in alto nelle classi "contain-to-grid" e "sticky".
Se tutte quelle funzionalità a portata di mano non fossero sufficienti, potresti anche voler aggiungere un input che potresti utilizzare per la ricerca, o un'iscrizione a una mailing list o qualsiasi altra cosa desideri. Quando si aggiungono elementi del form all'interno di una voce di un menu, è necessario aggiungere una classe di "has-form". Puoi vedere dal codice sottostante che stiamo effettivamente facendo uso della griglia entro la barra in alto. Ciò facilita il posizionamento degli elementi, e ovviamente reattivo, poiché le colonne spostano il layout su schermi piccoli.
I breadcrumb sono comuni su siti Web basati su CMS, come Wordpress, in cui la gerarchia di pagine multilivello può risultare un po 'complessa. Questi possono essere usati in qualsiasi progetto della Fondazione semplicemente aggiungendo la classe "breadcrumb" a a etichetta. Quando si utilizza l'elenco non ordinato, tutti i collegamenti devono essere presenti in voci di elenco, mentre i collegamenti all'interno dell'elemento nav devono essere tag di ancoraggio.
Le uniche classi aggiuntive incluse nel markup breadcrumb sono "non disponibile" e "corrente".
La barra superiore è molto flessibile ed è abbastanza semplice da incorporare in qualsiasi progetto basato sulla fondazione. Nella parte successiva di questa sessione parleremo di pulsanti, menu a discesa e plug-in di eliminazione.
Accentsconagua