10 frammenti di codice CSS e JavaScript per la creazione di navigazioni reattive

Una delle parti più complesse di un buon sito reattivo è la navigazione. Questo può richiedere del tempo per capirlo e ci sono molti tutorial per aiutarti. Ma sono anche un fan dell'utilizzo di frammenti di codice come quelli che abbiamo raccolto per questo articolo.

Tutti questi frammenti di navigazione reattivi possono essere modificati e clonati gratuitamente per i tuoi progetti. Presentano anche una varietà di stili, quindi qui ci sarà qualcosa che funzionerà per tutti i tipi di siti web.

1. Layout reattivo a pagina intera di Johnny Mango

Questo esempio reattivo mostra fino a che punto puoi spingerti nella fase di prototipazione di un sito web. Noterai che la navigazione ha una funzione interessante quando passi con il mouse e ti focalizzi automaticamente sui collegamenti. Questo effetto può essere modificato su un sito Web "live" con la stessa navigazione, ma in questo esempio è utile per mostrare l'interfaccia utente/UX della pagina.

Guarda la demo di navigazione reattiva con penna con Kube di Johnny Mango

2. Barra di navigazione a discesa di Tania Rascia

Se hai bisogno di elementi a discesa più lunghi nella tua navigazione, questo menu potrebbe funzionare meglio. È una valida alternativa alle navigazioni più semplici che presentano solo una manciata di voci di menu. In questo caso, troverai un semplice elenco di collegamenti con un menu a discesa molto piccolo. I collegamenti del sottomenu vengono visualizzati solo su un evento click gestito da jQuery. Puoi cambiarlo in solo CSS, ma perderai il trigger di clic.

Tuttavia, per un design così pulito, sono sorpreso di quanta versatilità offre questo snippet agli sviluppatori.

Vedi la barra di navigazione a discesa reattiva della penna di Tania Rascia

3. Layout a pagina singola di Jan Czizikow

I menu di navigazione a pagina singola hanno bisogno di amore proprio come gli altri. Questo è un perfetto esempio di navigazione a pagina singola in azione. I collegamenti scorrono verso il basso con un'animazione fluida ma non ti lasciano aspettare troppo a lungo.

Per non parlare del fatto che si ridimensionano automaticamente per adattarsi perfettamente indipendentemente dalle dimensioni del tuo browser. Consiglierei principalmente questo tipo di navigazione per una pagina di vendita o un semplice sito portfolio. È pulito e presenta alcune eccellenti funzionalità di animazione insieme alle tecniche reattive.

Guarda la penna Navigazione completamente reattiva con animazioni CSS e jQuery di Jan Czizikow

4. Menu a discesa rosso di Stephanie Walter

Lo sviluppatore Stephanie Walter ha creato alcuni progetti entusiasmanti per il web. Questo frammento è solo un esempio con una navigazione reattiva di colore rosso brillante.

I collegamenti hanno un po 'più di pizzazz con una funzione selezionata personalizzata e un piacevole effetto al passaggio del mouse per l'avvio. Quando ridimensionato, noterai che la navigazione utilizza invece un menu a discesa scorrevole. Vorrei quasi optare per un elenco di collegamenti a livello di blocco per dispositivi mobili, ma funziona molto meglio considerando il sottomenu.

Vedi la navigazione multilivello Pen Responsive di Stephanie Walter

5. Design CSS puro di Ahmad Hjazy

Ecco un design unico che utilizza puro CSS per la navigazione. È un menu verticale con collegamenti di navigazione che imitano la tavola periodica degli elementi.

Gli effetti al passaggio del mouse sono un po' ritardati ma indubbiamente interessanti. Per non parlare dello stile reattivo è sorprendentemente utilizzabile. Forse la parte più impressionante è come questo intero esempio utilizza esclusivamente CSS .

Vedi il menu di navigazione reattiva Pen CSS di Ahmad Hjazy

6. Intestazione appiccicosa reattiva di Marc Libunao

Ho menzionato il design a pagina singola in uno snippet precedente e questa intestazione reattiva segue una traiettoria simile. L'unica differenza è che questa navigazione ha un blocco leggermente più grande sulla pagina e gestisce il design della pagina reattiva in modo leggermente diverso.

Quando ridimensioni il browser, noterai che questo esempio utilizza l'icona dell'hamburger con un'animazione divertente. È bello considerando lo stile, ma potrebbero non essere tutti.

Vedi la navigazione dell'intestazione adesiva Pen Responsive di MarcLibunao

7. Reattivo e sensibile al tocco di Dragoeco

Tutti i buoni siti Web dovrebbero essere compatibili con il tocco per impostazione predefinita, e questo è ciò che rende questa navigazione ancora più attraente per i designer.

Ogni collegamento porta a una nuova pagina, ma puoi toccare per passare con il mouse sui menu a discesa con facilità su qualsiasi dispositivo touch. Questa funzione spesso manca nei menu di navigazione ed è uno dei motivi per cui i menu a discesa possono essere difficili da progettare.

Guarda la navigazione a discesa della penna: reattiva e touch-friendly di Dragoeco

8. Semplici collegamenti Nav di AnabolicHippo

Quando penso a semplici menu di navigazione, penso a un design come questo. Ogni collegamento appare come un proprio elemento di blocco, anche su schermi più piccoli. Non esiste un menu hamburger e nessuna funzione di menu animato nascosto. Al contrario, i collegamenti si ridimensionano e si suddividono in righe separate.

La parte più complicata è gestire l'effetto a discesa sui dispositivi mobili. Molti dei collegamenti hanno sottomenu e funzioneranno allo stesso modo su schermi più piccoli.

Direi che funziona meglio per i siti con pochi o nessun sottomenu, ma vale la pena provare sul cellulare per vedere cosa ne pensi dell'esperienza.

Vedi il menu di navigazione reattivo con la penna di AnabolicHippo

9. Menu a tendina per PlayStation di Louis Chenais

Lo sviluppatore Louis Chenais ha creato una delle mie navigazioni reattive preferite basata sul sito Web PlayStation. Louis lo chiama un "menu a tendina" in cui scorre alla vista, superando l'intera pagina. Questo è comune per le interfacce mobili ed è diventato rapidamente popolare anche per i web designer.

Una cosa che mi piace molto è lo stile di animazione. È abbastanza elegante e veloce da visualizzare i collegamenti senza annoiare gli utenti. E soprattutto, sembra che possa funzionare su un sito Web di produzione.

Vedi il Principio di navigazione reattiva della penna n. 3 – Il menu a tendina di Louis Chenais

10. Mega-menu reattivo di Samir Alley

Puoi cercare nel web e trovare centinaia di mega esempi di menu di navigazione. Questi in genere appaiono su blog e siti di notizie più grandi, ma sono anche popolari nei negozi di e-commerce o nei siti di grandi agenzie. La parte più difficile di un mega-menu è renderlo completamente reattivo. Grazie a questo piccolo frammento, puoi rielaborare il design del mega menu per adattarlo facilmente a qualsiasi schermo.

Sui dispositivi mobili, utilizza una navigazione a scorrimento per visualizzare tutti i collegamenti interni in un unico menu. Questo può sembrare un po 'fastidioso, ma potresti anche usare jQuery per nascondere i collegamenti secondari se ha senso. È ancora una delle migliori soluzioni reattive che ho visto per eseguire un mega menu sul desktop senza alienare gli utenti mobili.

Vedi il Mega Menu Responsive della Penna – Navigazione per Samir Alley