30 menu CSS splendidi e versatili

A volte il menu di navigazione può essere una delle parti più difficili del processo di progettazione. Questa singola area può impostare il tono per l'usabilità dell'intero sito.

Oggi vedremo 30 esempi stimolanti di un buon design di menu. Sebbene molti siano CSS puri, altri aggiungono alcune immagini e / o JavaScript per aumentare l'estetica e la funzionalità.

Delving Deeper

È sempre più utile avere un'idea del processo di sviluppo piuttosto che vedere semplicemente un'immagine, quindi in questa sezione discuteremo brevemente dell'estetica di ciascun menu e di come lo sviluppatore ha realizzato l'effetto. In questo modo puoi trarre ispirazione su come utilizzare nuovi metodi per creare i tuoi menu unici.

Silk Tide

Questo è uno dei menu più minimali nell'elenco. Fondamentalmente è solo un semplice testo con un rollover blu esteso, ma è davvero facile da implementare e si traduce in un bell'effetto.

Glenn Sorrentino

In questo esempio vengono utilizzati i bordi CSS nella parte superiore e inferiore del menu che aumentano di spessore quando ci si passa sopra.

Strutta

Se hai uno sfondo a trama, considera l'utilizzo della trasparenza nel tuo menu per aumentare l'estetica. Questo potrebbe essere fatto facilmente con RGBa in CSS3.

Elbow Park

Un altro esempio di trasparenza nell'area di navigazione. Questo utilizza un effetto simile al primo esempio con la casella di selezione che si estende fino all'inizio della pagina. Ciò aumenta la visibilità e rende il design più fluido.

Thoughtbot

Quando si passa con il mouse su questi pulsanti, lo sfondo diventa rosso più luminoso. Questo combinato con l'aspetto lucido (realizzato con un PNG trasparente) crea l'illusione dell'area illuminata.

Toffee Nut Design

Questo bellissimo esempio usa sprite CSS per la navigazione. L'intero menu è un PNG che mostra ciascuna delle schede in tre stati: off, on e on + selezionato.

Safarista

Qui vediamo ogni sezione della navigazione come un ibrido di immagine e testo. L'icona, il gradiente e lo sfondo più piccolo rendono l'immagine di ogni sezione mentre il testo più grande è in stile HTML con un effetto hover sottolineato.

David Jonsson

Un altro semplice effetto hover che sanguina verso l'alto. Questo aveva icone nascoste che vengono visualizzate solo al passaggio del mouse. Un bell'effetto!

Asvalia

Mi piacciono molto i colori e il testo storto in questo menu. I rollover luminosi sono perfetti.

Bonsai Studios

Questo è un menu verticale estremamente semplice con trasparenza e un passaggio al buio. Svolge il lavoro, ha un bell'aspetto e può essere costruito in pochi minuti.

Chiesa delle grandi aspettative

Un altro menu di navigazione verticale. Questo implementa alcune icone di base ma attraenti e una GIF di sfondo con una sfumatura per il passaggio del mouse.

Ryan Couser

Questo usa alcuni sprite semplici per eseguire il passaggio del mouse. Ogni icona è un'immagine con entrambi gli stati on e off.

Kk Media

Qui vediamo un menu verticale con icone più dettagliate. Ogni collegamento è un elemento dell'elenco HTML con una semplice immagine di sfondo applicata nei CSS.

Bite Club

Ho adorato questa barra di navigazione. La luminosità attira davvero la tua attenzione e l'inversione dei colori rende un rollover perfetto. Questo utilizza anche uno sprite per ogni voce di menu, ciascuno con tre stati.

Capital City Equipment Company

Pensavo che la selezione della navigazione a forma di casa fosse intelligente su questo. Il testo in ogni collegamento fa parte dell'immagine, se si replica qualcosa del genere sarebbe invece semplice utilizzare il testo live sull'immagine di sfondo.

Tempo libero alla fragola

Questo menu a discesa utilizza un piccolo PNG trasparente ripetuto per ottenere l'effetto di opacità ridotta. Ancora una volta, non vediamo l'ora che questo sia molto più facile nel prossimo futuro con RGBa quando entreranno in gioco più browser.

Studio artificiale

Sì, hai indovinato, più sprite di immagine (intuisci una tendenza qui?). I pulsanti grandi e gli eccellenti gradienti creano una bellissima area di navigazione.

Cognigen

Questo è stato di gran lunga uno dei concetti più originali che mi sono imbattuto nella mia ricerca. Per ottenere l'effetto 3D unico, il progettista ha utilizzato quattro stati enormi per ciascun pulsante che cambiano a seconda che il pulsante sia selezionato, passa il mouse sopra o abbia una selezione adiacente.

Altro menu CSS Bontà

Ora che abbiamo discusso alcuni esempi fantastici, eccone alcuni altri da verificare. Usa la funzione di ispezione del tuo browser per controllare il codice e le immagini dietro a quello che ti piace!

Manndible Cafe

Codice Greene

musica lirica

Mac Rabbit

Costruttori di Clark

Mr. B and Friends

Sovvertire

The Swish Life

Mystery Tin

LiveResto

Feelsocial

Gowalla

Festival della Nuova Zelanda

Scarica i menu predefiniti!

Hai bisogno di un buon punto di partenza per i tuoi menu CSS? Dai un'occhiata a queste fantastiche risorse gratuite.

13 stili: i menu sono basati su elenco, molto leggeri, facili da implementare e compatibili con più browser.
CSS Menu Maker
CSS Play: Menu
Menu CSS
Menu CSS gratuiti per Cross Browser

Ora mostraci il tuo

Hai un menu CSS di cui sei particolarmente orgoglioso? Usa i commenti qui sotto e lascia un link in modo che possiamo vedere. Facci anche sapere quale degli esempi sopra ti è piaciuto di più.