Share
Zurb's Foundation 4 presenta un brillante top bar che è diventato quasi il simbolo di una costruzione del sito della Fondazione. Oggi esamineremo come implementarlo in un modo diverso, posizionandolo altrove nella pagina, offrendoti un menu di navigazione orizzontale personalizzato e reattivo.
Per prima cosa, avremo bisogno dell'ultima Fondazione. Scompatta e posiziona tutti i file nella cartella di lavoro o di prova. Useremo solo index.html, creando il nostro style.css in cui sostituiremo le diverse classi della barra in alto per rendere la nostra navigazione personalizzata.
Inoltre, scarica l'immagine di sfondo sopra fornita. Lo useremo per il menu, quindi posizionalo nella cartella "img". Hai tutto? Quindi accendi il tuo editor preferito e andiamo avanti!
Il file indice nel download viene fornito con un codice HTML preimpostato. Puoi lasciare tutto come lo trovi nel tag di intestazione, e puoi lasciare i link di script (prima del tag body di chiusura) dove si trovano. Abbiamo bisogno di tutto questo per assicurarci che la Grid e la barra in alto funzionino davvero.
Puoi cancellare il resto del contenuto fittizio. Stiamo andando per un disegno a tutta larghezza qui, niente di troppo complicato, solo qualcosa per avere una migliore idea di ciò con cui stiamo lavorando.
Bene, impostiamo l'area di intestazione, navigazione, contenuto e piè di pagina e inseriamo alcuni contenuti fittizi per il riempimento. Daremo ad ogni area una classe di "full-width", quindi in ogni area inseriremo un div con a, un div con un e. Questo imposta una struttura di base della griglia.
Nota: Per ulteriori informazioni su come funziona la griglia, dai un'occhiata a Foundation for Beginners: The Grid System
Base-4 Barra superiore personalizzata
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo sono quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis une aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae a! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minimi, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus ecceturi rem quaerat impedit animi voluptate a facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!
© 2013
Prima di passare allo styling, definiremo la struttura HTML essenziale per il corretto funzionamento del Foundation Top Bar. Abbiamo bisogno di cinque elementi di base per far funzionare il motore:
Accentsconagua
nav conul conli con = per espandere il menu nel layout mobile sezione conul con e ul con Ora, impostiamo queste basi e implementiamo i cinque elementi.
Nota: In questo esempio di tutorial vorremmo creare un menu di navigazione personalizzato, rimuovendo così il titolo (che di solito contiene il logo, in forma di testo o immagine). Per fare questo semplicemente lasciamo il li con in ul con il vuoto.
Inoltre, aggiungiamo alcuni elementi del menu e un menu a discesa mentre ci siamo. Per includere un menu a discesa aggiungi la classe "has-dropdown" all'elemento li che vuoi contenere il menu a discesa, quindi inserisci un nuovo ul con una classe di "menu a discesa". Per indicare la pagina attualmente attiva possiamo dare alla nostra voce di menu corrente una classe di "attivo" sull'elemento li. Possiamo lasciare l'ul vuoto. Normalmente useresti quest'area per aggiungere un pulsante o un modulo di input di ricerca. Per ulteriori informazioni sulle specifiche del markup della barra in alto, dai un'occhiata a Foundation for Beginners: The Top Bar.
Guarda il seguente codice HTML, i commenti spiegano come si accumula.
Guarda i risultati nel tuo browser. Ora impostiamo un framework base di base usando la barra superiore per creare un menu orizzontale. Per metterlo da qualche altra parte che nella parte superiore del browser è semplicemente mettere il nav in una riga e div colonne.
Quando ridimensioni il browser, puoi vedere che il menu cambia al punto di interruzione predefinito.
Il prossimo passo è dargli un po 'di stile personalizzato. Ci concentreremo su come possiamo modellare la barra in alto e quali classi sono utilizzate per quello.
Se non lo hai già fatto, crea un nuovo file CSS, chiamalo style.css e mettilo nella cartella css del tuo download di Foundation. Non dimenticare di inserirlo nel tag di intestazione nel tuo file di indice, facendo riferimento ad esso sotto il file foundation.css in questo modo:
Fondazione 4
Se non lo si posiziona sotto foundation.css, non sovrascriverà le classi della barra superiore.
Bene, per prima cosa prendiamo alcuni stili di base nell'area dell'intestazione, della navigazione, del contenuto e del piè di pagina. Per l'area di navigazione, utilizzeremo un'immagine di sfondo, che avrai precedentemente scaricato. Il design generale non è un grosso problema, date un'occhiata al CSS qui sotto. Aggiungiamo una classe a larghezza intera a ciascuna area per assicurarci che riempia l'intera larghezza del browser.
body background-color: #ccc; / ** Imposta gli sfondi per le diverse sezioni ** / .header-area background-color: # 2d465c; altezza minima: 160 px; .navigation-area background-image: url ('... /img/navigation-container.jpg'); background-repeat: repeat-x; .content-area padding: 50px 0 70px 0; .footer-area background-color: # 1f1f1f; colore: #fff; altezza minima: 50 px; padding: 20px 0 0 0; .full-width min-width: 100%; posizione: relativa; h2 color: #fff; font-weight: normal; margin-top: 50px; Se guardi i risultati ora, il menu sembra ancora un po 'fuori luogo. Questo perché utilizza ancora il CSS predefinito. Risolviamolo!
Ci sono un paio di classi CSS che dobbiamo indirizzare per ottenere i risultati desiderati. Innanzitutto, rimuoveremo parte dello sfondo nero della classe .top-bar e gli elenchi delle sezioni e cambieremo l'altezza e l'altezza della linea in 58px (altezza dell'area di navigazione). Controlla i commenti per ulteriori spiegazioni.
/ ** Cambia colore di sfondo, altezza e margine del bordo ** / .top-bar background: none; altezza: 58 px; altezza della linea: 58 px; margin-bottom: 0; / ** Rimuove lo sfondo nero sulla barra dei menu ** / .top-bar-section ul background: none; text-transform: maiuscolo; / ** Rimuove lo sfondo nero sulla voce di menu ** / .top-bar-section li a: not (.button) background: none; altezza della linea: 58 px; imbottitura: 0 27px;
Abbiamo rimosso lo sfondo nero predefinito dal menu di navigazione, dagli elenchi di sezioni e dai menu di ancoraggio. Regoliamo l'altezza, l'altezza della linea e il riempimento e trasformiamo il testo in maiuscolo per adattarlo perfettamente al nostro design personalizzato.
Se aggiorni il tuo browser vedrai che sta iniziando a prendere forma. Continuiamo con i menu a discesa, le voci di menu, gli stati attivi e al passaggio del mouse. Dai uno sguardo al CSS qui sotto e di nuovo, leggi il testo commentato per la spiegazione:
/ ** Cambia la voce di menu attiva dal nero predefinito a un gradiente ** /. -Top-bar-section ul li.active> a background: rgb (0, 0, 0); background: linear-gradient (to bottom, rgba (0, 0, 0, 0,4) 0%, rgba (0, 0, 0, 0,7) 100%) ripeti scorrimento 0 0 trasparente; colore: #fff; / ** Modifica lo stato al passaggio del mouse delle voci di menu non attive ** / .top-bar-section li: passa un background: linear-gradient (to bottom, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0,7) 100%) ripeti lo scorrimento 0 0 trasparente; colore: #fff; / ** Cambia il colore del testo del menu non attivo in nero ** / .top-bar-section ul li> a color: # 2d2d2d; / ** Modifica lo stato al passaggio del mouse sugli elementi del menu a discesa ** / .top-sezione-barre ul.dropdown li a: hover: not (.button) background: nessuno ripete scorrimento 0 0 rgba (0, 0, 0, 0.9); / ** Riempimento IMPORTANTE per il contenitore a discesa ul ** / .top-bar-section ul.dropdown background: # 333; colore: #fff; / ** Questo corregge la posizione e il colore della freccia a discesa ** /. -Top-sezione-barra .has-dropdown> a: after border-color: rgba (0, 0, 0, 1) trasparente trasparente; margin-top: 2.5px;
Abbiamo apportato diverse modifiche al nostro menu qui. Prima di tutto, abbiamo modificato lo sfondo nero predefinito della voce di menu attiva in una sfumatura CSS. Quindi abbiamo dato alle voci di menu non attive uno stato di hover di resing. Per rendere più chiaramente visibili le voci di menu non attive, cambiamo il colore del testo in grigio scuro. Le modifiche apportate .top-bar-section li: hover a manterrà lo stato del menu a tendina al passaggio del mouse quando il mouse si sposta sugli elementi a discesa. Per completare il CSS abbiamo dato al contenitore a discesa ul un riempimento di sfondo e riposizionato la posizione predefinita della freccia a discesa, a causa delle nostre regolazioni di riempimento alla sezione superiore della barra.
Aggiorna il tuo browser e dai un'occhiata ai risultati fino ad ora. Non abbiamo ancora finito; dobbiamo ancora assicurarci che tutto funzioni bene quando ridimensioniamo le dimensioni dello schermo del nostro browser (o, per altro, quando lo guardiamo su un dispositivo più piccolo). Per farlo, aggiungeremo alcune Media Query al nostro file CSS.
Ci sono un paio di cose che dobbiamo aggiustare per far funzionare il menu con il nostro design personalizzato quando si riduce la dimensione dello schermo. Ciò comporta principalmente l'aggiunta di padding, altezza della linea, colori del testo e colori di sfondo. Dai uno sguardo al CSS qui sotto e guarda i commenti per ottenere una spiegazione per ogni sezione.
@media solo schermo e (larghezza massima: 942 px) / * Rende il menu reattivo inseribile nel contenitore di navigazione e cambia il suo sfondo in nero * / .top-bar ul background-color: rgba (0, 0, 0, 0.5); imbottitura-fondo: 13px; / * Cambia il colore dell'elemento di menu non attivo su nero * / .top-bar-section ul li> a color: #fff; / * Fornisce il dropdown ul a black fill * / .top-bar-section ul background: # 000; / * Dare il pulsante BACK dopo aver inserito in un sottomenu il riempimento appropriato * / .top-bar-section .dropdown li.title h5 a line-height: 57px; / * Questo corregge la posizione e il colore della freccia a discesa * /. -Top-sezione-barra .has-dropdown> a: after border-color: rgba (255, 255, 255, 1) trasparente trasparente; margin-top: 2.5px; / * end media query * /
Salva il file, aggiorna il browser e gioca con le dimensioni del browser. Come puoi vedere il menu si adatta perfettamente al nostro design.
Quindi, questo avvolge il nostro tutorial su come possiamo creare un menu reattivo personalizzato usando la barra superiore del framework Foundation 4. E ricorda, il menu non deve essere nella parte superiore della pagina. Basta avvolgerlo nella sua stessa riga e div colonne, quindi puoi praticamente metterlo ovunque tu voglia!
La Fondazione è un ottimo strumento per sviluppare rapidamente modelli reattivi e, quando conosci la tua strada, puoi praticamente modellarla come preferisci. Divertiti!
