A volte il menu di navigazione può essere una delle parti più difficili del processo di progettazione. Questa singola area può dare il tono per l'usabilità dell'intero sito.
Oggi vedremo 30 esempi interessanti di buon design del menu. Sebbene molti siano puramente CSS, 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 l'aspetto estetico di ciascun menu e in che modo lo sviluppatore ha realizzato l'effetto. In questo modo puoi ottenere ispirazione su come utilizzare nuovi metodi per creare i tuoi menu unici.
Silk Tide
Questo è uno dei menu più minimali della lista. È fondamentalmente solo testo con un rollover blu esteso, ma è davvero facile da implementare e produce un bell'effetto.
Glenn Sorrentino
Questo esempio utilizza i bordi CSS nella parte superiore e inferiore del menu che aumentano di spessore quando si passa sopra di essi.
Strutta
Se hai uno sfondo con texture, considera l'uso della trasparenza nel menu per aumentare l'estetica. Questo potrebbe facilmente essere fatto con RGBa in CSS3.
Parco del gomito
Un altro esempio di trasparenza nell'area di navigazione. Questo usa un effetto simile al primo esempio con la casella di selezione che si estende fino alla cima della pagina. Ciò aumenta la visibilità e rende il design più lineare.
Thoughtbot
Mentre scorri questi pulsanti, lo sfondo diventa rosso più luminoso. Questo combinato con l'aspetto lucido (realizzato con un PNG trasparente) crea l'illusione che l'area si illumini.
Toffee Nut Design
Questo bellissimo esempio utilizza gli sprite CSS per la navigazione. L'intero menu è un PNG che mostra ognuna delle schede in tre stati: spento, acceso e acceso + selezionato.
Safarista
Qui vediamo ogni sezione della navigazione come un ibrido di immagine e testo. L'icona, il gradiente e lo sfondo più piccoli rendono l'immagine di ogni sezione mentre il testo più grande è in stile HTML con un effetto di trascinamento della sottolineatura.
David Jonsson
Un altro semplice effetto hover che sanguina verso l'alto. Questo aveva icone nascoste che vengono visualizzate solo quando si passa il mouse. Un bell'effetto!
Asvalia
Mi piacciono molto i colori e il testo storto di questo menu. I rollover luminosi sono perfetti.
Bonsai Studios
Questo è un menu verticale estremamente semplice con trasparenza e hover oscuranti. Ottiene il lavoro fatto, sembra grande e può essere costruito in pochi minuti.
Chiesa di 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 l'hover.
Ryan Couser
Questo usa alcuni sprite semplici per eseguire l'hover. Ogni icona è un'immagine con entrambi gli stati acceso e spento.
Kk Media
Qui vediamo un menu verticale con icone più dettagliate. Ogni collegamento è un elemento della lista HTML con una semplice immagine di sfondo applicata in CSS.
Bite Club
Ho davvero apprezzato questa barra di navigazione. La luminosità attira davvero la tua attenzione e l'inversione dei colori rende perfetto il rollover. Questo utilizza anche uno sprite per ogni voce di menu, ciascuno con tre stati.
Capital City Equipment Company
Ho pensato che la selezione della navigazione a forma di casa fosse intelligente su questo. Il testo di ciascun link è parte dell'immagine, se replichi qualcosa del genere sarebbe semplice usare il testo live sull'immagine di sfondo.
Tempo libero alla fragola
Questo menu a discesa utilizza un piccolo PNG trasparente ripetuto per ridurre l'effetto di opacità ridotta. Ancora una volta, possiamo aspettarci che questo sia molto più facile nel prossimo futuro con RGBa quando altri browser entrano in gioco.
Studio Artificiale
Sì, hai indovinato, più sprite di immagini (percependo una tendenza qui?). I grandi pulsanti e le eccellenti pendenze rendono la navigazione più bella.
Cognigen
Questo è stato di gran lunga uno dei concetti più originali che ho trovato nella mia ricerca. Per sfruttare l'esclusivo effetto 3D, il designer ha utilizzato quattro enormi stati per ciascun pulsante che cambiano a seconda che il pulsante sia selezionato, al passaggio del mouse o che abbia una selezione adiacente.
Più bontà del menu CSS
Ora che abbiamo discusso di alcuni ottimi esempi, eccone ancora un altro da verificare. Usa la funzione di ispezione del tuo browser per controllare il codice e le immagini dietro a ciò che ti piace!
Cafe Manndible
Codice Greene
musica lirica
Coniglio Mac
Clark Builders
Mr. B and Friends
Sovvertire
The Swish Life
Stagno misterioso
LiveResto
Feelsocial
Gowalla
Festival della Nuova Zelanda
Scarica i menu precostruiti!
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 elenchi, molto leggeri, facili da implementare e compatibili con browser.
- CSS Menu Maker
- Gioco CSS: menu
- Menu CSS
- Menu CSS Cross Browser gratuiti
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. Inoltre, facci sapere quale degli esempi sopra ti è piaciuto di più.