Oggi creeremo un menu CSS orizzontale funzionante da zero. Utilizzeremo i PNG trasparenti (scusi utenti del browser obsoleti) per creare una barra orizzontale lucida, il cui colore può essere facilmente modificato utilizzando solo i CSS. Prima di iniziare, guarda cosa costruiremo nella demo live.
Creazione del PSD
Il lavoro di Photoshop per il menu è abbastanza ridotto e dovrebbe richiedere solo pochi minuti. L'ho suddiviso in cinque semplici passaggi.
Barra solida
Crea un nuovo file RGB in Photoshop e disegna una barra colorata di 45 pixel (io ho usato # 4d4e50) lungo tutta la tela.
Pendenza
Quindi prendi lo strumento sfumatura e assicurati che sia impostato su un gradiente che inizia dal nero e termina in trasparenza. Partendo in basso, allunga il gradiente verticalmente sopra la barra grigia.
gloss
Crea una striscia bianca che si allinea con la parte superiore della barra grigia, ma estende solo la metà della distanza verticale. Imposta l'opacità di questa striscia al 7%.
strisce
Fai altre due strisce bianche, questa volta alte solo pochi pixel e inseriscile leggermente dalla parte superiore e inferiore della barra grigia.
Salvataggio
Che ci crediate o no, questo è tutto ciò di cui abbiamo bisogno! Prima di salvare il PNG, disattivare il livello originale della barra dei colori. Questo è così che possiamo cambiare il colore all'interno del nostro CSS. Si noti inoltre che non è necessaria l'intera immagine poiché verrà impostata per la ripetizione orizzontale. Basta ritagliare un piccolo frammento verticale e andare a? Salva per Web e dispositivi? per salvare il tuo PNG.
L'HTML
Prenderò una conoscenza di base di HTML e CSS qui. Cercherò di essere il più descrittivo possibile senza spiegare tutto riga per riga.
L'HTML vuoto
Inizieremo con una pagina HTML semplice e vuota.
Contenitore
Ora aggiungeremo un contenitore div che manterrà il menu di navigazione div.
Struttura del menu
Per completare il nostro codice HTML, inserisci un elenco non ordinato contenente gli elementi di estensione per Casa, Informazioni, Servizi, Lavoro e Contatti. Questa sarà la base per le nostre voci di menu. Inseriremo lo sfondo e stileremo questo elenco tutto in CSS.
Il CSS
Il CSS conterrà la maggior parte del lavoro. Tutto quello che abbiamo fatto finora è creare un elenco di link in modo che la tua pagina dovrebbe apparire come questa:
Colore di sfondo
La prima cosa che faremo è sfumare lo sfondo un po 'per rompere lo sfondo bianco noioso. Basta aggiungere il seguente snippet al corpo.
Stile di base del contenitore
Per iniziare a disegnare il contenitore, imposta la posizione su relativo e l'altezza di 45 pixel (che è l'altezza del nostro grafico di Photoshop). Quindi imposta il colore e lo sfondo sul bianco e la larghezza sul 100% in modo che si estenda lungo tutta la finestra.
Questo codice dovrebbe causare problemi nella tua anteprima. Non preoccuparti, è esattamente come dovrebbe guardare a questo punto!
Aggiunta e Styling dell'immagine
Ora entreremo nella roba che lo farà sembrare un menu! Questa volta sceglieremo il target navMenu che contiene i collegamenti. Ancora una volta, imposta la tua posizione su relativa e altezza a 45px. Non aggiungeremo testo in questa fase, ma proseguiamo e impostiamo la dimensione del font su 17px. Successivamente ho impostato il colore di sfondo e l'immagine con una singola riga di codice. Si noti che il colore (# 4d4e50) è il colore della nostra barra dei colori originale in Photoshop. Questa impostazione è la chiave per la flessibilità di questo menu. La modifica di questo valore cambierà il colore del menu di navigazione, rendendolo estremamente facile da personalizzare. Dopo aver impostato un colore, lancia l'immagine di sfondo e impostala per ripetere sull'asse x.
Ora se visualizzi l'anteprima della pagina dovresti vedere una barra dei menu lucida e brillante! Prova a modificare il valore del colore per vedere come l'immagine mantiene il suo gloss mentre cambia i colori.
Indirizzamento dei collegamenti
Successivamente aggiungeremo una grande porzione di CSS all'elenco non ordinato per iniziare a mettere in posizione i nostri link. Per la sezione elenco non ordinato generale, imposta il margine e il riempimento su 0, lo stile elenco su none, la larghezza su automatico e il float a sinistra. Quindi modellare gli elementi dell'elenco contenuti nell'elenco non ordinato (li). Ancora una volta fluttuiamo a sinistra ma notiamo che questa volta impostiamo il display su? Block? e i nostri margini a 0 1px.
Dai un'occhiata alla tua pagina in Safari. Le voci dell'elenco dovrebbero essere allineate orizzontalmente ora.
Disegnare il testo
Ora scegli come target gli elementi di collegamento (a) nel menu. Imposta il display per bloccare, il float a sinistra, l'altezza a 45px e il colore al bianco. Per eliminare la sottolineatura del link, imposta la decorazione del testo su none. Infine, per distanziare i collegamenti un po 'impostare il padding su 0 0 0 30px (in senso orario: in alto 0, a destra 0, in basso a 0, a sinistra a 30).
Il testo dovrebbe guardare più vicino a dove lo vogliamo ora, ma è ancora un po 'fuori.
Questa volta scegli come target la lista non ordinata, la voce dell'elenco, gli elementi di estensione dei link (il targeting diventa un po 'folle). Si noti che ho aggiunto più padding per allineare meglio le cose e impostare un'altezza e un float. Poi vediamo un po 'di codice che ho preso in prestito da Chris Coyier in CSS-Tricks che ci offre un font davvero carino per il menu. Essenzialmente, HelveticaNeue-Light è la nostra scelta preferita qui, quindi gli spettatori che lo hanno installato lo vedranno.Quelli che non lo faranno semplicemente torneranno al carattere successivo in linea fino a quando il loro browser non troverà un'opzione installata. Nelle parole di Chris, potresti usare anche la più bella Helvetica possibile? ?
Ora il nostro testo del menu è magnificamente disegnato e sul posto!
Aggiunta di effetti al passaggio del mouse
Il nostro ultimo passaggio consiste nell'aggiungere alcuni bei effetti al passaggio del mouse in modo da poter vedere facilmente l'opzione che si sta per selezionare. Punteremo i link su passaggio del mouse con il nostro primo frammento e gli intervalli al passaggio del mouse sul secondo. Avviso sotto? Background? Ho inserito la stessa immagine di sfondo che stiamo usando per la barra dei menu stessa. Questo è così la nostra opzione di passaggio del mouse mantiene il bell'aspetto lucido. Tuttavia, questa volta ho impostato il colore di sfondo su un grigio più scuro. Questo fornisce la differenziazione nel nostro effetto hover.
Ecco! Ora abbiamo un menu CSS meravigliosamente lucido con un buon effetto rollover.
Cambiare il colore
La cattiva notizia è che i browser senza supporto PNG non verranno visualizzati correttamente. La buona notizia è che, per i browser che supportano i PNG (sai, i browser del 21 ° secolo), questa configurazione rende semplicissimo modificare completamente l'aspetto del menu con solo due modifiche del valore dei colori CSS!
Trova i due punti nel tuo CSS in cui appare l'immagine di sfondo (una volta per la barra e una volta per il rollover) e cambia i colori precedenti. Guarda cosa succede se creiamo un altro menu e sostituiamo # 3d359a per il colore principale e # 5749e7 per il colore hover.
Conclusione
Spero che tu abbia imparato qualcosa sui CSS e che sia stato ispirato a sperimentare la trasparenza per motivi di flessibilità. È possibile creare facilmente lo stesso effetto usando JPG, ma occorrerebbero più immagini e richiederebbe la creazione di nuove immagini in Photoshop ogni volta che si desidera modificare il colore.