Menu di navigazione verticale di Orman Clark la versione CSS3

Avanti nella serie PSD codificata di Orman Clark è il suo fantastico menu di navigazione verticale. Lo ricreamo con CSS3 e jQuery mentre utilizziamo la quantità minima di immagini possibile.

Le uniche immagini che useremo sono per le icone: creerò uno sprite usando un nuovo strumento chiamato SpriteRight, ma questo è opzionale. Inoltre, userò GradientApp per creare i miei gradienti CSS3, ma anche questo è facoltativo.


Passaggio 1: markup HTML di base

Iniziamo inserendo un markup di base, un documento HTML5 vuoto:

    Menu di navigazione verticale: codice CSS3     

E ora il markup per il nostro menu; una lista non ordinata all'interno di un wrapper contenente.

  • Amici 340
  • video 147
  • Gallerie 340
  • podcast 222
  • robot 16

Infine, creiamo i sottomenu posizionando una lista non ordinata nidificata all'interno di ciascuna delle voci di elenco esistenti.

  • Amici 340
    • Gattini carini 14
    • Strana "roba" 6
    • Errore automatico 2
  • video 147
    • Gattini carini 14
    • Strana "roba" 6
    • Errore automatico 2
  • Gallerie 340
    • Gattini carini 14
    • Strana "roba" 6
    • Errore automatico 2
  • podcast 222
    • Gattini carini 14
    • Strana "roba" 6
    • Errore automatico 2
  • robot 16
    • Gattini carini 14
    • Strana "roba" 6
    • Errore automatico 2

Ok, potrebbe sembrare molto lì ma non lasciarti confondere. Per prima cosa abbiamo creato una lista non ordinata con cinque voci di elenco, ognuna con un tag di ancoraggio all'interno. Quindi abbiamo aggiunto elenchi non ordinati nidificati, ciascuno con tre voci di elenco.

Ho anche aggiunto una classe a ciascuna voce dell'elenco, solo così renderà lo styling più semplice in seguito. Infine, per i numeri abbiamo creato un tag span all'interno di ciascun tag di ancoraggio. Se lo visualizzi nel tuo browser dovrebbe assomigliare a questo:


Passaggio 2: caratteri fluidi

Prima assicureremo che il nostro menu sia visualizzato correttamente. Aggiungi queste regole a css / styles.css, metteranno il margine e il riempimento di tutti i nostri uls a 0 e rimuovi lo stile elenco.

ul, ul ul margine: 0; padding: 0; stile elenco: nessuno; 

Prima di iniziare lo styling del nostro menu creeremo un wrapper con una larghezza fissa e una dimensione font di 13px (espressa in unità em). In primo luogo aggiungeremo una regola al corpo, font-size: 100%;. Ciò garantirà che il nostro stile sia basato sulla dimensione del carattere predefinita del browser (solitamente 16px).

Ora per spiegare come funziona la dimensione del carattere del wrapper. Dobbiamo esprimerlo come un em; proporzionale alla dimensione della dimensione del carattere del suo genitore. Puntiamo a 13px, quindi supponendo che la dimensione genitore sia 16px, il nostro risultato è 13/16 = 0,8125. 13px è 0,8125 * 16 px.

Misurare i nostri font (e altri elementi) in unità em li renderà fluidi. Ora se cambiamo la dimensione del carattere del wrapper (o la dimensione predefinita del nostro browser) l'intero menu si regolerà in relazione a quella base. Cerca di non farti confondere, se hai bisogno di aiuto per convertire i tuoi font ti suggerisco di visitare pxtoem.com.

body font-size: 100%;  a text-decoration: none;  ul, ul ul margin: 0; padding: 0; stile elenco: nessuno;  #wrapper width: 220px; margine: 100px auto; font-size: 0.8125em; 

Abbiamo dato al wrapper una larghezza fissa di 220 px e l'abbiamo centrato con un margine superiore aggiungendo margine: 100px auto;.


Passaggio 3: Menu principale CSS

Successivamente aggiungeremo uno stile per il menu. Faremo la larghezza e l'altezza del menu ul auto, quindi applica un'ombra all'intera cosa. Aggiungendo l'altezza come automatica, l'ombra si regolerà all'apertura del cursore.

Quindi i tag di ancoraggio; aggiungeremo una larghezza del 100%, il che significa che si estenderanno alla larghezza di 220 px del wrapper. Per un'altezza useremo gli ems, quindi ripensaci alla nostra dimensione del carattere principale di 13px. Il nostro .psd mostra un'altezza di 36 px, quindi questo è il nostro obiettivo. Prenderemo 36 e lo divideremo per 13, il che equivale a circa 2,75em (36/13 = 2,76923077). Useremo anche 2,75em per l'altezza della linea (per centrare tutto il testo verticalmente), quindi applichiamo del testo per inserire il testo, facendo spazio alla nostra icona più avanti.

Aggiungeremo un gradiente CSS3 per lo sfondo, sono andato avanti e l'ho creato con GradientApp. Successivamente cambieremo il carattere, applicheremo il carattere Helvetica Neue e un colore bianco insieme a un'ombra di testo. Nota che non abbiamo usato una dimensione del carattere qui. Questo perché il nostro font di base è 13px per il wrapper che i nostri ancore hanno ereditato, quindi non c'è bisogno di aggiungerlo.

body font-size: 100%;  a text-decoration: none;  ul, ul ul margin: 0; padding: 0; stile elenco: nessuno;  #wrapper width: 220px; margine: 100px auto; font-size: 0.8125em;  .menu width: auto; altezza: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba (0,0,0, 0,73), 0px 0px 18px 0px rgba (0,0,0, .13); -moz-box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13);  .menu> li> a background-color: # 616975; background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (rgb (114, 122, 134)), a (rgb (80, 88, 100))); background-image: -webkit-linear-gradient (in alto, rgb (114, 122, 134), rgb (80, 88, 100)); background-image: -moz-linear-gradient (in alto, rgb (114, 122, 134), rgb (80, 88, 100)); background-image: -o-linear-gradient (in alto, rgb (114, 122, 134), rgb (80, 88, 100)); background-image: -ms-linear-gradient (in alto, rgb (114, 122, 134), rgb (80, 88, 100)); background-image: linear-gradient (in alto, rgb (114, 122, 134), rgb (80, 88, 100)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); border-bottom: 1px solid # 33373d; -webkit-box-shadow: inset 0px 1px 0px 0px # 878e98; -moz-box-shadow: inset 0px 1px 0px 0px # 878e98; box-shadow: inset 0px 1px 0px 0px # 878e98; larghezza: 100%; altezza: 2,75em; altezza della linea: 2,75em; text-indent: 2.75em; blocco di visualizzazione; posizione: relativa; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; colore: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .5); 

Va bene! Ora sta iniziando a sembrare migliore e stiamo ottenendo anche una struttura! Ma che ne dici di aggiungere un colore di sfondo in modo che il menu risulti migliore ...

body background: # 32373d; 

Suggerimento: ricordando EMs

Dai CSS qui sopra puoi vedere che è facile dimenticare cosa significano realmente le tue unità em. È una buona idea lasciare commenti sui tuoi calcoli originali, in modo che quando torni al tuo codice in futuro puoi ancora decifrare cosa sta succedendo. Ricorda la formula: desiderato px / genitore px = risultante em e usa il simbolo approssimativo (≈) se stai arrotondando il risultato.

#wrapper font-size: 0.8125em; / * 13/16 = 0.8125 * / .menu> li> a altezza: 2,75em; / * 36/13 ≈ 2,75 * / altezza linea: 2,75em; / * 36/13 ≈ 2,75 * / text-indent: 2,75em; / * 36/13 ≈ 2,75 * /

Passaggio 4: sottomenu CSS

È ora di aggiungere un po 'di CSS per i sottomenu bianchi. Dovremo aggiungere uno sfondo bianco con alcuni bordi grigi. Notare per l'ultimo che non ha un bordo inferiore, quindi lo targetizzeremo con il :ultimo bambino pseudo selettore per rimuoverlo. Ha un bordo blu scuro, quindi rimuoveremo quello grigio aggiungendone uno blu.

Il prossimo passo sarà simile al precedente; aggiungeremo le altezze e le larghezze, cambieremo lo sfondo in bianco. Questa volta abbiamo bisogno di cambiare la dimensione del carattere. Puntiamo a 12px usando il nostro calcolo di desiderato px / genitore px = risultante em otteniamo 0.923em

Cambiamo anche il colore del testo in grigio. Nota che abbiamo usato blocco di visualizzazione. Se avessimo usato float: sinistra i menu non si animano in modo uniforme, quindi utilizziamo il blocco di visualizzazione per aiutarli a muoversi in modo semplice e fluido. noterai anche che abbiamo aggiunto uno stile in più; lo stiamo applicando all'ultimo figlio del sub-ul. Abbiamo bisogno di fare questo in modo da poter cambiare il colore del bordo.

.menu ul li a background: #fff; border-bottom: 1px solid # efeff0; larghezza: 100%; altezza: 2,75em; altezza della linea: 2,75em; text-indent: 2.75em; blocco di visualizzazione; posizione: relativa; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.923em; font-weight: 400; colore: # 878d95;  .menu ul li: last-child a border-bottom: 1px solid # 33373d; 

Sta iniziando a sembrare davvero buono ora!


Passaggio 5: passaggio del mouse e stile attivo

Aggiungeremo ora hover e stili attivi, soprattutto per quando la fisarmonica è aperta! Aggiungeremo anche un bordo inferiore al menu attivo. Ora, se stai pensando, "perché non abbiamo aggiunto una classe attiva?". Bene amico mio, è quello che farà il jQuery in seguito.

.menu> li> a: hover, .menu> li> a.active background-color: # 35afe3; background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (rgb (69, 199, 235)), a (rgb (38, 152, 219))); background-image: -webkit-linear-gradient (in alto, rgb (69, 199, 235), rgb (38, 152, 219)); background-image: -moz-linear-gradient (in alto, rgb (69, 199, 235), rgb (38, 152, 219)); background-image: -o-linear-gradient (in alto, rgb (69, 199, 235), rgb (38, 152, 219)); background-image: -ms-linear-gradient (in alto, rgb (69, 199, 235), rgb (38, 152, 219)); background-image: linear-gradient (top, rgb (69, 199, 235), rgb (38, 152, 219)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); border-bottom: 1px solid # 103c56; -webkit-box-shadow: inset 0px 1px 0px 0px # 6ad2ef; -moz-box-shadow: inset 0px 1px 0px 0px # 6ad2ef; box-shadow: inset 0px 1px 0px 0px # 6ad2ef;  .menu> li> a.active border-bottom: 1px solid # 1a638f; 

Passaggio 6: icone del menu principale

Aggiungeremo le icone usando il :prima pseudo. Per prima cosa prenderemo di mira tutti i tag di ancoraggio sub-ul, applicheremo lo sprite di sfondo e lo imposteremo su nessuna ripetizione. Gli daremo una dimensione del font di 36px anche se non c'è testo; useremo 36px così possiamo usare una larghezza e un'altezza di 1em che ora sarà uguale a 36px. Spingeremo quindi l'elemento verso il basso del 50% e rimuoverò .5em dal margine superiore per centrarlo.

Usando le classi per ogni voce dell'elenco sub-ul, le prenderemo di mira e daremo a ciascuna la posizione di sfondo appropriata per lo sprite.

Nota: Ho creato questo sprite usando la nuova app chiamata SpriteRight, se vuoi giocare con lo sprite, ho incluso le immagini e i file di progetto nei file sorgente.

.menu> li> a: before content: "; background-image: url (... /images/sprite.png); background-repeat: no-repeat; font-size: 36px; height: 1em; width: 1em; position : absolute; left: 0; top: 50%; margin: -.5em 0 0 0; .item1> a: before background-position: 0 0; .item2> a: before background-position: -38px 0; .item3> a: before background-position: 0 -38px; .item4> a: before background-position: -38px -38px; .item5> a: before background-position: -76px 0 ;

Passaggio 7: numeri del menu principale

Ok, ricordi quegli span che abbiamo aggiunto? Questi creeranno i numeri!

Per prima cosa aggiungeremo una dimensione font di 11px (che converte in circa 0.857em). Li posizioneremo in modo assoluto e li spingeremo da destra di 1em, ancora una volta - em per renderlo fluido. Lo abbasseremo del 50% dall'alto e rimuoveremo il margine superiore per centrarlo. Verranno aggiunti uno sfondo insieme ad alcune ombre di riquadri, un riquadro e uno iniziale.

Ancora una volta per renderlo fluido, utilizzeremo il padding per creare larghezza e altezza. Abbiamo persino usato ems sul raggio di confine; ne avremo bisogno perché se il testo viene ingrandito sembrerà sproporzionato. Ho anche aggiunto un altro stile per quando il passaggio del mouse o una classe attiva viene applicata al collegamento.

.menu> li> a span font-size: 0.857em; display: blocco in linea; posizione: assoluta; a destra: 1em; superiore: 50%; sfondo: # 48515c; line-height: 1em; altezza: 1em; imbottitura: .4em .6em; margine: -.8em 0 0 0; colore: #fff; text-indent: 0; allineamento del testo: centro; -webkit-border-radius: .769em; -moz-border-radius: .769em; border-radius: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); text-shadow: 0px 1px 0px rgba (0,0,0, .5); font-weight: 500;  .menu> li> a: hover span, .menu> li a.active span background: # 2173a1; 

Passaggio 8: numeri e freccia del sottomenu

Questo processo sarà simile al passaggio precedente, quindi non entrerò nei dettagli. Le principali differenze qui sono che ho rimosso il colore di sfondo, cambiato il bordo e cambiato il colore del carattere. Dobbiamo anche aggiungere quella freccia e ci appoggeremo ancora una volta :prima psuedo. Definiamo larghezza e altezza e aggiungiamo un po 'di posizionamento a sinistra usando ems per assicurarci che sia fluido.

Infine, uno stato hover (grazie a quelli nei commenti che hanno sottolineato la sua assenza iniziale). Applichiamo semplicemente un colore più scuro (# 32373D) al testo di ancoraggio, la pseudo freccia e il numero all'interno della campata.

.menu ul> li> a span font-size: 0.857em; display: blocco in linea; posizione: assoluta; a destra: 1em; superiore: 50%; / background: #fff; border: 1px solid # d0d0d3; line-height: 1em; altezza: 1em; imbottitura: .4em .7em; margine: -.9em 0 0 0; colore: # 878d95; text-indent: 0; allineamento del testo: centro; -webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius: 769em; text-shadow: 0px 0px 0px rgba (255,255,255, .01));  .menu> li> ul li a: before content: '▶'; font-size: 8px; color: #bcbcbf; posizione: assoluta; larghezza: 1em; altezza: 1em; inizio: 0; a sinistra: -2.7em;  .menu> li> ul li: passa sopra a, .menu> li> ul li: passa sopra a span, .menu> li> ul li: passa sopra a: before color: # 32373D; 

Quindi sembra piuttosto bello ora, giusto? Penso che sia ora di aggiungere alcune funzionalità a questo!


Passaggio 9: Tempo jQuery

Scommetto che stavi aspettando di arrivare qui ?! Bene, siamo finalmente al punto jQuery. Per prima cosa dovremo collegare alla libreria jQuery, utilizzando quella ospitata da Google. L'ultima versione attuale è 1.7.1. Aggiungi quanto segue alla sezione principale della tua pagina HTML:

Ora aggiungi quanto segue alla fine del documento html, prima della chiusura etichetta. Non preoccuparti se questo sembra troppo confuso, lo spiegherò tra un minuto.

 var menu_ul = $ ('. menu> li> ul'), menu_a = $ ('. menu> li> a');

Per prima cosa stiamo memorizzando il sottomenu e i tag di ancoraggio del menu principale in due variabili diverse, questo rende facile riferirsi a loro in un secondo momento.

 menu_ul.hide ();

Ciò nasconderà tutti i sottomenu al caricamento della pagina

 menu_a.click (funzione (e) 

Per prima cosa diremo di fare qualcosa quando clicchiamo su uno dei tag di ancoraggio del menu principale.

 e.preventDefault ();

Qui stiamo impedendo ai tag di ancoraggio di seguire qualsiasi link o di modificare l'indirizzo nella barra degli indirizzi. per esempio. se crei un tag di ancoraggio con un link di "#", quando lo fai clic non verrà visualizzato nella barra degli indirizzi ora. I tag di ancoraggio sono fondamentalmente disabilitati.

 if (! $ (this) .hasClass ('active')) menu_a.removeClass ('active');

Ora ti insegneremo che SE il menu_a ha la classe 'attiva', rimuovilo.

 menu_ul.filter ( ': visibile') slideUp ( 'normale');.

Qui usiamo ".filter" e ": visible". Se un menu è aperto, farlo scorrere con una velocità normale.

 $ (This) .addClass ( 'attivo') accanto () stop (true, true) .slideDown ( 'normale')..;

Se il menu è chiuso, aggiungi la classe 'active' (in modo che possiamo accedere al simpatico stile CSS) e fai scorrere verso il basso con una velocità normale.

  else $ (this) .removeClass ('active'); . $ (This) .Next () Stop (true, true) .slideUp ( 'normale');

Ora, dovremo utilizzare un ELSE come parte della nostra dichiarazione condizionale. Quindi, ELSE rimuove la classe attiva e fa scorrere il menu verso l'alto per nasconderla. Questo è solo così possiamo codificare qualsiasi menu senza dover ricaricare la pagina.

Nota: Se desideri modificare la velocità della diapositiva, modifica la norma in, ad es. '500'. Questo lo farà scorrere a 500 millisecondi.

Se sei interessato ad imparare jQuery da zero, ti consigliamo di dare un'occhiata al corso gratuito Learn jQuery in 30 giorni da tutsplus.com.


Conclusione

Bene, ce l'abbiamo fatta fino alla fine! Abbiamo codificato il bellissimo menu di navigazione verticale di Orman usando CSS3 e jQuery! Resta sintonizzato per un suggerimento veloce su come creare questo utilizzando solo CSS3 con lo pseudo-selettore di destinazione.


# wrapper width: 440px; font-size: 1em

Spero che questo tutorial ti sia piaciuto, grazie per la lettura!