Share
Nu există o modalitate mai bună de a învăța CSS3 decât de a vă pune mâinile murdare pe un proiect real și exact asta vom face. Voi învăța cum să creați un meniu minunat, cu straturi CSS3, folosind câteva tehnici CSS avansate. Deci, rupe editorul de text preferat sau IDE și să începem pe unele magie CSS3!
Astăzi veți învăța cum să creați teardropul bastoanelor de bomboane din numeroasele stiluri și variante de culoare disponibile. Veți primi toate variantele în fișierele sursă. De asemenea, ca un bonus adăugat, am adăugat un pic de Javascript opțional, astfel încât să puteți roti imaginile în funcție de elementul de meniu plutind. Fișierul sursă vine chiar cu propria sa documentație!
Notă: Suportul pentru IE este limitat în acest moment. Vom trece mai mult prin asta pentru a împinge plicul cu ceea ce putem face în CSS3? dar ca și în cazul tuturor lucrurilor de la marginea practică, înseamnă sacrificarea unui pic de stabilitate. Vom aborda subiectul IE la sfârșitul tutorialului!
Vă oferim astăzi acest tutorial în două formate diferite: un videoclip și un tutorial complet scris de mai jos. Urmați, împreună cu oricare dintre metodele de învățare pe care le preferați (sau ambele!) Și vă vom duce la sfârșit în cel mai scurt timp!
Tutorialul scris pas cu pas este de mai jos. Asigurați-vă că ați apucat și sursa complet descărcabilă!
Primul lucru pe care vrem să-l facem este să creezi niște straturi care se vor suprapune unul pe celălalt și să rămână în poziție în timp ce folosește cât mai puțin cod posibil. Este important să nu umpleți codul cu o mulțime de umflături și să nu creați prea multe
flotoare inutile sau elemente absolute poziționate, așa că vom încerca să rămânem relativi cât mai mult posibil.
După cum puteți vedea codul este destul de drept înainte. În mod esențial, am așezat un strat peste celălalt și astfel vor putea să-și păstreze pozițiile.
Apoi vrem să adăugăm o imagine în centrul roții, sau în cazul în care teardrop în acest caz. Pentru aceasta, vom adăuga pur și simplu următorul cod între clasa wrap4 și clasa completă. Aceasta va bloca imaginea în centrul panzei. Vom folosi doar o imagine Rockable pentru aceasta deoarece sunt minunate!
Accentsconagua
Acum vom dori să adăugăm câte un stil la fiecare strat unul câte unul.
Acesta va fi containerul principal pentru meniul roților. Acesta conține, de asemenea, orice fonturi universale și mărimi ale fontului care afectează tot ce este în interiorul divului.
# menu-wrap fundal: # e7e7e7; / * Acest lucru nu este necesar * / înălțime: 600px; / * Acest lucru este important și menține roata în loc atunci când se hovering peste elemente * / font-family: sans-serif, Franklin Gothic Medium, Helvetica, Arial; / * Dacă nu folosiți Franklin, va merge automat la următorul font din familia * / font-size: 14px; / * Stabilește mărimea globală a fontului * / spațierea literelor: 1px! Important; / * Spațierea efectelor între litere pentru toate fonturile din roată * /
Vom continua să vă asigurați că imaginea noastră centrală este corect creată, așezându-o în centrul roții folosind margini, adăugând câteva dimensiuni acesteia și o margine.
# meniu-wrap .orbit înălțime: 210px; margine: 32 pixeli; / * Apasă imaginile de pe afișaj spre centru * / poziție: absolută; lățime: 210px; # meniu-wrap .orbit-cadru margine: 2px solid # 999; / * Creează o diviziune între imagine și wrap5 * /
Toate ambalajele: Vom crea câteva stiluri care se aplică tuturor agregatelor principale prin adăugarea unei raze universale de margine, așezându-le pe toate în centru, adăugând o poziție relativă astfel încât totul să rămână conținut și împingându-le în jos pentru a obține stratul uniform efect.
.wrapwrap2, wrap3, .wrap4, .wrap5, .nav-holder / * stiluri toate containerele roților * / -moz-border-radius: 220px 0 200px 220px; / * firefox * / -webkit-border-radius: 220px 0 200px 220px; / * webkit * / raza de graniță: 220px 0 200px 220px; / * opera * / marja: 0 auto; / * centrele toate ambalajele relative unul de altul * / poziție: relativ! important; / * Nu atinge decât dacă știi ce faci * / top: 20px;
Acesta este cel mai mare strat care se află în spatele tuturor celorlalte. Vom crea un fundal roșu cu gradient și vom folosi o rezervă roșie solidă pentru browerii mai în vârstă. De asemenea, vom folosi CSSpie pentru a spune IE că este bine să utilizați aceste stiluri. După asta, tot ce trebuie să faceți este să adăugați o lățime și o înălțime și ați terminat. Vreau să vă asigurați că lățimea și înălțimea sunt mai mari decât toate celelalte straturi, astfel încât să fie afișate în spatele lor.
.wrap1 fundal: # FF0000; / * browsere vechi * / fundal: -moz-linear-gradient (top, # FF0000 0%, # 990000 100%); / * firefox * / fundal: -webkit-gradient (liniar, stânga sus, fund stânga, oprire color (0%, # FF0000), stop color (100%, # 990000)); / * webkit * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "#FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / fundal: gradient linear (top, # FF0000 0%, # 990000 100%); / * viitoare browsere CSS3 * / -pie-background: gradient liniar (top, # FF0000 0%, # 990000 100%); / * IE fix folosind Pie * / height: 394px; lățime: 394px;
Acum, pentru ambalajele 2 vom face exact acelasi lucru, doar vom folosi variatii de alb ca gradient, si vom adauga o umbra interioara a cutiei pentru a crea un efect usor de infasurare plus umbra fundalului. Apoi trebuie să facem lățimea și înălțimea cu aproximativ 40 de pixeli mai mici decât stratul principal pentru a face frumos și uniform.
.wrap2 fundal: #FFFFFF; / * browsere vechi * / fundal: -moz-linear-gradient (top, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / background: -webkit-gradient (liniar, stânga sus, fund stânga, stop color (0%, # FFFFFF), oprire color (100%, # DCBE8F); / * webkit * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * ie * / fundal: gradient liniar (top, #FFFFFF 0%, # DCBE8F 100%); / * viitoare browsere CSS3 * / -cap-fundal: gradient liniar (top, #FFFFFF 0%, # DCBE8F 100%); / * IE fix folosind Pie * / height: 354px; lățime: 354px; -moz-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0.6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inset; -webkit-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0.6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inset; box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0.6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inset;
Vom repeta acum procesul pentru toate celelalte ambalaje utilizând gradiente diferite și făcând fiecare strat cu 40 de pixeli mai mic decât ultimul.
.wrap3 fundal: # FF0000; / * browsere vechi * / fundal: -moz-linear-gradient (top, # FF0000 0%, # 990000 100%); / * firefox * / fundal: -webkit-gradient (liniar, stânga sus, fund stânga, oprire color (0%, # FF0000), stop color (100%, # 990000)); / * webkit * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "#FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / fundal: gradient linear (top, # FF0000 0%, # 990000 100%); / * viitoare browsere CSS3 * / -pie-background: gradient liniar (top, # FF0000 0%, # 990000 100%); / * IE fix folosind Pie * / height: 314px; lățime: 314px; .wrap4 margine: 2px solid # FF0000; fundal: # 990000; / * browsere vechi * / fundal: -moz-linear-gradient (top, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / fundal: -webkit-gradient (liniar, stânga sus, jos stânga, oprire color (0%, # 990000) FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "#FF0000", GradientType = 0); / * ie * / fundal: gradient liniar (top, # 990000 0%, # CC0000 55%, # FF0000 57%); / * viitoare browsere CSS3 * / -pie-fundal: gradient linear (top, # 990000 0%, # CC0000 55%, # FF0000 57%); / * IE repara folosind Pie * / -moz-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba (221, 252, 116, 0,81); -webkit-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (221, 252, 116, 0,81) inset; box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba (221, 252, 116, 0.81) ; height: 274px; lățime: 274px;
Acum putem sa incheiem stilul wrap5 si suportul de nav care va pastra toate elementele de meniu si pentru stilul candycane, vom face negru pentru a adauga un contrast neutru frumos in timp ce wrap5 va fi alb si va servi ca container pentru imaginea centrului. Ceea ce facem aici este decuparea fundalului, astfel încât să puteți vedea prin folie și suportul de navă, făcând ca celelalte straturi să apară în spatele acestuia, precum și imaginea centrului. După ce ne-am făcut transparent, vom adăuga o margine neagră la suportul de navă și o margine albă pentru a împacheta. Bordul titularului de navetă trebuie să fie ascuns pe partea dreaptă (pentru submeniuri), dublat pe partea stângă (pentru meniurile principale) și solid pentru restul creând un efect frumos și ușor, minimizând cantitatea de straturi pe care le avem a adauga. În mod tradițional, cu acest efect puteți adăuga până la 5 sau 6 straturi noi, ceea ce economisește multă cod.
De această dată, lățimea și înălțimea înfășurării vor fi cu 60 de pixeli mai mici decât celelalte straturi pentru a le face frumos și chiar din nou. O altă apăsare de 10 pixeli în partea de sus va ajuta la alinierea stratului și o umbră a cutiei interioare ne va oferi o perspectivă frumoasă a distanței dintre ambalaj5 și imaginea centrală.
Adăugarea unui vârf de 0 la suportul de navigare va alinia automat straturile cu celelalte. De asemenea, vom folosi o marjă negativă pentru alinierea suplimentară de sus în stânga și pentru a crea o înălțime / lățime proporțională pentru a se potrivi frumos în partea de sus a celorlalte straturi.
.wrap5 -moz-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba (0, 0, 0, 0.75); -webkit-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) inset, 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); frontieră: 20px solid #FFF; / * creează folia pentru a vedea imaginea din spatele ei * / height: 214px; top: 10px; / * centrul elementului * / lățimea: 214px; .nav-titular fundal: niciun repetare defila 0 0 transparent; culoarea frontală: # 121212; / *** Declarațiile de frontieră sunt folosite pentru a crea ambalajele finale, pentru a vedea prin mijloc și a ascunde marginea dreaptă pentru a afișa submeniurile * / stil de frontieră: solid masiv dublu solid ascuns; margine latime: 73px mediu 73px 73px; înălțime: 252px; margine: -92px; / * centrele obiectului pe elementele relative * / top: 0; lățime: 324px;
"Marginea portului de susținere trebuie să fie ascunsă pe partea dreaptă (pentru submeniuri), dublată pe partea stângă (pentru meniurile principale) și solidă pentru restul creând un efect frumos și ușor, reducând în același timp cantitatea de straturi pe care noi trebuie să adăugați. "
Ei bine, a fost destul de ușor. Deci, după ce ați terminat toate acestea, sperăm că ați învățat ceva nou pentru a vă adăuga deja setul de abilități. Totuși, aceasta este ceea ce creați ar trebui să arate până acum. Dacă nu arata așa, vă rog să treceți din nou codul și să vedeți dacă ați pierdut ceva? nu-ți face griji, este probabil ceva foarte minor.
Finalizatorii: Hmm? arata acest lucru incomplet pentru tine? Trebuie să o punem în top cu câteva straturi pe care le-am numit completoși, astfel încât să putem ascunde părți din imaginea centrului și să aducem suportul de navă mai departe în jurul celorlalte straturi, creând un efect rotunjit și închizându-l.
A face ceea ce tocmai am menționat este destul de simplu. Putem face cea mai mare parte a stilului se aplică ambelor completatori pentru mai puțin cod. Să adăugăm o rază de margine la o parte pentru a face o curbă frumoasă, apoi vom folosi transforma pentru a alinia completele între wrap1 și wrap5. Adăugarea culorii de fundal este foarte importantă sau nu va apărea nimic. Trebuie să facem acest strat absolut poziționat și să îl deplasăm în dreapta și în partea de sus pentru a-l alinia perfect.
.completer1 va avea un display de nici unul pentru acest stil de lacrimă. Pe alte stiluri, cum ar fi roata, am șters acea parte pentru ca aceasta să fie afișată.
.completer2 are o rotație mai mică și trebuie să-l împingem puțin pentru ao face în formă.
.completă, .completer2 / ** elemente absolute pentru a ascunde marginea imaginilor ** / -moz-border-radius: 0 120px 0 113px; / * firefox * / -webkit-border-radius: 0 120px 0 113px; / * webkit * / raza de graniță: 0 120px 0 113px; / * opera * / -moz-transform: roti (-20deg); / * firefox * / -webkit-transform: rotiți (-21deg); / * webkit * / -o-transform: rotire (-20deg); / * opera * / -ms-transform: rotire (-20deg); / * ie9 și versiunile viitoare * / transform: rotate (-20deg); / * browsere mai vechi * / background-color: # 121212; fundal-imagine: nici unul; pozitie pozitie: 0 0; background-repeat: repetați; înălțime: 135px; poziția: absolută; drept: -24px; top: -56px; lățime: 130px; .complet display: none; .complet2 -moz-transform: rotire (110deg); / * firefox * / -webkit-transform: rotiți (111deg); / * webkit * / -o-transform: rotire (110deg); / * opera * / -ms-transform: rotire (110deg); / * ie9 și versiunile viitoare * / transform: rotate (110deg); / * browsere mai vechi * / top: 195px;
După ce ați adăugat completarea, atunci ar trebui să aveți ceva de genul asta? Din nou, dacă nu aveți același lucru cu ceea ce vedeți aici, verificați codul și vedeți ce ați pierdut.
Acum avem un set mare de straturi pentru a lucra cu. Toate acestea sunt conținute frumos și au efecte CSS3 netede, așa că hai să mergem mai departe și să facem acest copil să funcționeze!
Acum, dorim să adăugăm linkuri de navigare care arată că se află în spatele unor straturi diferite. În partea stângă (în marginea dublă) vrem elementele din meniul principal, iar în partea dreaptă (în spațiul deschis) dorim ca elementele submeniului să apară după ce un element principal este plutind. Veți fi surprins de cât de ușor este de făcut acest lucru, așa că să ne grăbim.
Există un bloc de hover pentru a menține meniurile active pe măsură ce treci peste roată cu mouse-ul și vrem să ne asigurăm că acoperă întreaga roată, așa că de dragul compatibilității IE vom adăuga un fundal cu o opacitate de 0,01 altfel IE a câștigat Nu recunoaștem că elementul este chiar acolo.
Folosind marginea stânga: 76px vă asigură că aveți suficient spațiu pentru a vă deplasa pe meniul principal și submeniul, precum și pentru a trece peste roată fără să dispară nimic.
ul.menuBuild, ul.menuBuild ul lățime: 80px; / * stabilește dimensiunea blocurilor de meniu * / background: rgb (0, 0, 0); / * RGBa cu 0,01 opacitate * / fundal: rgba (0, 0, 0, 0,01); / * - o bg-color TREBUIE inclusă pentru ca IE să funcționeze corect! * / padding-left: 0px; / * oprește linia obișnuită de la ul * / margin-left: 76px; / * Marja de margine și marginea-box a lui Opera 7 provoacă probleme * /
Acum, dorim să eliminăm punctele glonțului din fiecare element de meniu sau [li]. De asemenea, dorim să ne asigurăm că sunt relativi la titularul nav.
Puteți adăuga o rază de margine pentru un mic stil suplimentar. Vom face fundalul o culoare solidă și vom deplasa elementele de meniu în stânga, astfel încât acestea vor atinge abia marginile suportului de navă.
Plăcuțele, textul-indent și culoarea sunt pentru stilul suplimentar și nu sunt necesare pentru ca meniul să funcționeze.
ul.menuBuild li list-style-type: none; / * elimină punctele de glonț * / poziție: relativă; -webkit-border-radius: 0px 20px 20px 0px; / * browsere webkit * / -moz-border-radius: 0px 20px 20px 0px; / * firefox * / border-radius: 0px 20px 20px 0px; / * opera * / fundal: nu se repetă defilați 0 0 # 464646; înălțime: 14px; stânga: -177px; padding: 8px; margine: 6px 0 0; lățime: 140px; text-liniuță: 5px; / * Cât de departe este textul din marginea din stânga a meniului * / color: #fff; / * setează culoarea implicită a fontului la alb * /
Acum, să adăugăm un pic de gradient submeniurilor și să-l împingem spre dreapta și să batem primul element de submeniu abia la marginea wrap5.
Adăugarea unei umbre în cutie ne va ajuta să creăm efectul elementelor submeniului aflate sub straturile lor respective.
ul.menuBuild ul.submenu li fundal: # f2f2f2; / * browsere vechi * / fundal: -moz-linear-gradient (stânga, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / fundal: -webkit-gradient (colorare-stop (0%, # 565656) FFF)); / * webkit * / background: url (bg-image.png) fără repetare, gradient linear (stânga, # 565656 0%, # 666 3%, #FFF 14%); / * viitoare browsere CSS3 * / -pie-background: url (bg-image.png) fără repetare, gradient linear (stânga, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", GradientType = 1); Poziția: relativă; stânga: 296px; / * Acesta este modul în care meniul se termină de cealaltă parte a roții * / -webkit-box-shadow: -2px 3px 12px -7px # 161616; / * browsere webkit * / box-shadow: 16px 0 10px -8px # 464646 inset; / * opera * / -moz-box-shadow: -2px 3px 12px -7px # 161616; / * firefox * /
Punerea marjelor pe fiecare element de submeniu ne va permite să creăm mai multă separare și să dăm efectul fiecăruia sub un strat diferit.
De asemenea, puteți adăuga o opacitate pentru fiecare element pentru a face să se estompeze de la vârf la mijloc și de jos până la mijloc în cazul în care elementul de mijloc are opacitate completă.
ul.menuBuild ul.submenu li.first margin-left: -12px; opacitate: 0,70; ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third margin-left: -12px; opacitate: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; opacitate: 0,70;
Ok, așa că ați adăugat submeniul dvs., dar este încă afișat fără ca un meniu principal să fie suspendat. Pentru a repara acest lucru trebuie să adăugăm pur și simplu un afișaj nici unul la [ul].
ul.menuBuild li> ul / * folosind selectorul> previne mai multe browsere mai puțin (și IE - vezi mai jos) ascunzând UL-uri pentru copii * / display: none; / * face copii blocuri hover fără a lăsa spațiu pentru ei * / sus: -169px; poziția: absolută; dreapta: -86px; culoare: # 565656; lățime: 160px; -webkit-border-radius: 0 4px 4px 0; / * webkit * / -moz-border-radius: 0 4px 4px 0; / * firefox * / raza de graniță: 0 4px 4px 0; / * opera * / padding: 50px; înălțime: 24px; fundal: rgb (255, 255, 255); / * Fallback pentru browserele web care nu acceptă RGBa * / background: rgba (255, 255, 255, 0.00); / * RGBa cu 0,01 opacitate * /
Deci acum nu apare deloc! Bine, să mergem mai departe și să facem afișarea după ce un element principal este suspendat. Folosind li: hover> ul putem afirma că atunci când un meniu principal [li] este suspendat peste atunci vom arăta [ul] pentru submeniul corespunzător folosind ecranul: bloc.
ul.menuBuild li: hover> ul / * una dintre cele mai importante declarații - browserul trebuie să detecteze plasarea pe elementele arbitrare, ținte numai ul ul copil, nu orice ul ul copilului acelui copil ul * / display: block; / * face blocul vizibil al copilului - una dintre cele mai importante declarații * / poziție: absolută; stânga: 0; lățime: 400px; height: 200px;
Pentru estetica pură putem adăuga o rază de graniță, umbra cutiei și fundal. Este necesar să creați înălțimea, lățimea, poziția absolută și marginea superioară.
Marginea superioară ne permite să împingem primul element de meniu în jos spre locul unde îl dorim, apoi putem folosi mai puțin marjă pentru a împinge restul elementelor.
ul.menuBuild li # meniu1, ul.menuBuild li # meniu2, ul.menuBuild li # meniu3, ul.menuBuild li # meniu4 -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 inset; / * opera * / fundal: # F0000F; / * browsere vechi * / background: -moz-linear-gradient (stânga, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / fundal: -webkit-gradient (linii, stânga sus, dreapta sus, oprire color (52%, # F0000F) 990000), oprire color (84%, # FFF), stop color (85%, # 464646), oprire color (92%, # 363636), oprire color (100%, # 121212); / * webkit * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * ie * / fundal: gradient linear (stânga, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * viitoare browsere CSS3 * / -pie-fundal: gradient linear (stânga, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * IE fix folosind Pie * / height: 18px; padding: 8px; poziția: absolută; margin-top: 100px; lățime: 138px;
Pentru restul celor 3 elemente de meniu, vom adăuga o marjă de sus la fiecare pentru a distanța paralelă între ele și o marjă rămasă pentru a le împinge împotriva diferitelor straturi.
Apoi trebuie să vă asigurați că adăugați rotația la fiecare element, astfel încât să putem personaliza frumos meniul din jurul roții.
ul.menuBuild li # meniu2 -webkit-transform: rotire (-10deg); / * webkit * / -moz-transform: rotire (-10deg); / * firefox * / -o-transform: rotire (-10deg); / * opera * / -ms-transform: rotire (-10deg); / * ie9 și versiunile viitoare * / transform: rotate (-10deg); / * browsere mai vechi * / margin-top: 141px; margin-left: 5px; ul.menuBuild li # meniu3 -webkit-transform: rotate (-21deg); / * webkit * / -moz-transform: roti (-21deg); / * firefox * / -o-transform: rotire (-21deg); / * opera * / -ms-transform: rotire (-21deg); / * ie9 și versiunile viitoare * / transform: rotate (-21deg); / * browsere mai vechi * / margin-top: 181px; margin-left: 18px; ul.menuBuild li # meniu4 -moz-transform: rotate (-32deg); / * firefox * / -ms-transform: rotire (-32deg); / * ie9 și versiunile viitoare * / transform: rotate (-32deg); / * browsere mai vechi * / -webkit-transform: rotate (-32deg); / * webkit * / -o-transform: rotire (-32deg); / * opera * / margin-top: 218px; margin-left: 38px;
După ce ați avut grijă de elementele de meniu principale, vom face același lucru și pentru submeniu, cu excepția faptului că, în loc de a face ca elementele de meniu să meargă în jurul roții, dorim ca acestea să fie drepte în sus și în jos. Pentru a face acest lucru trebuie să compensăm rotația meniului principal prin adăugarea unei rotații la fiecare submeniu.
La fel ca și meniul principal, trebuie să adăugăm o margine superioară pentru a elimina spațiul dintre fiecare și pentru a împinge fiecare element de submeniu spre dreapta, astfel încât acestea să fie chiar mai aproape de straturile lor respective.
ul.menuBuild li # meniu1> ul margin-top: 0; stânga: 20px; ul.menuBuild li # meniu2> ul -webkit-transform: rotire (10deg); / * webkit * / -moz-transform: rotiți (10deg); / * firefox * / -o-transform: rotiți (10deg); / * opera * / -ms-transform: rotire (-10deg); / * ie9 și versiunile viitoare * / transform: rotate (-10deg); / * browsere mai vechi * / stânga: 24px; margin-top: 6px; ul.menuBuild li # meniu3> ul -webkit-transform: rotate (21deg); / * webkit * / -moz-transform: rotiți (21deg); / * firefox * / -o-transform: rotire (21deg); / * opera * / -ms-transform: rotire (-21deg); / * ie9 și versiunile viitoare * / transform: rotate (-21deg); / * browsere mai vechi * / stânga: 27px; margin-top: 16px; ul.menuBuild li # meniu4> ul -webkit-transform: rotate (32deg); / * webkit * / -moz-transform: rotiți (32deg); / * firefox * / -o-transform: rotiți (32deg); / * operă * / -ms-transform: rotire (32deg); / * ie9 și versiunile viitoare * / transform: rotate (32deg); / * browsere mai vechi * / stânga: 28px; margin-top: 27px;
În cele din urmă, putem adăuga un anumit stil opțional pentru a face ca fonturile să dispară și apoi să fie din nou solide atunci când se deplasează. Acest lucru va aduce fiecare element în față pentru utilizator atunci când acesta va trece peste el.
Aceste stiluri nu sunt necesare pentru ca meniul să funcționeze, dar ele adaugă unele efecte drăguțe și măresc utilitatea.
ul.menuBuild ul.submenu li a culoare: # 464646; / * culoarea submeniului fonturilor * / opacitate: 0.65; / * Aceasta îmbină fontul cu fundalul * / filter: alpha (opacity = 65); ul.menuBuild ul.submenu li a: hover opacitate: 1.0; / * si acest lucru aduce opacitatea fontului inapoi la 100% * / filter: alfa (opacity = 100) ul.menuBuild li a / * pentru link-urile din meniul principal * / color: # FFBE8F; afișare: bloc; lățime: 100%; ul.menuBuild li: hover> a culoare: #fff; frontieră-stânga: dublu 5px # 880000; / * indicatorul pentru momentul în care un element este plutind peste * / / * nu folosesc afișarea: bloc; * /
Dacă doriți să modelați în continuare fiecare submeniu individual, puteți utiliza următorul cod?
.sub1, .sub3, .sub4
După ce ați terminat ultima parte, ar trebui să aveți ceva de genul asta? Încă o dată, dacă dvs. nu arata ca imaginea de mai jos nu vă faceți griji, doar du-te înapoi și verificați codul.
Credite: Imaginea centrului este din biblioteca de active envato.
Ei bine, pentru IE putem folosi CSSPIE într-o foaie de stiluri separate. Nu voi intra prea mult pentru că, chiar și cu acest IE fix nu se afișează corect. Dacă știți despre o soluție mai bună, vă rog să-mi spuneți în comentarii.
Folosind comportamentul putem apela fișierul csspie php pentru a spune IE că stilurile CSS3 sunt ok pentru utilizare. Deci, iată cum va funcționa?
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 # meniu1, ul.menuBuild li # meniu2, ul.menuBuild li # meniu3, ul.menuBuild li # meniu4, ul.menuBuild li # meniu1, ul.menuBuild li # menu2, ul.menuBuild li # meniu3, ul.menuBuild li # meniu4, ul.menuBuild li # meniu2, ul.menuBuild li # menu3, ul.menuBuild li # meniu4, ul.menuBuild li # menu2> ul, ul.menuBuild li # menu3> ul, ul.menuBuild li # meniu4> ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder, .completer, .completer2 comportament: url (stiluri / csspie / PIE.php); / * CSS3 IE fix - susține "raza de graniță", "cutie-umbra", "frontieră-imagine", "fundal", gradienți liinear, "RGBA"
Câteva alte soluții IE merg așa?
ul.menuBuild ul.submenu li filtru: alfa (opacity = 70); / * IE are prea multe probleme pentru opacitatea treptată, așa că vom folosi doar 70 pentru toate submeniunile * / .complet, .completer2 display: none; / * transformare nu funcționează corect, așa că vom ascunde completă * / .nav-holder border-bottom-style: none; înălțime: 0px;
Deci, sper că v-ați bucurat de acest tutorial! Amintiți-vă că suportul CSS3 este limitat și dacă doriți compatibilitate în toate browserele create vreodată, există și alte modalități de a realiza aceeași sarcină ca utilizarea imaginilor și a unor javascript. Dacă doriți un tutorial pe celelalte stiluri de meniu, cum să utilizați versiunea javascript sau cum să utilizați mai multe efecte minunate de CSS3, spuneți-mi în comentariile și vă voi bate unele pentru tine! Lasă-ți comentariile și întrebările de mai jos ;)
Fii răbdător și continuă să înveți și înainte să știi că vei fi stăpân la ceea ce faci!
