Share
Det er ingen bedre måte å lære CSS3 enn å få hendene skitne på et faktisk prosjekt, og det er akkurat det vi skal gjøre. Jeg skal lære deg å lage en fantastisk, lagdelt CSS3-hjulmeny med noen nybegynnere til avanserte CSS-teknikker. Så ødelegge din favoritt tekstredigerer eller IDE og la oss komme i gang med noen CSS3 magi!
I dag lærer du hvordan du lager candy cane teardrop ut av de mange forskjellige stilene og fargevariasjonene som er tilgjengelige. Du vil motta alle variasjoner i kildefilene. Også som en tilleggsbonus har jeg lagt til en liten valgfri Javascript slik at du kan rotere bildene dine, avhengig av det svarte menyelementet. Kildefilen leveres selv med egen dokumentasjon!
Merk: Støtte for IE er begrenset for øyeblikket. Vi skal for det meste gå gjennom dette for å skape konvolutten med hva vi kan gjøre i CSS3? men som med alle ting på kanten av praktisk, betyr det å ofre litt stabilitet. Vi vil adressere IE emnet på slutten av opplæringen skjønt!
Vi tilbyr denne opplæringen i to forskjellige formater i dag: En video samt en full skriftlig opplæring nedenfor. Følg med hvilken metode du lærer du foretrekker (eller begge deler!) Og vi tar deg til slutten på kort tid!
Den trinnvise skriftlige opplæringen er under. Pass på at du også tar tak i den fullstendige nedlastbare kilden!
Det første vi ønsker å gjøre er å lage noen lag som vil overlappe hverandre og holde seg på plass mens du bruker så lite kode som mulig. Det er viktig å ikke fylle koden med mye oppblåsthet og ikke å lage mye
unødvendige flyter eller absolutt plasserte elementer, så vi vil prøve å holde seg relativt så mye som mulig.
Som du kan se er koden ganske rett frem. Vi har stort sett stablet et lag på toppen av en annen, og på den måten kan de holde posisjonene sine.
Deretter ønsker vi å legge til et bilde i midten av hjulet, eller teardrop i dette tilfellet. For å gjøre det vil vi ganske enkelt legge til følgende kode i mellom wrap4-klassen og kompleter-klassen. Dette vil låse bildet til midten av lerretet. Vi vil bare bruke et Rockable bilde for dette fordi de er kjempebra!
Accentsconagua
Nå vil vi legge til noen styling til hvert lag en etter en.
Dette vil være hovedbeholderen for hjulmenyen. Den inneholder også universelle skrifttyper og skriftstørrelser som påvirker alt som er inne i div.
# meny-wrap bakgrunn: # e7e7e7; / * Dette er ikke nødvendig * / høyde: 600px; / * Dette er viktig og holder hjulet på plass når du svinger over elementer * / font-family: sans-serif, Franklin Gothic Medium, Helvetica, Arial; / * Hvis du ikke bruker Franklin, går det automatisk til neste skrift i familien * / font-size: 14px; / * Oppretter global skriftstørrelse * / brevavstand: 1px! Viktig; / * Effektavstand mellom bokstaver for alle skrifttyper i hjulet * /
Vi fortsetter og sørger for at vårt senterbilde er riktig utformet ved å plassere det i midten av hjulet ved å bruke marginer, legge til noen dimensjoner og en kant.
# meny-wrap .orbit height: 210px; margin: 32px; / * Skyver bildene i displayet til midten * / posisjon: absolutt; bredde: 210px; # meny-wrap .orbit-frame border: 2px solid # 999; / * Oppretter en oppdeling mellom bildet og wrap5 * /
Alle wrappers: Vi vil lage noen stiler som gjelder for alle de viktigste wrappers ved å legge til en universell grense radius, setter dem alle i midten, legger til en relativ posisjon slik at alt forblir inneholdt og skyver dem ned for å få jevnt lagdelt effekt.
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder / * stiler alle hjulbeholdere * / -moz-grense-radius: 220px 0 200px 220px; / * firefox * / -webkit-grense-radius: 220px 0 200px 220px; / * webkit * / border-radius: 220px 0 200px 220px; / * opera * / margin: 0 auto; / * sentrerer alle pakkene i forhold til hverandre * / stilling: relativ! viktig; / * Ikke rør med mindre du vet hva du gjør * / topp: 20px;
Dette er ditt største lag som sitter bak alle de andre. Vi skal lage en gradient rød bakgrunn og bruke en solid rød tilbakebetaling for eldre browsere. Vi bruker også CSSpie for å fortelle IE at det er greit å bruke disse stilene. Etter at alt vi trenger å gjøre er å legge til en bredde og høyde, og du er ferdig. Du vil sørge for at bredden og høyden er større enn alle de andre lagene slik at den viser seg bak dem.
.wrap1 bakgrunn: # FF0000; / * gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # FF0000 0%, # 990000 100%); / * firefox * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # FF0000), fargestopp (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / bakgrunn: lineær gradient (topp, # FF0000 0%, # 990000 100%); / * fremtidige CSS3-nettlesere * / -pie-bakgrunn: lineær gradient (topp, # FF0000 0%, # 990000 100%); / * IE fikse ved hjelp av Pie * / høyde: 394px; bredde: 394px;
Nå for innpakning 2 skal vi gjøre nøyaktig samme ting, bare vi bruker variasjoner av hvitt som gradienten, og legger til en ytre og indre bokseskygge for å lage en liten skråvirkning pluss bakgrunnsskyggen. Da må vi gjøre bredden og høyden ca 40 px mindre enn hovedlaget for å gjøre det fint og jevnt.
.wrap2 bakgrunn: #FFFFFF; / * gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # FFFFFF), fargestopp (100%, # DCBE8F)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * ie * / bakgrunn: lineær gradient (topp, #FFFFFF 0%, # DCBE8F 100%); / * fremtidige CSS3-nettlesere * / -pie-bakgrunn: lineær gradient (topp, #FFFFFF 0%, # DCBE8F 100%); / * IE fikse ved hjelp av Pie * / høyde: 354px; bredde: 354px; -moz-box-skygge: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) innsett; -webkit-boks-skygge: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) innsett; boksskygge: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) innsett;
Vi vil nå gjenta prosessen for alle de andre pakkene som bruker forskjellige fargede gradienter og gjør hvert lag 40px mindre enn det siste.
.wrap3 bakgrunn: # FF0000; / * gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # FF0000 0%, # 990000 100%); / * firefox * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # FF0000), fargestopp (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / bakgrunn: lineær gradient (topp, # FF0000 0%, # 990000 100%); / * fremtidige CSS3-nettlesere * / -pie-bakgrunn: lineær gradient (topp, # FF0000 0%, # 990000 100%); / * IE fikse ved hjelp av Pie * / høyde: 314px; bredde: 314px; .wrap4 border: 2px solid # FF0000; bakgrunn: # 990000; / * gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 990000), fargestopp (55%, # CC0000) FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "# FF0000", GradientType = 0); / * ie * / bakgrunn: lineær gradient (topp, # 990000 0%, # CC0000 55%, # FF0000 57%); / * fremtidige CSS3-nettlesere * / -pie-bakgrunn: lineær gradient (topp, # 990000 0%, # CC0000 55%, # FF0000 57%); / * IE rett ved hjelp av Pie * / -moz-boks-skygge: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0.32) innstikk, 5px 5px 9px 6px rgba (221, 252, 116, 0.81) innsett; -boks-boks-skygge: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) innsett, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) innspill; boksskygge: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) innsett, 5px 5px 9px 6px rgba (221, 252, 116, 0.81) ; høyde: 274px; bredde: 274px;
Nå kan vi style wrap5 og navholderen som holder alle menyelementene på plass og for candycane-stilen, gjør vi det svart for å legge til en fin nøytral kontrast mens wrap5 blir hvit og vil fungere som beholder for senter bilde. Det vi gjør her er å kutte ut bakgrunnen slik at du kan se gjennom wrap5 og nav-holderen, slik at de andre lagene vises bak det, så vel som midtbildet. Etter at den er gjennomsiktig, legger vi en svart ramme til navholderen og en hvit kant til wrap5. Nav-holderens grense skal være skjult på høyre side (for undermenyene), doblet på venstre side (for hovedmenyene) og solid for resten, noe som skaper en fin og enkel effekt, mens du minimerer mengden lag vi har å legge til. Tradisjonelt med denne effekten kan du legge til opptil 5 eller 6 nye lag, dette sparer mye kode.
Denne gangen vil wrap5 bredde og høyde være 60px mindre enn de andre lagene for å gjøre det fint og til og med igjen. En annen 10px push øverst vil bidra til å justere laget og en indre boks skygge vil gi oss et fint perspektiv på avstanden mellom wrap5 og midtbildet.
Hvis du legger en topp på 0 til navholderen, justeres lagene automatisk med de andre. Vi vil også bruke en negativ margin for ytterligere venstrejustering og opprette en proporsjonal høyde / bredde slik at den passer pent på toppen av de andre lagene.
.wrap5 -moz-boks-skygge: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) innstikk, 5px 5px 5px 0 rgba (0, 0, 0, 0.75); -webkit-boks-skygge: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) innstikk, 5px 5px 5px 0 rgba (0, 0, 0, 0.75); boks-skygge: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) innsett, 5px 5px 5px 0 rgba (0, 0, 0, 0.75); grense: 20px solid #FFF; / * lager viklingen for å se bildet bak det * / høyde: 214px; topp: 10px; / * senter elementet * / bredde: 214px; .nav-holder background: none repeat scroll 0 0 transparent; border-farge: # 121212; / *** Grenseerklæringene brukes til å lage den endelige innpakningen, midt gjennom og skjuler den høyre grensen for å vise undermenyene * / border-style: solid skjult solid dobbel; kantbredde: 73px medium 73px 73px; høyde: 252px; margin: -92px; / * sentrer objektet på relative elementer * / topp: 0; bredde: 324px;
"Nav-holderens grense skal være skjult på høyre side (for undermenyene), doblet på venstre side (for hovedmenyene) og solid for resten, skape en fin og enkel effekt, mens du minimerer mengden lag vi har må legge til. "
Vel det var lett nok. Så etter at du har fullført alt dette, har du forhåpentligvis lært noe nytt for å legge til ferdighetssettet ditt allerede. Men dette er hva du skaper bør se ut så langt. Hvis det ikke ser slik ut, vennligst gå gjennom koden igjen og se om du kanskje har gått glipp av noe? ikke bekymre deg, det er nok noe veldig lite.
The Complete: Hmm? ser dette ufullstendig ut for deg? Vi trenger å slå det av med et par lag jeg har kalt completers slik at vi kan skjule deler av senterbildet og bringe navholderen lenger rundt de andre lagene, og skape en fin avrundet effekt og lukke den av.
Å gjøre det jeg nettopp nevnte er ganske enkelt. Vi kan gjøre det meste av stylingen gjelder for begge completers for mindre kode. La oss legge til en kantlinje på den ene siden for å lage en fin kurve, så bruker vi transformer for å justere kompleteren mellom wrap1 og wrap5. Å legge til vår bakgrunnsfarge er svært viktig, eller ingenting vil dukke opp. Vi må gjøre dette laget absolutt posisjonert og flytte det rundt til høyre og topp for å få det lined opp perfekt.
.completer1 vil ha en visning av ingen for denne teardrop stilen. På andre stilarter som hjulet har vi slettet den delen for å gjøre slik at den vises.
.kompleter2 har litt mer rotasjon, og vi må presse den litt ned for å gjøre den tilpasning.
.komplett, .completer2 / ** absolutte elementer for å skjule grensen til bilder ** / -moz-grense-radius: 0 120px 0 113px; / * firefox * / -webkit-grense-radius: 0 120px 0 113px; / * webkit * / border-radius: 0 120px 0 113px; / * opera * / -moz-transform: roter (-20deg); / * firefox * / -webkit-transform: roter (-21deg); / * webkit * / -o-transformer: roter (-20deg); / * opera * / -ms-transform: roter (-20deg); / * ie9 og fremtidige versjoner * / transform: roter (-20deg); / * Eldre nettlesere * / Bakgrunnsfarge: # 121212; bakgrunnsbilde: ingen; bakgrunnsposisjon: 0 0; bakgrunnsrepetisjon: gjenta; høyde: 135px; posisjon: absolutt; høyre: -24px; topp: -56px; bredde: 130px; .completer display: none; .completer2 -moz-transform: roter (110deg); / * firefox * / -webkit-transformer: roter (111deg); / * webkit * / -o-transformer: roter (110deg); / * opera * / -ms-transformer: roter (110deg); / * ie9 og fremtidige versjoner * / transform: roter (110deg); / * Eldre nettlesere * / topp: 195px;
Når du har lagt til fullførerne, bør du ha noe sånt? Igjen hvis du ikke har det samme som det du ser her, bare sjekk over koden din og se hva du savnet.
Nå har vi et flott sett med lag å jobbe med. De er alle inneholdt pent og har jevne CSS3-effekter, så la oss gå videre og få denne babyen til å jobbe!
Nå vil vi legge til navigasjonsforbindelser som ser ut som de bak forskjellige lag. På venstre side (i dobbeltgrensen) vil vi ha hovedmenyelementene og på høyre side (i det åpne rommet) vil vi at undermenyelementene skal vises etter at hovedelementet er svevet. Du vil bli overrasket over hvor lett dette er for å oppnå, så la oss grave inn.
Det er en svingblokk for å holde menyene aktive mens du passerer over hjulet med musen, og vi vil sørge for at dekker hele hjulet, slik at IE-kompatibilitet vil vi legge til en bakgrunn med en 0,01 opacitet ellers IE vant Jeg skjønner ikke at elementet er der selv.
Bruke margin-venstre: 76px sikrer at du har nok plass til å svinge over hovedmenyen og undermenyen så vel som kryss over hjulet uten noe forsvinning.
ul.menuBuild, ul.menuBuild ul bredde: 80px; / * angir størrelsen på menyblokkene * / bakgrunn: rgb (0, 0, 0); / * RGBa med 0,01 opacitet * / bakgrunn: rgba (0, 0, 0, 0,01); / * - en bg-farge må inkluderes for IE for å fungere skikkelig! * / polstring-venstre: 0px; / * stopper det vanlige innrykket fra ul * / margin-left: 76px; / * Opera 7-finalenes margin og margin-box-modell forårsaker problemer * /
Nå vil vi fjerne bulletpunkter fra hvert menyelement eller [li]. Vi vil også sørge for at de er i forhold til navholderen.
Du kan legge til en kantlinje for litt ekstra styling. Vi lager bakgrunnen en solid farge og flytter menyelementene til venstre slik at de knapt berører kantene på navholderen.
Polstring, tekstinntrykk og farge er for ekstra styling og er ikke nødvendig for at menyen skal fungere.
ul.menuBuild li liste-stil-type: none; / * fjerner punktpoengene * / posisjon: relativ; -webkit-grense-radius: 0px 20px 20px 0px; / * webkit nettlesere * / -moz-grense-radius: 0px 20px 20px 0px; / * firefox * / border-radius: 0px 20px 20px 0px; / * opera * / bakgrunn: ingen repetiser rull 0 0 # 464646; høyde: 14px; igjen: -177px; polstring: 8px; margin: 6px 0 0; bredde: 140 px; text-indent: 5px; / * Hvor langt teksten er fra venstre kant av menyen * / farge: #fff; / * setter standard skriftfarge til hvit * /
La oss nå legge til litt gradient til undermenyene og skyve den til høyre og støte det første undermenyelementet bare knapt til kanten av wrap5.
Hvis du legger til en bokseskygge, kan vi skape effekten av undermenyelementene under de respektive lagene.
ul.menuBuild ul.submenu li bakgrunn: # f2f2f2; / * gamle nettlesere * / bakgrunn: -moz-lineær-gradient (venstre, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / bakgrunn: -webkit-gradient (lineær, venstre topp, høyre topp, fargestopp (0%, # 565656), fargestopp (3%, # 666), fargestopp (14%, # FFF)); / * webkit * / bakgrunn: url (bg-image.png) no-repeat, lineær gradient (venstre, # 565656 0%, # 666 3%, #FFF 14%); / * fremtidige CSS3-nettlesere * / -pie-bakgrunn: url (bg-image.png) no-repeat, lineær gradient (venstre, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", GradientType = 1); * / / * dvs. * / farge: # 464646; stilling: i forhold; venstre: 296px; / * Dette er hvordan menyen ender på den andre siden av hjulet * / -webkit-boks-skygge: -2px 3px 12px -7px # 161616; / * webkit nettlesere * / boks-skygge: 16px 0 10px -8px # 464646 innsett; / * opera * / -moz-boks-skygge: -2px 3px 12px -7px # 161616; / * firefox * /
Hvis du legger marginer på hvert undermenyelement, vil vi skape mer separasjon og gi effekten av at hver av dem er under et annet lag.
Du kan også legge til en opasitet for hvert element for å gjøre det forsvinner fra topp til midten og fra bunn til midten der mellomelementet har full ugjennomtrengelighet.
ul.menuBuild ul.submenu li.first margin-left: -12px; opasitet: 0,70; ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third margin-left: -12px; opasitet: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; opasitet: 0,70;
Ok, så du har lagt til undermenyen, men den vises fortsatt uten at hovedmenyen blir svevet over. For å fikse dette må vi bare legge til et display ingen til [ul].
ul.menuBuild li> ul / * ved hjelp av> velgeren forhindrer mange mindre nettlesere (og IE - se nedenfor) gjemmer barn ULs * / display: none; / * gjør barn blokker sveve uten å gi plass til dem * / topp: -169px; posisjon: absolutt; høyre: -86px; color: # 565656; bredde: 160px; -webkit-grense-radius: 0 4px 4px 0; / * webkit * / -moz-grense-radius: 0 4px 4px 0; / * firefox * / border-radius: 0 4px 4px 0; / * opera * / polstring: 50px; høyde: 24px; bakgrunn: rgb (255, 255, 255); / * Fallback for nettlesere som ikke støtter RGBa * / bakgrunn: rgba (255, 255, 255, 0.00); / * RGBa med 0,01 opasitet * /
Så nå vises det ikke i det hele tatt! Ok, la oss gå videre og få det til å vise etter at hovedelementet er svevet over. Ved å bruke li: hover> ul kan vi fortelle at når en hovedmeny [li] svinger over, vil vi vise [ul] for den aktuelle undermenyen ved å bruke displayet: blokk.
ul.menuBuild li: hover> ul / * en av de viktigste erklæringene - nettleseren må oppdage svever over vilkårlig elementer,> målrettes kun barnet ul, ikke noe barn av dette barnet ul * / display: block; / * gjør barneblokken synlig - en av de viktigste erklæringene * / posisjon: absolutt; venstre: 0; bredde: 400 piksler; høyde: 200px;
For ren estetikk kan vi legge til en kantlinje, bokseskygge og bakgrunn. Det som er nødvendig er å skape høyde, bredde, absolutt posisjonering og toppmargin.
Toppmargenen gir oss mulighet til å trykke det første menyelementet ned til der vi ønsker det, da kan vi bruke mindre margin for å trykke ned resten av elementene.
ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4 -webkit-grense-radius: 20px 0 0 20px; / * webkit * / -moz-grense-radius: 20px 0 0 20px; / * firefox * / border-radius: 20px 0 0 20px; / * opera * / -webkit-boks-skygge: -2px 7px 8px -7px # 161616; / * webkit * / -moz-boks-skygge: -2px 7px 8px -7px # 161616; / * firefox * / box-shadow: -16px 0 8px -7px # 222222 innsett; / * opera * / bakgrunn: # F0000F; / * gamle nettlesere * / bakgrunn: -moz-lineær gradient (venstre, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / bakgrunn: -webkit-gradient (lineær, venstre topp, høyre topp, fargestopp (52%, # F0000F), fargestopp (60%, # CC0000), fargestopp (84% 990000), fargestopp (84%, # FFF), fargestopp (85%, # 464646), fargestopp (92%, # 363636), fargestopp (100%, # 121212)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * ie * / bakgrunn: lineær gradient (venstre, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * fremtidige CSS3-nettlesere * / -pie-bakgrunn: lineær gradient (venstre, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * IE fikse ved hjelp av Pie * / høyde: 18px; polstring: 8px; posisjon: absolutt; margin-topp: 100 piksler; bredde: 138px;
For de gjenværende 3 menypunktene skal vi legge til en toppmargin for hver for jevn mellomrom mellom dem og en margin igjen for å støte dem mot de forskjellige lagene.
Deretter må vi sørge for å legge til rotasjonen til hvert element, slik at vi godt kan passe menyen rundt rattet.
ul.menuBuild li # menu2 -webkit-transform: roter (-10deg); / * webkit * / -moz-transform: roter (-10deg); / * firefox * / -o-transform: roter (-10deg); / * opera * / -ms-transformer: roter (-10deg); / * ie9 og fremtidige versjoner * / transform: roter (-10deg); / * Eldre nettlesere * / Margin-topp: 141px; margin-left: 5 px; ul.menuBuild li # menu3 -webkit-transform: roter (-21deg); / * webkit * / -moz-transform: roter (-21deg); / * firefox * / -o-transform: roter (-21deg); / * opera * / -ms-transform: roter (-21deg); / * ie9 og fremtidige versjoner * / transform: roter (-21deg); / * Eldre nettlesere * / Margin-topp: 181px; margin-left: 18 piksler; ul.menuBuild li # menu4 -moz-transform: roter (-32deg); / * firefox * / -ms-transform: roter (-32deg); / * ie9 og fremtidige versjoner * / transform: roter (-32deg); / * eldre nettlesere * / -webkit-transformer: roter (-32deg); / * webkit * / -o-transform: roter (-32deg); / * opera * / margin-topp: 218px; margin-left: 38px;
Etter å ha tatt vare på hovedmenyelementene, skal vi gjøre det samme for undermenyen, bortsett fra i stedet for å gjøre menyelementene gå rundt hjulet, vil vi ha dem rett opp og ned. For å gjøre dette må vi kompensere for rotasjonen av hovedmenyen ved å legge til en rotasjon til hver undermeny.
Samme som hovedmenyen må vi legge til en toppmargin for å jevne ut avstanden mellom hver enkelt og skyve hvert undermenyelement til høyre slik at de er enda nærmere deres respektive lag.
ul.menuBuild li # menu1> ul margin-top: 0; venstre: 20px; ul.menuBuild li # menu2> ul -webkit-transform: roter (10deg); / * webkit * / -moz-transform: roter (10deg); / * firefox * / -o-transformer: roter (10deg); / * opera * / -ms-transformer: roter (-10deg); / * ie9 og fremtidige versjoner * / transform: roter (-10deg); / * Eldre nettlesere * / venstre: 24px; margin-topp: 6px; ul.menuBuild li # menu3> ul -webkit-transform: roter (21deg); / * webkit * / -moz-transform: roter (21deg); / * firefox * / -o-transformer: roter (21deg); / * opera * / -ms-transform: roter (-21deg); / * ie9 og fremtidige versjoner * / transform: roter (-21deg); / * Eldre nettlesere * / venstre: 27px; margin-topp: 16px; ul.menuBuild li # menu4> ul -webkit-transform: roter (32deg); / * webkit * / -moz-transform: roter (32deg); / * firefox * / -o-transform: roter (32deg); / * opera * / -ms-transformer: roter (32deg); / * ie9 og fremtidige versjoner * / transform: roter (32deg); / * Eldre nettlesere * / venstre: 28px; margin-topp: 27px;
Til slutt kan vi legge til noen valgfri styling for å få fonterene til å falle ut og så solid igjen når de svinger over. Dette vil bringe hvert element til fronten for brukeren når de svinger over den.
Disse stilene er ikke nødvendig for at menyen skal fungere, men de legger til noen fine effekter og øker usablility.
ul.menuBuild ul.submenu li a color: # 464646; / * fargen på undermenyfonter * / opacity: 0.65; / * Dette blander skrifttypen med bakgrunnen * / filter: alfa (opacity = 65); ul.menuBuild ul.submenu li a: svever opacity: 1.0; / * og dette bringer fontens opasitet tilbake til 100% * / filter: alfa (opacity = 100) ul.menuBuild li a / * for hovedmenylinkene * / farge: # FFBE8F; skjerm: blokk; bredde: 100%; ul.menuBuild li: svever> en farge: #fff; border-left: double 5px # 880000; / * indikatoren for når et element er svevet over * / / * ikke bruk skjerm: blokk; * /
Hvis du vil videreformidle hver enkelt undermeny, kan du bruke følgende kode?
.sub1, .ub2, .ub3, .ub4
Når du er ferdig med den siste delen, bør du ha noe sånt? Nok en gang hvis din ikke ser ut som bildet nedenfor, ikke bekymre deg, bare gå tilbake og sjekk koden din.
Kreditt: Senterbildet er fra envato-eiendomsbiblioteket.
Vel for IE kan vi bruke CSSPIE i et eget stilark. Jeg vil ikke gå inn i det mye fordi selv med denne reparasjonen, viser IE ikke riktig. Hvis du vet om en bedre løsning, vennligst gi meg beskjed i kommentarene.
Ved å bruke oppførsel kan vi ringe csspie php-filen for å fortelle IE at CSS3-stilene er ok å bruke. Så her er hvordan det vil fungere?
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, menyBuild 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 oppførsel: url (stiler / csspie / PIE.php); / * CSS3 IE-løsning - Støtter grense-radius, boks-skygge, grense-bilde, -pie-bakgrunn, liniære gradienter ',' RGBA '* /
Noen få andre IE-løsninger går slik?
ul.menuBuild ul.submenu li filter: alfa (opacity = 70); / * IE har for mange problemer for gradvis opasitet, så vi vil bare bruke 70 for alle undermenyer * / .completer, .completer2 display: none; / * transform fungerer ikke riktig, så vi vil bare gjemme completers * / .nav-holder border-bottom-style: none; høyde: 0 px;
Så jeg håper dere likte denne opplæringen! Husk at CSS3-støtten er begrenset, og hvis du vil ha kompatibilitet på tvers av alle nettlesere som er opprettet, er det andre måter å oppnå samme oppgave som å bruke bilder og noe javascript. Hvis du vil ha en opplæring i de andre menyformene, hvordan du bruker javascript-versjonen eller bare hvordan du bruker mer fantastiske CSS3-effekter, gi meg beskjed i kommentarene, og jeg pisker opp noe for deg! Legg igjen dine kommentarer og spørsmål nedenfor ;)
Vær tålmodig og fortsett å lære og før du vet det, vil du være en mester på hva du gjør!
