Share
Una tendenza molto comune in questi giorni è l'uso di una navigazione fissa, che si restringe per diventare meno invadente mentre l'utente scorre la pagina verso il basso. In questo tutorial, ti mostrerò come puoi ottenere questo risultato usando la Top Bar di ZURBs Foundation, alcuni custom sass e jQuery. Per finire, aggiungeremo un paio di domande sui media per rendere il nostro menu reattivo. Iniziamo!
Avrai bisogno di un paio di cose per avere una buona presa su questo tutorial:
In primo luogo, creeremo il nostro ambiente di lavoro. Se non sai come fare questo usando Compass e Sass, quindi controlla la sezione "Per iniziare" di Costruire una barra superiore Navigazione off-Canvas con Foundation 5.
Crea il tuo nuovo progetto Foundation e usalo orologio da bussola per compilare il tuo progetto. Creeremo il nostro style.scss nella cartella scss per le nostre personalizzazioni e alcuni stili generali. Con questa configurazione, ci tufferemo nella struttura generale HTML, andiamo!
Avendo iniziato un nuovo progetto della Fondazione, vai al index.html file e inizia rimuovendo tutto il contenuto tra i tag body, ad eccezione degli script subito prima del tag body di chiusura. Quindi aggiungi la seguente riga al tuo , per importare i nostri style.css.
Successivamente, aggiungeremo alcuni markup, come l'intestazione, una sezione principale e il piè di pagina, e aggiungeremo anche alcuni contenuti fittizi per dare alla nostra pagina un po 'di riempimento.
Fancy Foundation Top Bar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciat commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinzione laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquido quibusdam aspernatur quis maiores meno quas culpa reprehenderit id iure optio asperiores? Eccezionale, deleniti, a, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autismo, animi e odio commodi vitae nihil possimus neque minimi obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam errore perspiciatis quas provident optio similare iure.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciat commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinzione laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquido quibusdam aspernatur quis maiores meno quas culpa reprehenderit id iure optio asperiores? Eccezionale, deleniti, a, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autismo, animi e odio commodi vitae nihil possimus neque minimi obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam errore perspiciatis quas provident optio similare iure.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciat commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinzione laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquido quibusdam aspernatur quis maiores meno quas culpa reprehenderit id iure optio asperiores? Eccezionale, deleniti, a, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autismo, animi e odio commodi vitae nihil possimus neque minimi obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam errore perspiciatis quas provident optio similare iure.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciat commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinzione laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquido quibusdam aspernatur quis maiores meno quas culpa reprehenderit id iure optio asperiores? Eccezionale, deleniti, a, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autismo, animi e odio commodi vitae nihil possimus neque minimi obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam errore perspiciatis quas provident optio similare iure.
© Copyright 2014
Qui abbiamo creato una sezione di intestazione, tra cui il , una sezione di contenuto e una sezione di piè di pagina. Ci sono un paio di cose da notare:
Accentsconagua
.importante di classe, che useremo per dire a jQuery quale elemento puntare quando andremo a scorrere verso il basso..header-fill. Lo useremo per mettere un po 'di spazio tra la parte superiore del browser e la sezione dei contenuti, dato che la nostra intestazione sarà corretta e avrà uno z-index più alto quindi il resto degli elementi nella pagina.In seguito, scriveremo l'HTML per la nostra barra superiore. Abbiamo bisogno di un'area del titolo per il nostro logo e una sezione con un
Abbiamo aggiunto un title-zona dove teniamo il nostro logo. Successivamente, abbiamo il nostro con una classe di top-bar-sezione e un .destra, contenente tutti gli elementi della lista. La nostra immagine ha un ID di logo-immagine di cui avremo bisogno anche nel nostro jQuery più avanti in questo tutorial.
Se apriamo il browser e andiamo al nostro file di indice, scopriremo che il nostro stile di base per la Fondazione fa molto lavoro per noi, per rendere le cose belle. Il nostro logo non si adatta comunque. Nel prossimo passaggio lo risolveremo e daremo alla nostra intestazione la navigazione di uno stile adeguato.
Per ottenere i risultati che desideriamo, avremo bisogno di uno stile di base per le nostre sezioni, in particolare l'intestazione e la sezione Barra in alto. Faremo uso di Sass per farlo accadere.
Per iniziare, daremo a tutte le nostre sezioni uno stile di base. Dai un'occhiata al Sass qui sotto:
$ primary-color: # ef4523; / * SEZIONE HEADER ============================================== ============================ * / .header-section -webkit-box-shadow: 0 0 5px 0 rgba (0, 0,0,0.4); box-shadow: 0 0 5px 0 rgba (0,0,0,0.4); posizione: fissa; z-index: 999; larghezza minima: 100%; .contain-to-grid background-color: rgba (255, 255, 255, 0.97); // FILL USED FOR HEADER .header-fill background: #fff; altezza: 135 px; .tablet-mobile-logo img padding-top: 30px; // USATO PER JQUERY ACTION. Padding-on-my-header padding: 17px 0.9375rem 62px 0.9375rem; ul.title-area img margin: -5px 0 0 0; .full-width min-width: 100%; p line-height: 3rem; imbottitura-fondo: 30px; / * CONTENT SECTION ============================================= ============================= * / .content-section .main-content margin-top: 35px; / * SEZIONE PIÙ FOOTER ============================================ ============================== * / .footer-section background: # 333; altezza minima: 100 px; p color: #fff; margin-top: 50px;
Qui stiamo usando una variabile a colori primari, che useremo per alcuni stili di Top Bar. La nostra sezione di intestazione ha una bella ombra sottile, quindi sembra che fluttui sopra il resto del contenuto. Impostando la sua posizione su fisso e facendo lo z-index: 999, ci assicuriamo che la navigazione rimanga nella parte superiore del browser quando scorri verso il basso e rimanga sopra tutti gli altri elementi della pagina.
Nostro .contengono-rete la classe ha un colore bianco trasparente sottile, in modo che quando si scorre, appare come se l'intestazione galleggia sopra tutti gli altri elementi. Dobbiamo comunque sistemare quel menu, quindi pensiamo a quello dopo.
Ora aggiungeremo lo stile per dare al nostro Top Bar un aspetto elegante e lineare. Puoi anche regolare alcune delle impostazioni della barra in alto in _settings.scss, ma ti mostrerò come farlo usando le nostre sovrascritture personalizzate. Il Sass sotto spiega cosa sta succedendo dove:
/ * NAVIGAZIONE TOPBAR ============================================== ============================ * / .top-bar background: none; imbottitura: 45px 0.9375rem 90px 0.9375rem; transizione: tutti gli 0,5 semplificano 0,1 s; // LOGO ADJUSTMENT ul.title-area img margin: -10px 0 0 0; .top-bar-section ul background: none; // MENU STILI DI ARTICOLO li a: not (.button), li.active a: not (.button) background: none; altezza della linea: 30px; font-size: 12px; padding: 0; margine: 5px 0 0 0; text-transform: maiuscolo; // MENU ITEM HOVERS li a: not (.button): hover background: none; border-bottom: 2px solid $ primary-color; colore: # 222; // MENU ITEM ACTIVE li.active a: not (.button) border-bottom: 2px solid $ primary-color; colore: # 222; &: hover background: none; li margin-left: 30px; a color: # 888; // DROPDOWN MENU .top-bar-section ul li: hover: not (.has-form)> a color: # 333; .top-bar-section li ul.dropdown background: #fff; border: 1px solid #ddd; colore: # 888; li border-bottom: 1px solid #ddd; margine: 0; imbottitura: 5px 15px 5px 15px; .top-bar-section li ul.dropdown li a: not (.button): hover, .top-bar-section li ul.dropdown li a: not (.button) background: none; colore: # 222; border-bottom: nessuno; imbottitura: 20px -4px 40px 45px; .top-sezione-barre ul.dropdown li: hover: not (.has-form)> a: not (.button) background: none; colore: # 222; // DROPDOWN FRECCIA .has-dropdown> a: after border-color: rgba (0, 0, 0, 0.5) trasparente trasparente; margin-top: -5px;
Nota: Stiamo andando a spostare il .padding-on-my-header classe sotto le regole della barra superiore. Questo è necessario affinché il padding sovrascriva quello della barra superiore.
Abbiamo aggiunto un po 'di padding alla nostra barra superiore e abbiamo impostato una transizione di 0,5 secondi, con una facilità di 0,1 secondi. Ciò fornirà un effetto di transizione senza intoppi quando il jQuery entra in gioco. Lo sfondo è impostato su none, in modo che il nostro header abbia il colore leggermente trasparente che abbiamo dato al nostro .contengono-rete classe. Il resto è uno stile di base per le voci di menu della Top Bar, menu a discesa, hover e stati attivi. Niente di troppo esagerato, ma ci ha dato un risultato pulito aggiungendo imbottitura e spazio bianco.
Diamo un'occhiata a ciò che abbiamo finora. Sicuramente sta iniziando a sembrare qualcosa! Tuttavia, il nostro menu è ancora un po 'grande per quando scorrere la pagina verso il basso. Ecco dove è il nostro .padding-on-my-header passi di classe in.
Usiamo un po 'di magia jQuery per aggiungere il .padding-on-my-header classe su scroll e cambia il logo in uno più piccolo.
Stiamo andando a creare un file init.js per ospitare il nostro codice jQuery. Inseriscilo nella tua cartella / js e includi la seguente riga nella parte inferiore del tuo file di indice, subito prima del tag body di chiusura, per includere lo script: