Share
Non c'è modo migliore per imparare CSS3 che sporcarsi le mani su un progetto reale e questo è esattamente quello che faremo. Ti insegnerò come creare un menu di ruota CSS3 fantastico e stratificato utilizzando alcune tecniche avanzate per principianti e avanzati CSS. Quindi esplora il tuo editor di testo o IDE preferito e cominciamo con la magia CSS3!
Oggi imparerai come creare la canna da zucchero a goccia fuori dai molti stili e varianti di colore disponibili. Riceverai tutte le variazioni nei file di origine. Inoltre, come bonus aggiuntivo, ho aggiunto un po 'di Javascript facoltativo, in modo che tu possa ruotare le tue immagini in base alla voce del menu al passaggio del mouse. Il file sorgente arriva anche con la propria documentazione!
Nota: il supporto per IE è limitato al momento. Lo faremo per lo più allo scopo di spingere la busta con quello che possiamo fare in CSS3? ma come con tutte le cose al limite della praticità, significa sacrificare un po 'di stabilità. Tuttavia, affronteremo l'argomento IE alla fine del tutorial!
Offriamo questo tutorial in due formati diversi oggi: un video e un tutorial scritto completo di seguito. Segui insieme a qualsiasi metodo di apprendimento che preferisci (o entrambi!) E ti porteremo alla fine in pochissimo tempo!
Di seguito è riportato il tutorial scritto passo passo. Assicurati di prendere anche l'intera sorgente scaricabile!
La prima cosa che vogliamo fare è creare dei livelli che si sovrappongano l'un l'altro e rimangano al loro posto mentre si utilizza il minor numero possibile di codice. È importante non riempire il tuo codice con un sacco di gonfiezza e non crearne molte
galleggianti non necessari o elementi posizionati in modo assoluto, quindi cercheremo di rimanere il più relativo possibile.
Come puoi vedere il codice è abbastanza diretto. Abbiamo essenzialmente impilato uno strato sopra l'altro e in questo modo saranno in grado di mantenere le loro posizioni.
Successivamente vogliamo aggiungere un'immagine al centro della ruota, o a goccia in questo caso. Per fare ciò aggiungeremo semplicemente il seguente codice tra la classe wrap4 e la classe completer. Questo bloccherà l'immagine al centro della tela. Useremo solo un'immagine Rockable per questo perché sono fantastici!
Accentsconagua
Ora vorremmo aggiungere un po 'di stile a ciascuno strato uno per uno.
Questo sarà il contenitore principale per il tuo menu ruota. Contiene anche tutti i font universali e le dimensioni dei caratteri che influenzano tutto ciò che è all'interno del div.
# menu-wrap background: # e7e7e7; / * Questo non è necessario * / altezza: 600px; / * Questo è importante e mantiene la rotellina in posizione quando si passa sopra gli elementi * / font-family: sans-serif, Franklin Gothic Medium, Helvetica, Arial; / * Se non si utilizza Franklin, passerà automaticamente al font successivo nella famiglia * / font-size: 14px; / * Stabilisce la dimensione globale del carattere * / letter-spacing: 1px! Important; / * Spaziatura degli effetti tra le lettere per tutti i caratteri nella ruota * /
Andremo avanti e assicuriamoci che la nostra immagine centrale sia disegnata correttamente posizionandola al centro della ruota usando i margini, aggiungendo alcune dimensioni ad essa e un bordo.
# menu-wrap .orbit height: 210px; margine: 32px; / * Spinge le immagini nel display al centro * / posizione: assoluta; larghezza: 210 px; # menu-wrap .orbit-frame border: 2px solid # 999; / * Crea una divisione tra l'immagine e wrap5 * /
Tutti i wrapper: vorremmo creare alcuni stili che si applicano a tutti i wrapper principali aggiungendo un raggio di bordo universale, mettendoli tutti al centro, aggiungendo una posizione relativa in modo che tutto rimanga contenuto e spingendoli verso il basso per ottenere lo strato uniforme effetto.
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder / * disegna tutti i contenitori ruota * / -moz-border-radius: 220px 0 200px 220px; / * firefox * / -webkit-border-radius: 220px 0 200px 220px; / * webkit * / border-radius: 220px 0 200px 220px; / * opera * / margine: 0 auto; / * centra tutti i wrapper l'uno rispetto all'altro * / position: relativo! important; / * Non toccare a meno che tu non sappia cosa stai facendo * / top: 20px;
Questo è il tuo più grande strato che si trova dietro a tutti gli altri. Creeremo uno sfondo rosso sfumato e useremo un fallback rosso solido per i brower più vecchi. Useremo anche CSSpie per dire a IE che va bene usare questi stili. Dopo tutto quello che dobbiamo fare è aggiungere larghezza e altezza e il gioco è fatto. Volete assicurarvi che la larghezza e l'altezza siano più grandi di tutti gli altri strati in modo che si mostrino alle loro spalle.
.wrap1 background: # FF0000; / * vecchi browser * / background: -moz-linear-gradient (in alto, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # FF0000), color-stop (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * es. * / sfondo: gradiente lineare (in alto, # FF0000 0%, # 990000 100%); / * browser CSS3 futuri * / -pie-background: gradiente lineare (in alto, # FF0000 0%, # 990000 100%); / * IE fix using Pie * / height: 394px; larghezza: 394px;
Ora per l'avvolgimento 2 faremo esattamente la stessa cosa, solo che useremo le variazioni del bianco come gradiente e aggiungeremo un'ombra esterna e interna per creare un leggero effetto di smussatura più l'ombra dello sfondo. Quindi abbiamo bisogno di rendere la larghezza e l'altezza di circa 40px più piccole del livello principale per renderlo bello e uniforme.
.wrap2 background: #FFFFFF; / * vecchi browser * / background: -moz-linear-gradient (in alto, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # FFFFFF), color-stop (100%, # DCBE8F)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * es. * / sfondo: gradiente lineare (superiore, #FFFFFF 0%, # DCBE8F 100%); / * browser CSS3 futuri * / -pie-background: gradiente lineare (in alto, #FFFFFF 0%, # DCBE8F 100%); / * IE fix using Pie * / height: 354px; larghezza: 354px; -moz-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) inserto; -webkit-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) inserto; box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) all'interno;
Ora ripeteremo il processo per tutti gli altri wrapper usando differenti gradienti colorati e rendendo ogni strato 40px più piccolo dell'ultimo.
.wrap3 background: # FF0000; / * vecchi browser * / background: -moz-linear-gradient (in alto, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # FF0000), color-stop (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * es. * / sfondo: gradiente lineare (in alto, # FF0000 0%, # 990000 100%); / * browser CSS3 futuri * / -pie-background: gradiente lineare (in alto, # FF0000 0%, # 990000 100%); / * Correggere IE usando Pie * / height: 314px; larghezza: 314px; .wrap4 border: 2px solid # FF0000; sfondo: # 990000; / * vecchi browser * / background: -moz-linear-gradient (in alto, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 990000), color-stop (55%, # CC0000), color-stop (57%, # FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "# FF0000", GradientType = 0); / * es. * / sfondo: gradiente lineare (superiore, # 990000 0%, # CC0000 55%, # FF0000 57%); / * browser CSS3 futuri * / -pie-background: gradiente lineare (superiore, # 990000 0%, # CC0000 55%, # FF0000 57%); / * Correggere IE usando Pie * / -moz-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inserto, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) all'interno; -webkit-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inserto, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) all'interno; box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32), 5px 5px 9px 6px rgba (221, 252, 116, 0,81) ; altezza: 274px; larghezza: 274px;
Ora possiamo usare wrap5 e il supporto per il nav che manterrà tutti gli elementi del menu in posizione e per lo stile candycane, lo renderemo nero per aggiungere un bel contrasto neutro mentre wrap5 sarà bianco e servirà come contenitore per il immagine centrale. Quello che stiamo facendo qui è ritagliare lo sfondo in modo da poter vedere attraverso wrap5 e il supporto del navigatore, facendo apparire gli altri livelli dietro di esso e l'immagine centrale. Dopo averlo reso trasparente, aggiungeremo un bordo nero al supporto del navigatore e un bordo bianco per avvolgere5. Il bordo del titolare della nav deve essere nascosto sul lato destro (per i sottomenu), raddoppiato sul lato sinistro (per i menu principali) e solido per il resto creando un effetto piacevole e semplice riducendo al minimo la quantità di livelli che abbiamo aggiungere. Tradizionalmente con questo effetto è possibile aggiungere fino a 5 o 6 nuovi livelli, questo consente di risparmiare un sacco di codice.
Questa volta la larghezza e l'altezza del wrap5 saranno 60px in meno rispetto agli altri livelli per renderlo bello e ancora una volta. Un'altra spinta da 10px in alto aiuterà ad allineare il livello e l'ombra di una scatola interna ci darà una bella prospettiva di distanza tra wrap5 e l'immagine centrale.
Aggiungendo una parte superiore di 0 al supporto di navigazione si allineano automaticamente i livelli con gli altri. Useremo anche un margine negativo per un ulteriore allineamento in alto a sinistra e creeremo un'altezza / larghezza proporzionale per adattarlo bene agli altri strati.
.wrap5 -moz-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) inserto, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); -webkit-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) inserto, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) inset, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); border: 20px solid #FFF; / * crea l'involucro per vedere l'immagine dietro di esso * / height: 214px; inizio: 10px; / * centra l'elemento * / larghezza: 214px; .nav-holder background: none repeat scroll 0 0 transparent; border-color: # 121212; / *** Le dichiarazioni di bordo vengono utilizzate per creare l'ultimo wrapper, middle see through e nasconde il bordo destro per mostrare i sottomenu * / border-style: solido solido nascosto doppio; larghezza del bordo: 73px medio 73px 73px; altezza: 252px; margine: -92px; / * centra l'oggetto sugli elementi relativi * / top: 0; larghezza: 324 px;
"Il bordo del supporto del navigatore deve essere nascosto sul lato destro (per i sottomenu), raddoppiato sul lato sinistro (per i menu principali) e solido per il resto creando un effetto piacevole e semplice riducendo al minimo la quantità di livelli che abbiamo devo aggiungere. "
Beh, questo è stato abbastanza facile. Quindi, dopo aver completato tutto ciò, spero che tu abbia imparato qualcosa di nuovo da aggiungere al tuo set di abilità già. Tuttavia, questo è ciò che dovrebbe essere la tua creazione fino ad ora. Se non assomiglia a questo, perfavore ripassa il codice e vedi se potresti aver perso qualcosa? non preoccuparti, probabilmente è qualcosa di molto secondario.
The Completers: Hmm? ti sembra incompleto? Dobbiamo completare l'operazione con un paio di livelli che ho chiamato completatori in modo da poter nascondere parti dell'immagine centrale e spostare ulteriormente il supporto del navigatore intorno agli altri livelli creando un piacevole effetto arrotondato e chiudendolo.
Fare ciò che ho appena menzionato è abbastanza semplice. Possiamo fare in modo che la maggior parte dello stile si applichi a entrambi i completatori per meno codice. Aggiungiamo un raggio di bordo su un lato per fare una bella curva, quindi useremo la trasformazione per allineare il completamento tra wrap1 e wrap5. Aggiungere il nostro colore di sfondo è molto importante o non verrà visualizzato nulla. Dobbiamo posizionare questo strato in posizione assoluta e spostarlo verso destra e in alto per farlo allineare perfettamente.
.completer1 non mostrerà nessuno per questo stile a goccia. Su altri stili, come la ruota, abbiamo eliminato quella parte per renderla visibile.
.completatore2 ha un po 'più di rotazione e abbiamo bisogno di spingerlo un po' verso il basso per adattarlo.
.completer, .completer2 / ** elementi assoluti per nascondere il bordo delle immagini ** / -moz-border-radius: 0 120px 0 113px; / * firefox * / -webkit-border-radius: 0 120px 0 113px; / * webkit * / border-radius: 0 120px 0 113px; / * opera * / -moz-transform: ruota (-20 gradi); / * firefox * / -webkit-transform: ruotare (-21deg); / * webkit * / -o-transform: ruotare (-20 gradi); / * opera * / -ms-transform: ruota (-20 gradi); / * ie9 e versioni future * / transform: ruotare (-20 gradi); / * browser meno recenti * / background-color: # 121212; background-image: none; background-position: 0 0; background-repeat: repeat; altezza: 135 px; posizione: assoluta; a destra: -24px; inizio: -56px; larghezza: 130 px; .completer display: none; .completer2 -moz-transform: ruotare (110 gradi); / * firefox * / -webkit-transform: ruota (111deg); / * webkit * / -o-transform: ruota (110 gradi); / * opera * / -ms-transform: ruota (110deg); / * ie9 e versioni future * / transform: rotazione (110deg); / * browser più vecchi * / top: 195px;
Dopo aver aggiunto i completatori, dovresti avere qualcosa di simile? Di nuovo, se non hai la stessa cosa di quello che vedi qui, controlla il tuo codice e guarda cosa ti sei perso.
Ora abbiamo un ottimo set di livelli con cui lavorare. Sono tutti ben contenuti e hanno effetti CSS3 fluidi, quindi andiamo avanti e facciamo funzionare questo bambino!
Ora vogliamo aggiungere collegamenti di navigazione che assomigliano a diversi livelli. Sul lato sinistro (nel doppio bordo) vogliamo le voci del menu principale e sul lato destro (nello spazio aperto) vogliamo che le voci del sottomenu compaiano dopo che un elemento principale è passato sopra. Sarai sorpreso di quanto sia facile farlo anche in questo modo, scaviamo dentro.
C'è un blocco al passaggio del mouse per mantenere attivi i menu mentre passi sopra al volante con il mouse e vogliamo assicurarci che copra l'intera ruota, quindi per motivi di compatibilità con IE aggiungeremo uno sfondo con un'opacità di 0,01 altrimenti IE ha vinto Riconosco che l'elemento è anche lì.
Usando margin-left: 76px ti assicura di avere abbastanza spazio per passare con il mouse sopra il menu principale e il sottomenu, oltre ad attraversare la ruota senza nulla scomparire.
ul.menuBuild, ul.menuBuild ul width: 80px; / * imposta la dimensione dei blocchi di menu * / background: rgb (0, 0, 0); / * RGBa con 0,01 opacità * / sfondo: rgba (0, 0, 0, 0,01); / * - DEVE essere incluso un colore bg perché IE funzioni correttamente! * / padding-left: 0px; / * ferma il consueto rientro da ul * / margin-left: 76px; / * Il margine di Opera 7 finale e il modello margin-box causano problemi * /
Ora vogliamo rimuovere i punti elenco da ciascuna voce di menu o [li]. Vogliamo anche assicurarci che siano relativi al titolare del navigatore.
Puoi aggiungere un raggio di bordo per un po 'di stile in più. Trasformeremo lo sfondo in un colore a tinta unita e sposteremo gli elementi del menu a sinistra in modo che tocchino appena i bordi del supporto di navigazione.
Padding, text-indent e color sono per uno stile extra e non sono necessari per il funzionamento del menu.
ul.menuBuild li list-style-type: none; / * rimuove i punti elenco * / posizione: relativo; -webkit-border-radius: 0px 20px 20px 0px; / * browser Webkit * / -moz-border-radius: 0px 20px 20px 0px; / * firefox * / border-radius: 0px 20px 20px 0px; / * opera * / background: none repeat scroll 0 0 # 464646; altezza: 14px; lasciato: -177px; imbottitura: 8px; margine: 6px 0 0; larghezza: 140px; text-trattino: 5px; / * Quanto dista il testo dal bordo sinistro del menu * / color: #fff; / * imposta il colore del carattere predefinito su bianco * /
Ora aggiungiamo un po 'di sfumatura ai sottomenu e spingiamolo a destra e sfioriamo la prima voce del sottomenu appena fino al bordo del wrap5.
Aggiungere un box-shadow ci aiuterà a creare l'effetto degli elementi del sotto-menu sotto i rispettivi livelli.
ul.menuBuild ul.submenu li background: # f2f2f2; / * vecchi browser * / background: -moz-linear-gradient (sinistra, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / background: -webkit-gradient (lineare, in alto a sinistra, in alto a destra, color-stop (0%, # 565656), color-stop (3%, # 666), color-stop (14%, # F F F)); / * webkit * / background: url (bg-image.png) no-repeat, linear-gradient (sinistra, # 565656 0%, # 666 3%, #FFF 14%); / * browser CSS3 futuri * / -pie-background: url (bg-image.png) no-repeat, linear-gradient (sinistra, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", GradientType = 1); * / / * ie * / color: # 464646; position: relative; a sinistra: 296px; / * Ecco come finisce il menu sull'altro lato della ruota * / -webkit-box-shadow: -2px 3px 12px -7px # 161616; / * browser webkit * / box-shadow: 16px 0 10px -8px # 464646 inserto; / * opera * / -moz-box-shadow: -2px 3px 12px -7px # 161616; / * firefox * /
Mettere i margini su ogni voce di sottomenu ci permetterà di creare più separazione e dare l'effetto di ognuno di essere al di sotto di un diverso livello.
Puoi anche aggiungere un'opacità per ogni oggetto per renderlo sfumato dall'alto al centro e dal basso al centro dove l'elemento centrale ha piena opacità.
ul.menuBuild ul.submenu li.first margin-left: -12px; opacità: 0,70; ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third margin-left: -12px; opacità: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; opacità: 0,70;
Ok, quindi hai aggiunto il tuo sottomenu, ma è ancora visualizzato senza che il menu principale sia al passaggio del mouse. Per risolvere questo problema, è sufficiente aggiungere un display nessuno alla [ul].
ul.menuBuild li> ul / * usando il selettore> impedisce che molti browser minori (e IE - vedi sotto) nascondano gli UL dei figli * / display: nessuno; / * rende il passaggio dei bambini al passaggio del mouse senza lasciare spazio per loro * / top: -169px; posizione: assoluta; a destra: -86px; color: # 565656; larghezza: 160 px; -webkit-border-radius: 0 4px 4px 0; / * webkit * / -moz-border-radius: 0 4px 4px 0; / * firefox * / border-radius: 0 4px 4px 0; / * opera * / padding: 50px; altezza: 24px; background: rgb (255, 255, 255); / * Fallback per i browser Web che non supportano RGBa * / background: rgba (255, 255, 255, 0,00); / * RGBa con opacità 0,01 * /
Quindi ora non si presenta affatto! Ok, andiamo avanti e rendiamolo visualizzato dopo che un elemento principale è passato sopra. Usando li: hover> ul possiamo dire che quando un menu principale [li] viene passato sopra mostreremo [ul] per il sottomenu appropriato usando display: block.
ul.menuBuild li: hover> ul / * una delle dichiarazioni più importanti - il browser deve rilevare il passaggio del mouse su elementi arbitrari, il> target solo il figlio ul, non alcun figlio uls di quel bambino ul * / display: block; / * rende visibile il blocco figlio - una delle dichiarazioni più importanti * / position: absolute; a sinistra: 0; larghezza: 400px; height: 200px;
Per pura estetica possiamo aggiungere un raggio di confine, un'ombra di casella e uno sfondo. Ciò che è necessario è creare altezza, larghezza, posizionamento assoluto e margine superiore.
Il margine superiore ci permette di spingere la prima voce del menu verso il basso dove vogliamo, quindi possiamo usare meno margine per spingere verso il basso il resto degli articoli.
ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4 -webkit-border-radius: 20px 0 0 20px; / * webkit * / -moz-border-radius: 20px 0 0 20px; / * firefox * / border-radius: 20px 0 0 20px; / * opera * / -webkit-box-shadow: -2px 7px 8px -7px # 161616; / * webkit * / -moz-box-shadow: -2px 7px 8px -7px # 161616; / * firefox * / box-shadow: -16px 0 8px -7px # 222222 inserto; / * opera * / background: # F0000F; / * vecchi browser * / background: -moz-linear-gradient (sinistra, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / background: -webkit-gradient (lineare, in alto a sinistra, in alto a destra, color-stop (52%, # F0000F), color-stop (60%, # CC0000), color-stop (84%, # 990000), color-stop (84%, # FFF), color-stop (85%, # 464646), color-stop (92%, # 363636), color-stop (100%, # 121212)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * es. * / sfondo: gradiente lineare (a sinistra, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * browser CSS3 futuri * / -pie-background: sfumatura lineare (sinistra, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * IE fix usando Pie * / height: 18px; imbottitura: 8px; posizione: assoluta; margin-top: 100px; larghezza: 138px;
Per le restanti 3 voci di menu aggiungeremo un margine superiore a ciascuna per una spaziatura uniforme tra loro e un margine a sinistra per sbatterle contro i diversi livelli.
Quindi dobbiamo assicurarci di aggiungere la rotazione a ciascun elemento in modo da adattarci bene al menu attorno al volante.
ul.menuBuild li # menu2 -webkit-transform: ruotare (-10deg); / * webkit * / -moz-transform: ruotare (-10deg); / * firefox * / -o-transform: ruotare (-10deg); / * opera * / -ms-transform: ruota (-10deg); / * ie9 e versioni future * / transform: ruotare (-10deg); / * browser meno recenti * / margin-top: 141px; margin-left: 5px; ul.menuBuild li # menu3 -webkit-transform: ruotare (-21deg); / * webkit * / -moz-transform: ruotare (-21deg); / * firefox * / -o-transform: ruotare (-21deg); / * opera * / -ms-transform: ruota (-21deg); / * ie9 e versioni future * / transform: ruotare (-21deg); / * browser meno recenti * / margin-top: 181px; margin-left: 18px; ul.menuBuild li # menu4 -moz-transform: ruotare (-32deg); / * firefox * / -ms-transform: ruota (-32deg); / * ie9 e versioni future * / transform: ruotare (-32deg); / * browser meno recenti * / -webkit-transform: ruotare (-32deg); / * webkit * / -o-transform: ruota (-32deg); / * opera * / margin-top: 218px; margin-left: 38px;
Dopo aver preso cura delle voci del menu principale, faremo la stessa cosa per il sottomenu, a parte il fatto che, invece di fare girare le voci del menu, vogliamo che siano dritte su e giù. Per fare ciò, è necessario compensare la rotazione del menu principale aggiungendo una rotazione a ciascun sottomenu.
Come il menu principale, abbiamo bisogno di aggiungere un margine superiore per uniformare la spaziatura tra ognuno e spingere ogni voce del sottomenu verso destra in modo che siano ancora più vicini ai rispettivi livelli.
ul.menuBuild li # menu1> ul margin-top: 0; a sinistra: 20px; ul.menuBuild li # menu2> ul -webkit-transform: ruotare (10 gradi); / * webkit * / -moz-transform: rotazione (10 gradi); / * firefox * / -o-transform: ruota (10deg); / * opera * / -ms-transform: ruota (-10deg); / * ie9 e versioni future * / transform: ruotare (-10deg); / * browser meno recenti * / sinistra: 24px; margin-top: 6px; ul.menuBuild li # menu3> ul -webkit-transform: ruotare (21 gradi); / * webkit * / -moz-transform: ruota (21 gradi); / * firefox * / -o-transform: ruota (21deg); / * opera * / -ms-transform: ruota (-21deg); / * ie9 e versioni future * / transform: ruotare (-21deg); / * browser meno recenti * / left: 27px; margin-top: 16px; ul.menuBuild li # menu4> ul -webkit-transform: ruotare (32 gradi); / * webkit * / -moz-transform: rotazione (32 gradi); / * firefox * / -o-transform: ruota (32deg); / * opera * / -ms-transform: ruota (32 gradi); / * ie9 e versioni future * / transform: ruotare (32 gradi); / * browser meno recenti * / sinistro: 28px; margin-top: 27px;
Infine, possiamo aggiungere alcuni stili opzionali per rendere i caratteri sfumati e quindi nuovamente solidi quando si passa con il mouse sopra. Questo porterà ogni oggetto in primo piano per l'utente quando passa il mouse su di esso.
Questi stili non sono necessari per il funzionamento del menu, ma aggiungono alcuni effetti interessanti e aumentano la possibilità di utilizzo.
ul.menuBuild ul.submenu li a color: # 464646; / * il colore dei caratteri del sottomenu * / opacità: 0.65; / * Questo mescola il font con lo sfondo * / filter: alpha (opacity = 65); ul.menuBuild ul.submenu li a: hover opacity: 1.0; / * e questo riporta l'opacità del font al 100% * / filter: alpha (opacity = 100) ul.menuBuild li a / * per i collegamenti del menu principale * / color: # FFBE8F; blocco di visualizzazione; larghezza: 100%; ul.menuBuild li: hover> a color: #fff; border-left: double 5px # 880000; / * l'indicatore per quando un oggetto è posizionato sopra * / / * non usa display: block; * /
Se si desidera personalizzare ulteriormente ogni singolo sottomenu, è possibile utilizzare il seguente codice?
.sub1, .sub2, .sub3, .sub4
Dopo aver terminato l'ultima parte, dovresti avere qualcosa di simile? Ancora una volta se la tua non sembra l'immagine qui sotto non ti preoccupare, torna indietro e controlla il tuo codice.
Crediti: l'immagine centrale proviene dalla libreria delle risorse envato.
Bene, per IE possiamo usare CSSPIE in un foglio di stile separato. Non ci andrò molto perché anche con questa correzione IE non viene visualizzato correttamente. Se sei a conoscenza di una soluzione migliore, faccelo sapere nei commenti.
Usando il comportamento possiamo chiamare il file php csspie per dire a IE che gli stili CSS3 sono ok da usare. Quindi, ecco come funzionerà?
ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third, ul.menuBuild ul.submenu li.last, ul. menuBuild li> ul, ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu2> ul, ul.menuBuild li # menu3> ul, ul.menuBuild li # menu4> ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder, .completer, .completer2 comportamento: url (styles / csspie / PIE.php); / * CSS3 IE fix - Supporta 'border-radius', 'box-shadow', 'border-image', -pie-background ', liinear-gradients', 'RGBA' * /
Alcune altre correzioni di IE vanno così?
ul.menuBuild ul.submenu li filtro: alpha (opacity = 70); / * IE ha troppi problemi per l'opacità graduale, quindi useremo solo 70 per tutti i sottomenu * / .completer, .completer2 display: none; / * transform non funziona correttamente quindi nascondiamo solo i completatori * / .nav-holder border-bottom-style: none; altezza: 0px;
Quindi spero che vi sia piaciuto questo tutorial! Ricorda che il supporto per CSS3 è limitato e se vuoi la compatibilità tra tutti i browser che hai creato, ci sono altri modi per realizzare lo stesso compito, come l'utilizzo di immagini e alcuni javascript. Se desideri un tutorial sugli altri stili di menu, come utilizzare la versione javascript o solo come usare effetti CSS3 più fantastici, fammelo sapere nei commenti e io ne frusterò un po 'per te! Lascia i tuoi commenti e domande qui sotto ;)
Sii paziente e continua ad imparare e prima che tu lo sappia sarai un maestro in qualunque cosa tu faccia!
