I menu di navigazione erano una cosa abbastanza semplice. Codifica una lista non ordinata, lasciala a sinistra e sei a posto. Oggi il design reattivo è di gran moda, anche se ti trovi di fronte a nuove sfide nella creazione di un menu design.
Seguici mentre iniziamo da zero e codifichiamo un semplice ma efficace menu di navigazione reattivo che puoi facilmente modificare e riutilizzare nei tuoi progetti.
Cosa stiamo costruendo
Se sei il tipo di persona a cui piace saltare in avanti, ecco un'anteprima di quello che stiamo costruendo. Assicurati di ridimensionare la finestra del browser per vedere i concetti reattivi in azione.
demo: Clicca qui per vederlo e modificarlo su Dabblet.
L'HTML
Passiamo direttamente a questo progetto senza un mucchio di inutili lanugine. Sono sicuro che sei desideroso di ottenere le cose buone.
Il primo passo è decidere un po 'di markup. Dato che questo è un menu di navigazione, è il posto perfetto per implementare il HTML5? Nav? elemento.
Che ci crediate o no, questo piccolo pezzo di codice mi ha fatto girare la testa quando è arrivato il momento di testare. Per qualche motivo a me sconosciuto, i miei stili semplicemente non stavano prendendo effetto in IE6-8! Dopo una decina di minuti di confusione, mi sono schiaffeggiato in testa mentre mi rendevo conto che avevo usato elementi HTML5, che ovviamente non sono supportati da qualcosa di più vecchio di IE9.
Fortunatamente, la soluzione è semplice, basta inserire il famoso html5shiv e sei a posto (posizionalo nella parte superiore del documento).
Aggiungi la lista
Ora che abbiamo capito il nostro contenitore, è il momento di lanciare una semplice UL con otto collegamenti. Questo tutorial è piuttosto dipendente dal numero di link, quindi assicurati di utilizzarne otto se non sei abbastanza sicuro di avventurarti da solo in alcune aree.
Aggiungi il tag secondario
Per rendere il menu un po 'più interessante e utile, includiamo un'altra riga di testo sotto quella iniziale su ciascuna voce del menu. Ci sono un certo numero di modi in cui possiamo fare questo, quindi sentitevi liberi di non essere d'accordo con come mi sono avvicinato. Fondamentalmente ho appena inserito un tag break e usato un piccolo elemento per la seconda riga. Il secondo elemento sarà davvero piccolo, quindi questo ci dà un aggancio abbastanza semantico senza divs, ID o classi non necessari.
Controllo avanzamento
Dopo questo passaggio dovresti avere una lista di link semplice e senza sbavature. Si noti che senza alcuno sforzo, quei piccoli tag stanno già andando a lavorare e riducendo le dimensioni di ogni altra linea.
Stili di partenza
Per iniziare il nostro CSS, tiriamo fuori quel buon vecchio selettore universale e prendiamo il consiglio di Paul Irish applicandoci dimensionamento della scatola: border-box ad ogni elemento Questo ci aiuterà a ridimensionare le cose facilmente con le percentuali, anche se useremo i bordi.
Stili contenitore
Prima di entrare nello stile dei singoli elementi della lista, applichiamo uno stile di base ai nostri elementi genitori. Per prima cosa, scegli come target l'elemento di navigazione e impostalo al 90% della larghezza del corpo. Questo si estenderà per la maggior parte attraverso lo spazio disponibile, ma lascia comunque nel nostro nav un po 'di spazio per respirare. Assicurati di centrarlo anche sulla pagina con i margini automatici.
Salta e applica gli stili di elenco non ordinati necessari per reimpostare l'elenco ed eliminare eventuali punti elenco.
Stili di menu
Ora che i nostri elementi genitore interagiscono, è tempo di lavorare in modo specifico sugli elementi del menu, che possono essere scelti come target tramite l'elemento nav insieme ai tag di ancoraggio e agli elementi dell'elenco.
Ecco una grossa porzione di codice, ma non aver paura di questo, ti guiderò passo dopo passo.
Ho ordinato le proprietà qui in ordine alfabetico per una facile consultazione, ma ad essere sincero questo non è il mio modo preferito di fare le cose. Mi piace raggruppare gli stili in base alla funzione in modo che abbiano un po 'più senso. Se riordiniamo i nostri stili in questo modo, diventano più facili da discutere.
Il primo è la porzione di stili che definisce la forma e il layout di ogni elemento della lista. Abbiamo modificato gli ancoraggi in elementi a livello di blocco, li abbiamo posizionati a sinistra, assegnati una larghezza e dato loro un piccolo riempimento. Questo creerà un bel rettangolo per ogni link nel menu. Perché il 12,5% per la larghezza? Perché abbiamo otto voci di menu e 100% / 8 ci dà il 12,5% di larghezza su ogni oggetto.
Il prossimo è il pezzo di codice che definisce lo stile visivo delle scatole che abbiamo appena creato. Abbiamo dato loro un colore di sfondo e un bordo di un singolo pixel sul lato destro.
Infine, finiamo con tutti gli stili che riguardano il testo del menu. Questa è tutta roba di base, l'unica curva è la? Cutive? carattere, che puoi trovare qui.
Per il piccolo stili, ho cambiato il colore, rimosso la trasformazione del testo in maiuscolo e impostato il font su Helvetica.
Controllo avanzamento
Questi stili hanno fatto la differenza nel mondo. Il nostro menu è alla ricerca tanto meglio. Il carattere personalizzato funziona, i collegamenti sono in linea, il testo piccolo è perfetto; è una cosa bellissima.
Stili al passaggio del mouse
Quando l'utente passa sopra una voce di menu, portiamola fino al nero. Per farlo sentire un po 'più bello, ho aggiunto anche una transizione di mezzo secondo.
Correzione di confine
Ora, non puoi vederlo dato che il nostro sfondo è bianco, ma in realtà c'è un problema con i nostri confini. In realtà servono solo a dare un po 'di definizione visiva a ciascuna voce di menu, il che significa che non ce n'è bisogno alla fine. Per risolvere questo problema, possiamo usare l'ultima: pseudo classe figlio.
Di seguito ho applicato un colore di sfondo temporaneo solo così puoi vedere la differenza tra le versioni precedenti e successive.
Going Responsive
Questo progetto è un buon esempio della differenza tra un design reattivo e uno fluido. A questo punto, il nostro menu è fluido (utilizza larghezze basate sulla percentuale) ma non è reattivo. Possiamo vederlo chiaramente quando tentiamo di ridurre troppo le dimensioni della nostra finestra:
Come puoi vedere, questo è un relitto! Facciamo un salto con alcune query multimediali per vedere se possiamo risolvere questo problema. Il modo migliore per scoprire dove abbiamo bisogno di query multimediali è semplicemente testarlo e vedere dove si interrompe il layout, quindi tenerne conto.
1220px
Il primo problema che vedo si verifica intorno a 1.200 pixel di larghezza. Qui le voci di testo più lunghe iniziano a essere tagliate e non sono più completamente leggibili.
Per risolvere questo problema, dobbiamo solo modificare la dimensione del carattere. Prendo di mira un'area appena prima che si verifichi il problema (1,220 px) e imposto i miei font su 10px.
Con questo cambiamento, il problema non si verifica più. Riducendo le dimensioni della nostra finestra, il menu risponde e riduce la dimensione del carattere per adattarsi alle dimensioni.
930px
Ancora una volta riduciamo le dimensioni della finestra e scopriamo che le cose diventano pelose attorno al segno 900px. Abbiamo molti problemi con l'overflow qui:
Piuttosto che rendere le dimensioni dei caratteri sempre più piccole fino a quando non puoi vederle più, questa volta ridicheremo completamente il menu in modo che si divida in due righe. Ora ogni link può essere bello e grande, dato che potrebbe essere intorno al punto in cui le dimensioni della tavoletta entrano in gioco.
Si noti che abbiamo dovuto ripensare al modo in cui i nostri confini funzionano anche questa volta. Ora abbiamo bisogno della riga superiore per avere i bordi sul fondo, ma non la riga inferiore. Ancora una volta, i selettori di pseudo classe rendono questo abbastanza facile.
580px e 320px
Il formato a due righe funziona abbastanza bene fino a quando non arriviamo a 600px e poi si scatena l'inferno. La cosa va completamente a pezzi.
Per risolvere questo problema, completeremo le nostre query multimediali con un formato a due colonne e quattro righe. Useremo questo layout per 580px sotto e aumenteremo leggermente la dimensione del font a 320px.
Il nostro menu ora sembra buono anche a dimensioni molto ridotte. Il rovescio della medaglia è che occupa un buon pezzo di altezza verticale, ma è possibile rimuovere alcuni dei padding se ti dà fastidio.
Selectivizr
Gli astuti osservatori tra di voi noteranno che abbiamo rappresentato le versioni precedenti di IE con html5shim, solo per seguirlo con alcuni fantasiosi selettori di pseudo-classe che non funzioneranno nemmeno in IE. Per tener conto di questo, assicurati di scaricare e implementare Selectivizr, una fantastica utility JavaScript creata appositamente per portare i selettori CSS3 su IE6-8.
Conclusione
Il design reattivo non è una passeggiata nel parco.Ci vuole tempo, fatica e un sacco di? Sapere come? tirare in modo efficace. Mi piace scomporlo in sfide individuali come il menu di navigazione qui e la galleria di immagini in un articolo precedente in modo da poter imparare il processo senza sentirsi sopraffatti.
Ora dovresti essere ben attrezzato per intraprendere il tuo progetto di menu di navigazione reattivo. Lascia un commento qui sotto e mostraci cosa ti viene in mente. Quali sfide uniche hai affrontato lungo la strada?