Oggi abbiamo un altro fantastico progetto CSS passo passo per te! Questa volta costruiremo un menu di navigazione verticale espandibile super utile. È un ottimo modo per nascondere molti link in uno spazio abbastanza piccolo e le animazioni aggiungeranno un tocco di classe al tuo sito.
Anche se sei un principiante, dovresti riuscire a farlo. Ti guiderò lungo ogni fase del percorso e ti spiegherò come funziona ogni pezzo di codice in modo da poter implementare queste stesse tecniche in progetti futuri e approfondire la tua conoscenza dei CSS. Iniziamo!
Il concetto
Prima di iniziare la codifica, è sempre utile definire il concetto approssimativo di ciò che si desidera ottenere in modo da poter avvolgere il cervello attorno a ciò che verrà coinvolto. L'oggetto che stiamo costruendo oggi è un menu di navigazione verticale in una sorta di formato di fisarmonica modificato (da qui un'anteprima del prodotto finito).
Come puoi vedere, le sezioni in basso sono chiuse per impostazione predefinita e si aprono quando ci passi sopra. Tuttavia, per aggiungere qualche bella variazione includeremo anche una sezione che rimane aperta tutto il tempo. Nella sezione principale che è sempre aperta includeremo un breve messaggio di benvenuto e nelle sezioni che si apriranno saranno sottosezioni dei collegamenti di navigazione.
Ora che abbiamo una buona idea di dove stiamo andando, iniziamo a delineare la struttura nel nostro HTML.
L'HTML
La prima cosa che faremo è inserire un bel HTML5 per avvolgere il menu. Il nuovo elemento nav fornisce un contenitore meravigliosamente semantico per il nostro menu.
Ora pensiamo a come il nostro menu sarà strutturato. Non abbiamo semplicemente una lista di link, ogni barra rappresenta un link con un'area aggiuntiva sotto di essa. Li avvolgeremo in un div. Quindi all'interno di ogni divisione avremo bisogno di un collegamento principale (la barra colorata) e un elenco di collegamenti secondari (l'area bianca). Supponendo che questo oggetto verrà gettato in un sito che ha già uno stile predefinito, poniamo arbitrariamente su h4 per il collegamento principale e un elenco non ordinato semplice per il resto.
Possiamo copiare, incollare e modificare questa sezione di codice per creare i vari pezzi del nostro menu di navigazione. Qui abbiamo una sezione Portfolio, About e Contact, ognuno con tre collegamenti secondari. A ogni sezione viene assegnata la stessa classe (voce di menu) in modo da poterle modellare in una volta sola.
Volevo concentrarmi innanzitutto su quelle aree perché sono tutte uguali, ma ricorda che la sezione superiore è in realtà diversa, sia per funzionalità che per contenuto. Invece di tenere una lista non ordinata, manterrà un paragrafo. Aggiungeremo anche in una classe unica per renderlo più facile da raggiungere nel nostro CSS.
Con quello, abbiamo già finito con l'HTML. Anche se non è stato progettato, l'anteprima dal vivo mostra perfettamente la gerarchia del nostro menu di navigazione. Qui puoi vedere chiaramente che il nostro menu inizia a prendere forma.
Stili di base
Per iniziare il nostro stile di menu, dobbiamo stabilire alcune nozioni di base. Per prima cosa, cancelleremo i margini e il riempimento predefiniti. Squisheremo i div direttamente uno sopra l'altro in modo che qualsiasi spaziatura predefinita del browser possa rovinare il layout.
Successivamente, applicheremo un colore semplice allo sfondo in modo che le parti bianche del nostro menu si distinguano. Quindi inseriremo alcuni stili di carattere di base e aggiungeremo una leggera ombra al menu. Si noti che il margine impostato nel blocco nav centra il menu sulla pagina, questo è solo a scopo di visualizzazione e deve essere rimosso quando si desidera spostare il menu in posizione.
Infine, aggiungeremo alcune dimensioni e il colore di sfondo ai selettori nav e menu-item. Ecco il codice risultante:
A questo punto, l'anteprima sembra che abbiamo fatto più male che bene, ma non temere, inizierà a sembrare spiccio in men che non si dica.
Stili di intestazione
Ora è il momento di modellare i nostri tag h4 e trasformarli nelle barre orizzontali che abbiamo visto nel nostro mockup. Per fare ciò, abbiamo solo bisogno di un po 'di imbottitura e di un colore di sfondo. Mentre siamo qui, possiamo iniziare a dare uno stile alla tipografia. Stiamo ereditando la famiglia di font che abbiamo creato prima, quindi non è necessario ridigitarla. Invece, abbiamo solo bisogno di impostare una dimensione e un peso.
Come puoi vedere nell'immagine sottostante, i nostri stili di link stanno ancora sostituendo alcuni degli stili di caratteri che abbiamo impostato qui, quindi dovremo entrare e correggere quelli successivi.
Collegamenti di intestazione
Ovviamente, il link blu non va bene, quindi dobbiamo cambiarlo in bianco. Vogliamo anche abbandonare qualsiasi decorazione di testo (la sottolineatura). Ora, potremmo fermarci qui, ma il comportamento predefinito sarebbe che solo il testo è cliccabile e non l'intera barra, che non è l'ideale. Per rendere l'intera barra un collegamento, impostiamo la proprietà di visualizzazione per il blocco e la larghezza per l'intera dimensione del menu (200px).
Ora la nostra barra colorata sembra molto meglio. Ecco l'anteprima:
Rendendolo carino
Se vuoi attaccare a qualcosa di semplice, puoi saltare questo passaggio, ma ho intenzione di proseguire e aggiungere qualche modifica visiva. Torna indietro e modifica il blocco di stile dell'intestazione per includere un gradiente e alcuni bordi molto sottili. Probabilmente non sarai nemmeno in grado di individuare i bordi fino a quando il menu non sarà chiuso, ma combinato con i gradienti ti aiuterà davvero a differenziare ogni sezione in modo che non sembrino tutti un unico blocco.
Stili al passaggio del mouse
Quindi aggiungeremo uno stile hover sottile ai collegamenti della barra. Tutto quello che faremo sarà modificare leggermente i colori sul gradiente in modo che diventino più luminosi quando si passa il mouse.
Stili di paragrafo
Ricorda che il primo elemento nel nostro menu contiene un paragrafo e non un elenco non ordinato, quindi attaccheremo questo per renderlo bello. Le liste avranno una parte considerevole del codice, ma il paragrafo non richiede praticamente nulla. Basta definire la dimensione e il colore, quindi aggiungere un po 'di imbottitura.
La sezione superiore ora sta benissimo! Sia la barra dell'intestazione sia il paragrafo sono esattamente dove vogliamo che siano.
Stili elenco non ordinati
Ci sono un sacco di cose che dobbiamo fare per rendere queste liste raddrizzate. Cambiamo le cose un po 'e guardiamo prima il codice, poi ti guiderò attraverso.
Come puoi vedere, il primo blocco punta alla lista non ordinata come a un'unità intera. Qui ho impostato alcuni stili di ridimensionamento e font di base e rimosso il punto elenco impostando list-style-type su none.
Successivamente ho indirizzato i link in modo specifico. Li ho spostati, rimosso le sottolineature, impostato il colore ed eseguito lo stesso display: blocco del trucco che abbiamo visto prima per ingrandire l'area cliccabile.
Per finire, ho applicato alcuni stili personalizzati agli elementi della lista stessi. Il bordo inferiore crea una separazione tra ogni elemento e lo stile al passaggio del mouse cambia lo sfondo. Ecco il risultato del nostro lavoro, il nostro menu è quasi finito!
Comprimi e anima
Fino a questo punto, abbiamo mantenuto aperto il nostro menu in modo che potessimo vederlo mentre modelliamo gli elementi all'interno. Ora che sappiamo che tutti i nostri stili visivi sono esattamente come li vogliamo, è il momento di comprimere ogni sezione e quindi impostarli in modo che si aprano al passaggio del mouse.
Per impostazione predefinita, i browser imposteranno automaticamente l'altezza di tali elenchi non ordinati, il che significa che saranno abbastanza alti da contenere tutto il contenuto all'interno. Per comprimere le sezioni del menu in modo che solo le barre mostrino, possiamo scegliere come target quegli elenchi non ordinati e impostare l'altezza su 0. Osserva che stiamo lasciando il paragrafo da solo, questo garantirà che la nostra sezione superiore sia sempre aperta.
Ora il nostro menu è molto più breve e non consuma così tanto spazio. Puoi anche vedere finalmente il vantaggio di quei gradienti e bordi che abbiamo implementato in precedenza.
Animare la transizione
Ora vorremmo riaprire questi menu su Hover, ma prima di farlo, impostiamo un'animazione in modo che la transizione sia gradevole e graduale. Assicurati di inserire le varie estensioni del browser e scegli come target la proprietà height.
Espansione su Hover
Tutto ciò che resta da fare ora è fare in modo che quando si passa il mouse, l'ul si espande. Questo è difficile, quindi fai attenzione. Il tuo istinto potrebbe essere quello di fare qualcosa di simile? Ul: hover? ma non è quello che vogliamo. Invece, vogliamo farlo in modo da poter passare con il mouse ovunque in quella voce di menu, nella barra o nell'elenco non ordinato. Tuttavia, l'articolo che vogliamo espandere è ancora solo l'ul. Ecco come appare il nostro selettore:
A volte leggere un selettore all'indietro è utile quando si cerca di capire cosa fa. Questo dice al nostro browser di impostare un'altezza di 93 px nelle nostre liste non ordinate quando un oggetto .menu viene passato sopra.
Una cosa importante da notare qui è che non possiamo semplicemente impostare l'altezza su auto perché per qualche motivo questo disabilita l'animazione. Se non si desidera l'animazione, un'altezza di auto è molto più flessibile e consente di variare il numero di voci di sottomenu. Se vuoi farlo con l'animazione, dovrai scegliere come target l'altezza per ognuno di essi.
Guardalo in azione
Il nostro menu è ora completo. Assicurati di calciare le gomme nella demo per vedere come funziona. Inserirò anche un link al codice completato in modo da poter dare un'occhiata a tutto questo insieme.
demo: Avvia demo
Vedi il codice: Dai un'occhiata a HTML e CSS su Tinkerbin
Conclusione
Spero che questa procedura dettagliata di costruzione di un menu di navigazione verticale animata sia stata di tuo gradimento. In fase di implementazione, è molto simile ai pulsanti di download animati che abbiamo creato l'altro giorno, quindi dovresti davvero imparare a nascondigli e mostrare i contenuti usando puro CSS.
Cerca una versione ancora migliore di questo menu per far apparire il nostro nuovo sito gemello, Design Curate. Qui troverai tantissimi fantastici omaggi che puoi scaricare e implementare nei tuoi progetti oggi.