Crea un fantastico menu in CSS3

L'avvento di CSS3 ha introdotto un mondo di possibilità per web designer e sviluppatori. Con animazioni, ombre, angoli arrotondati e altro ancora, gli elementi possono essere facilmente stilizzati e pesano meno che mai.

La navigazione di un sito Web è uno degli aspetti fondamentali per creare o distruggere l'esperienza di un utente. Invece di caricare il menu con immagini singole o sprite, perché non fare tutto in CSS3?

Non c'è bisogno di jQuery o JavaScript; non è necessario avviare Photoshop. Facciamo un salto includendo un grande font per aggiungere qualche carattere al nostro menu.

Quindi prendi la tua tazza di caffè preferita (o se sei come me, una Diet Coke ghiacciata), apri il tuo editor di codice preferito e facciamo un semplice menu di navigazione usando solo CSS3.

Prima di iniziare

Prima di immergerci nel codice del nostro menu, vorrei esaminare alcune risorse e strumenti che utilizzeremo in questo tutorial, che puoi scaricare e utilizzare mentre segui. Questi sono tutti inclusi nel file .zip alla fine, che include anche il codice finale.

Immagine di sfondo : Denim scuro da modelli sottili.
Carattere del testo : Droid Sans da Google WebFonts.
Carattere icona : Icon Set iconico da alcuni tizio casuale.
CSS3 JavaScript : -prefix-gratis da Lea Verou.

Bene, hai preso tutti quelli? O almeno scaricato con il file .zip completo? Bene, ora iniziamo. Cammineremo attraverso il set-up, iniziando con l'HTML, poi con il CSS di base e infine con il CSS3.

L'HTML

Dal momento che siamo progressisti con CSS3 nel nostro sistema di menu, sono andato avanti e ci ha impostato una configurazione HTML5 molto semplice. Non c'è bisogno di impazzire qui - non stiamo costruendo un intero sito in questo tutorial, solo il menu.

Passiamo al codice per il menu. Il menu è solo una semplice lista non ordinata, con elenchi annidati per menu a discesa. L'elenco non ordinato è racchiuso in un tag HTML5.

Come puoi vedere, abbiamo cinque voci di menu, quattro delle quali hanno voci secondarie. Il prossimo passo è quello di ottenere lo stile CSS di base, quindi applicheremo il CSS3 al menu e gli span per ottenere le icone.

Il CSS

Per ottenere una buona base di riferimento con cui lavorare, aggiungeremo il pattern denim da Subtle Patterns e centrare il menu, basato su una griglia 960.gs. Creeremo anche una classe di clearfix, che viene utilizzata nei nostri sistemi di menu.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}body {background: url('img/denim.png');font-family: 'Droid Sans', sans-serif;;}.clearfix {clear: both;}.wrap {width: 940px;margin: 4em auto;}

Ora, lavoreremo sullo styling del menu. Per prima cosa, modifichiamo la navigazione di primo livello per creare una struttura di base.

nav {padding: 0 10px;position: relative;}.menu li {float: left;position: relative;}.menu li a {color: #444;display: block;font-size: 14px;line-height: 20px;padding: 6px 12px;margin: 8px 8px;vertical-align: middle;text-decoration: none;}.menu li a:hover {color: #222;}

Passiamo attraverso quel codice. La barra dei menu si estenderà per tutta la larghezza della classe .wrap, che è 940 pixel. Per aggiungere un po 'di spazio bianco alla prima voce di menu, aggiungiamo 10 pixel di riempimento sul lato sinistro e destro e impostiamo la posizione della barra di navigazione su relativa. Questa diventa una dichiarazione molto importante in seguito. Le voci del menu di livello superiore sono flottanti a sinistra e hanno anche un posizionamento relativo. Quindi facciamo un ulteriore passo avanti e modelliamo i collegamenti, che sono impostati per visualizzare: block ;. Questo è diverso da diversi sistemi di menu CSS che sono visualizzati: inline; dichiarato.

Il menu a discesa

I menu a discesa sono elenchi non ordinati annidati, quindi passiamo a uno stile successivo. Di nuovo, stiamo andando con il CSS di base qui.

/* Dropdown styles */.menu ul {position: absolute;left: -9999px;list-style: none;}.menu ul li {float: none;}.menu ul a {white-space: nowrap;}/* Displays the dropdown on hover and moves back into position */.menu li:hover ul {left: 5px;}/* Persistent Hover State */.menu li:hover a {color: #222;}.menu li:hover ul a {background: none;}.menu li:hover ul li a:hover {}

Che cosa? Dove è andato il nostro menu? Ricorda, questo è un lavoro in corso. Comincerà a venire insieme, lo prometto. Il .menu ul imposta la posizione su assoluto (ricorda, questa lista non ordinata si trova all'interno della voce di elenco di livello superiore, che è posizionata relativamente - quindi, il .menu ul è posizionato relativamente alla voce di elenco di livello superiore). Quindi, lo posizioniamo fuori dallo schermo. Questa è una tecnica che ho preso da CSSWizardy, in quanto questo metodo offre una migliore accessibilità per i lettori di schermo, ecc. Più tardi, richiameremo il nostro stato di hover.

Successivamente, impostiamo gli elementi dell'elenco a discesa a sinistra, creando un aspetto uniforme per l'elemento a discesa. Nel tag di ancoraggio, inseriamo uno spazio bianco: nowrap; che impedisce ai collegamenti lunghi di eseguire il wrapping su due righe. Ciò aiuta a mantenere un aspetto uniforme e mantiene l'interfaccia utente facile da usare.

Passando agli stati di passaggio del mouse, quando si posiziona il mouse sulla voce di elenco di livello superiore (.menu li) si passa a un hover e si targetizzano i nostri elenchi non ordinati secondari e si sposta l'elenco da una schermata all'altra a 5 pixel a sinistra dell'elemento dell'elenco . Anche in questo caso, il posizionamento è relativo alla voce di elenco di livello superiore, quindi è sfalsato di 5 pixel dall'elemento della lista. Se dovessi rimuovere la posizione relativa del livello superiore li, tutti i tuoi voli al volo volerebbero fuori dal link "Home".

Ora, ci assicureremo che quando ci fermiamo al nostro menu a discesa, il livello principale li mantiene lo stile, ma le voci del menu a discesa non hanno questo stile. È qui che il tuo .menu li: passa sopra a e .menu li: hover ul a entra in gioco. Il primo imposta lo stato di hover persistente (quindi rendi lo stesso come il tuo stile di primo livello), e quest'ultimo rimuove lo stile dagli elenchi di navigazione secondaria.

Infine, modifichiamo le voci del menu a discesa. Oh, è vuoto? Sì, è tutto CSS3. Ci arriveremo tra un minuto.

Il CSS3

Ora arriviamo alla parte divertente. La specifica CSS3 ha introdotto molti strumenti divertenti ed entusiasmanti per i web designer e gli sviluppatori che utilizzano i moderni browser web. Certo, non tutti i browser supportano tutte le specifiche CSS3 (controlla css3files.com per un ottimo primer su cosa funziona e cosa no), ma molte delle specifiche degradano con garbo e non infrangono il design.

Nota: per questo tutorial, sto usando il potente ed epico piccolo di Lea Verou (2kb) -prefix-free.js script. Se non l'hai mai usato prima e lavori con i CSS3, fai un favore a te stesso e dai un'occhiata. Utilizza alcune funzioni di rilevamento avanzato pazzo per prendere dichiarazioni CSS3 e aggiungere i prefissi dei fornitori appropriati per garantire la compatibilità del browser quando necessario. Mantiene il codice molto più pulito e rende il tutorial più facile da capire.

Aggiungiamo un po 'di CSS3 alla barra di navigazione, la lista non ordinata di livello superiore e le voci di elenco.

nav {background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));background-image: linear-gradient(#fff, #ccc);border-radius: 6px;box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);padding: 0 10px;position: relative;}.menu li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}

Il primo nel codice sopra è la barra di navigazione. Aggiungiamo un gradiente lineare da bianco a grigio chiaro (utilizzando sia la dichiarazione di gradiente standard, sia il vecchio stile -webkit per mantenere la compatibilità con i browser più vecchi. Completiamo (non è previsto il gioco di parole) la barra di navigazione con un raggio di 6 pixel .

Sugli stati al passaggio del mouse: aggiungiamo un gradiente lineare opposto, così come alcuni angoli arrotondati, e un'ombra di riquadro incassato, dando ai nostri collegamenti l'aspetto che l'elemento del menu scende nella barra di navigazione. Nel complesso, un aspetto molto pulito. Prima di arrivare agli stati al passaggio del mouse, voglio rivedere parte dell'HTML in relazione con alcuni CSS3. Ho usato un grande font iconico chiamato Iconic di Some Random Dude, che è incorporato nella proprietà CSS3 @ font-face, e poi chiamato con tag span sulle voci del menu. Una volta scaricato il set, è possibile impadronirsi del codice dal CSS nel file zip, nonché copiare i file dei font. Se cambi il percorso relativo, ricorda di cambiare il src nel carattere @ font-face.

@font-face {font-family: 'IconicStroke';src: url("fonts/iconic/iconic_stroke.eot");src: local('IconicStroke'),url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),url("fonts/iconic/iconic_stroke.otf") format('opentype');}.iconic {color:inherit;font-family: "IconicStroke";font-size: 38px;line-height: 20px;vertical-align: middle;}

Con la dichiarazione di questo tipo di carattere, ora puoi creare stili di tag di estensione con classi specifiche per creare le icone. Per il mio progetto, tengo iconic.css come un foglio di stile completamente intatto chiamato dopo il mio style.css. Per incorporare le icone nei miei menu, modificheremo leggermente l'HTML:

Ovviamente, il codice sopra aggiorna solo la navigazione di livello superiore, aggiungendo un tag span con l'iconico della classe e la classe icona appropriata. Ora che ciò è fatto, eseguiremo lo stile finale delle voci del menu a discesa, che introducono alcune nuove proprietà CSS3 come l'opacità e una transizione. Quindi, prima, il .menu ul:

.menu ul {position: absolute;left: -9999px;list-style: none;opacity: 0;transition: opacity 1s ease;}

Le due grandi proprietà da rivedere qui sono le opacità e le dichiarazioni di transizione. L'opacità è impostata su 0 e la transizione farà passare il menu a discesa da un'opacità di 0 a un'opacità di 1 nel corso di 1 secondo. Ora facciamo lo stato di passaggio del mouse.

.menu li:hover ul {background: rgba(255,255,255,0.7);border-radius: 0 0 6px 6px;box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);left: 5px;opacity: 1;}

Lo stato al passaggio del mouse è piuttosto complesso a cui pensare. Andiamo linea per linea.

La linea superiore rende lo sfondo uno sfondo bianco puro, quindi imposta l'opacità al 70% per consentire l'osservazione di alcuni pattern di sfondo.

In secondo luogo, ho arrotondato i due angoli inferiori, lasciando gli angoli in alto squadrati per dare l'allusione che il drop down sta uscendo dalla barra di navigazione.

Ma la terza linea è dove entra la magia. A causa del posizionamento della barra di navigazione e delle voci di elenco, l'uso di z-index è praticamente impossibile per la stratificazione per ottenere un effetto appropriato. Per ottenere l'apparenza che il menu a tendina si trova sotto la barra di navigazione, impostiamo una leggera inset-box simile a quella che scende nel menu a discesa. Infine, imposta l'opacità su 1, che coordina la transizione impostata in precedenza.

Il resto del CSS3 è piuttosto semplice e in gran parte ripetitivo di ciò che abbiamo già fatto:

.menu li:hover a {background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));background-image: linear-gradient(#ccc, #ededed);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}.menu li:hover ul a {background: none;border-radius: 0;box-shadow: none;}.menu li:hover ul li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);}

Non dovrebbe essere troppo fuori dall'ordinario in quell'ultimo set di codice. E dai un'occhiata al nostro risultato finale.

Conclusione

Beh, il gioco è fatto; un menu CSS3 liscio e fluido. Ho incluso tutte le risorse in un file zip, che puoi scarica qui , o puoi guarda la demo qui .

web design icone navigazione HTML5 css3 caratteri dell'icona