Share
Det finns inget bättre sätt att lära CSS3 än att få dina händer smutsiga på ett verkligt projekt och det är precis vad vi ska göra. Jag ska lära dig hur man skapar en fantastisk, lagrad CSS3-hjulmeny med några nybörjare till avancerade CSS-tekniker. Så bryta ut din favorit textredigerare eller IDE och låt oss börja på några CSS3-magiker!
Idag lär du dig hur man skapar sockerrörsdragen ur de många olika stilar och färgvarianter som finns tillgängliga. Du kommer att få alla variationer i källfilerna. Också som en tilläggsbonus har jag lagt till en liten valfri valfri Javascript så att du kan rotera dina bilder beroende på det svängda menyalternativet. Källfilen kommer även med egen dokumentation!
Obs! Stöd för IE är begränsat just nu. Vi kommer för det mesta att gå igenom detta för att driva kuvertet med vad vi kan göra i CSS3? men som med alla saker i praktiken innebär det att offra lite stabilitet. Vi kommer att ta upp IE-ämnet i slutet av handledningen!
Vi erbjuder denna handledning i två olika format idag: En video samt en fullständig skriftlig handledning nedan. Följ med vilken inlärningsmetod du föredrar (eller båda!) Och vi tar dig till slutet på nolltid!
Den stegvisa skriftliga handledningen finns nedan. Var noga med att ta tag i hela nedladdningsbara källan också!
Det första vi vill göra är att skapa några lager som överlappar varandra och stanna kvar samtidigt som du använder så lite kod som möjligt. Det är viktigt att du inte fyller din kod med mycket uppblåsthet och inte att skapa mycket
onödiga floats eller absolut positionerade element, så vi ska försöka hålla sig relativt lika mycket som möjligt.
Som du kan se är koden ganska rakt framåt. Vi har väsentligen staplat ett lager ovanpå ett annat och så kan de hålla sina positioner.
Därefter vill vi lägga till en bild i mitten av hjulet eller tårar i det här fallet. För att göra så lägger vi helt enkelt till följande kod mellan wrap4-klassen och kompletterklassen. Detta låser bilden i mitten av duken. Vi använder bara en klippbar bild för den här eftersom de är fantastiska!
Accentsconagua
Nu vill vi lägga till en styling till varje lager en efter en.
Detta blir huvudbehållaren för din hjulmeny. Den innehåller också några universella teckensnitt och teckenstorlekar som påverkar allt som är inuti div.
# menyfält bakgrund: # e7e7e7; / * Detta behövs inte * / höjd: 600px; / * Detta är viktigt och håller hjulet på plats när du svävar över element * / font-family: sans-serif, Franklin Gothic Medium, Helvetica, Arial; / * Om du inte använder Franklin, går det automatiskt till nästa teckensnitt i familjen * / font-size: 14px; / * Fastställer den globala teckensnittstypen * / bokstavsavstånd: 1px! Viktigt; / * Effektavstånd mellan bokstäverna för alla teckensnitt i hjulet * /
Vi ska fortsätta och se till att vår mittbild är formaterad korrekt genom att placera den i mitten av hjulet med hjälp av marginaler, lägga till några dimensioner och en kant.
# meny-wrap. orbit height: 210px; marginal: 32px; / * Tryck bilden i displayen till mitten * / position: absolut; bredd: 210px; # menyfältet. orbit-frame border: 2px solid # 999; / * Skapar en uppdelning mellan bilden och wrap5 * /
Alla wrappers: Vi vill skapa några stilar som gäller för alla huvudkorgar genom att lägga till en universalradiusradie, sätta dem alla i mitten, lägga till en relativ position så att allt stannar kvar och trycka ner dem för att få jämnlagad effekt.
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-hållare / * stilar alla hjulbehållare * / -moz-gränsen-radien: 220px 0 200px 220px; / * firefox * / -webkit-gräns-radie: 220px 0 200px 220px; / * webkit * / border-radius: 220px 0 200px 220px; / * opera * / marginal: 0 auto; / * centrerar alla omslag i förhållande till varandra * / position: relativ! viktigt; / * Rör inte om du inte vet vad du gör * / topp: 20px;
Detta är ditt största lager som ligger bakom alla andra. Vi kommer att skapa en gradient röd bakgrund och använda en solid röd fallback för äldre browsers. Vi använder också CSSpie för att berätta för IE att det är okej att använda dessa stilar. Därefter behöver vi bara lägga till bredd och höjd och du är klar. Du vill se till att bredden och höjden är större än alla andra lager så att den syns bakom dem.
.wrap1 background: # FF0000; / * gamla webbläsare * / bakgrund: -moz-linjär-gradient (topp, # FF0000 0%, # 990000 100%); / * firefox * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # FF0000), färgstopp (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * dvs * / bakgrund: linjär gradient (topp, # FF0000 0%, # 990000 100%); / * framtida CSS3-webbläsare * / -pie-bakgrund: Linjärgradient (topp, # FF0000 0%, # 990000 100%); / * IE fixa med Pie * / höjd: 394px; bredd: 394px;
Nu för wrap 2 kommer vi att göra exakt samma sak, vi använder bara variationer av vitt som gradienten och lägger till en yttre och inre boxskugga för att skapa en liten avskärningseffekt plus bakgrundsskuggan. Då måste vi göra bredden och höjden ca 40px mindre än huvudskiktet för att göra det fint och jämnt.
.wrap2 background: #FFFFFF; / * gamla webbläsare * / bakgrund: -moz-linjär-gradient (topp, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / background: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # FFFFFF), färgstopp (100%, # DCBE8F)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * dvs * / bakgrund: linjär gradient (topp, #FFFFFF 0%, # DCBE8F 100%); / * framtida CSS3-webbläsare * / -pie-bakgrund: Linjärgradient (topp, #FFFFFF 0%, # DCBE8F 100%); / * IE fix med Pie * / höjd: 354px; bredd: 354px; -moz-box-skugga: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inset; -webkit-box-skugga: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inset; boxskugga: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inset;
Vi kommer nu att upprepa processen för alla andra wrappers med olika färgade gradienter och göra varje lager 40px mindre än det sista.
.wrap3 bakgrund: # FF0000; / * gamla webbläsare * / bakgrund: -moz-linjär-gradient (topp, # FF0000 0%, # 990000 100%); / * firefox * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # FF0000), färgstopp (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * dvs * / bakgrund: linjär gradient (topp, # FF0000 0%, # 990000 100%); / * framtida CSS3-webbläsare * / -pie-bakgrund: Linjärgradient (topp, # FF0000 0%, # 990000 100%); / * IE fix med Pie * / höjd: 314px; bredd: 314px; .wrap4 border: 2px solid # FF0000; bakgrund: # 990000; / * gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 990000), färgstopp (55%, # CC0000), färgstopp (57% FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "# FF0000", GradientType = 0); / * dvs * / bakgrund: linjär gradient (topp, # 990000 0%, # CC0000 55%, # FF0000 57%); / * framtida CSS3-webbläsare * / -pie-bakgrund: Linjärgradient (topp, # 990000 0%, # CC0000 55%, # FF0000 57%); / * IE fixa med Pie * / -moz-box-skugga: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inmatning, 5px 5px 9px 6px rgba (221, 252, 116, 0.81) insats; -kod-skugg: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inmatning, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) inset; box-skugga: 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) ; höjd: 274px; bredd: 274px;
Nu kan vi sticka wrap5 och nav-hållaren som håller alla menyalternativ på plats och för candycane-stilen, gör vi det svarta för att lägga till en fin neutral kontrast medan wrap5 blir vit och kommer att fungera som behållare för mittbild. Vad vi gör här skär ut bakgrunden så att du kan se igenom wrap5 och nav-hållaren, vilket gör att de andra lagren syns bakom det, såväl som i mittbilden. Efter att ha gjort det genomskinligt lägger vi en svart ram till navhållaren och en vit kant till wrap5. Nav-hållarens gräns ska döljas på höger sida (för undermenyerna), fördubblats på vänster sida (för huvudmenyerna) och solid för resten skapar en fin och enkel effekt samtidigt som man minskar mängden lager vi har tillägga. Traditionellt med denna effekt kan du lägga till upp till 5 eller 6 nya lager, vilket sparar mycket kod.
Den här gången kommer wrap5 bredden och höjden vara 60px mindre än de andra lagren för att göra det trevligt och till och med igen. En annan 10 px tryck på toppen hjälper till att justera skiktet och en innerbox skugga ger oss ett fint perspektiv på avståndet mellan wrap5 och mittbilden.
Lägga till en topp på 0 till navhållaren justerar automatiskt lagren med de andra. Vi använder också en negativ marginal för ytterligare vänsterjustering och skapar en proportionell höjd / bredd så att den passar snyggt ovanpå de andra lagren.
.wrap5 -moz-box-skugga: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); -webkit-box-skugga: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); boxskugga: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); gräns: 20px solid #FFF; / * skapar omslaget för att se bilden bakom den * / höjd: 214px; topp: 10px; / * centrera elementet * / bredd: 214px; .nav-hållare bakgrund: ingen upprepa bläddra 0 0 transparent; border-color: # 121212; / *** Gränsdeklarationerna används för att skapa det slutliga omslaget, mitten genom och döljer den högra gränsen för att visa undermenyerna * / gränsstil: solid, dold, solid dubbel; kantbredd: 73px medium 73px 73px; höjd: 252px; marginal: -92px; / * centrerar objektet på relativa element * / topp: 0; bredd: 324px;
"Nav-hållarens gräns ska döljas på höger sida (för undermenyerna), fördubblats på vänster sida (för huvudmenyerna) och solid för resten skapar en fin och enkel effekt samtidigt som vi minskar mängden lager vi måste lägga till. "
Jo det var lätt nog. Så när du har avslutat allt detta har du förhoppningsvis lärt dig något nytt att lägga till i din färdighetssättning redan. Men det här är vad du skapar ska se ut så långt. Om det inte ser ut så här, vänligen gå igenom koden igen och se om du kanske har missat något? oroa dig inte, det är förmodligen något väldigt litet.
The Completers: Hmm? ser det här ofullständigt ut för dig? Vi måste klara av det med ett par lager som jag kallat kompletterar så att vi kan gömma delar av mittbilden och föra navhållaren längre runt de andra lagren och skapa en fin avrundad effekt och stänga av.
Att göra det jag just nämnde är ganska enkelt. Vi kan göra det mesta av styling gäller både completers för mindre kod. Låt oss lägga till en radie på ena sidan för att göra en fin kurva, då använder vi transformer för att anpassa kompletteraren mellan wrap1 och wrap5. Att lägga till vår bakgrundsfärg är väldigt viktig eller ingenting kommer att dyka upp. Vi måste göra det här laget absolut placerat och flytta det runt till höger och överst för att få det lined perfekt.
.completer1 kommer att ha en display av ingen för denna teardrop stil. På andra stilar som hjulet har vi raderat den delen så att den visas.
.completer2 har lite mer rotation och vi måste trycka ner det lite för att passa det.
.completer, .completer2 / ** absoluta element för att dölja gränsen för bilder ** / -moz-border-radius: 0 120px 0 113px; / * firefox * / -webkit-gränsen-radien: 0 120px 0 113px; / * webkit * / gränslinje: 0 120px 0 113px; / * opera * / -moz-transform: rotera (-20deg); / * firefox * / -webkit-transform: rotera (-21deg); / * webkit * / -o-transform: rotera (-20deg); / * opera * / -ms-transform: rotera (-20deg); / * ie9 och framtida versioner * / transform: rotera (-20deg); / * äldre webbläsare * / bakgrundsfärg: # 121212; bakgrundsbild: ingen; bakgrundsställning: 0 0; bakgrundsrepetition: repetera; höjd: 135px; position: absolut; höger: -24px; topp: -56px; bredd: 130px; .completer display: none; .completer2 -moz-transform: rotera (110deg); / * firefox * / -webkit-transform: rotera (111deg); / * webkit * / -o-transform: rotera (110deg); / * opera * / -ms-transform: rotera (110deg); / * ie9 och framtida versioner * / transform: rotera (110deg); / * äldre webbläsare * / överst: 195px;
När du har lagt till kompletterna så borde du ha något så här? Återigen om du inte har samma sak som vad du ser här, kolla bara över din kod och se vad du missade.
Nu har vi en bra uppsättning lager att arbeta med. De är alla inredda snygga och har smidiga CSS3-effekter så låt oss gå vidare och få den här babyen att arbeta!
Nu vill vi lägga till navigeringslänkar som ser ut som de bakom olika lager. På vänster sida (i dubbelgränsen) vill vi ha huvudmenyalternativen och på höger sida (i det öppna utrymmet) vill vi att undermenyalternativen ska dyka upp efter att en huvudartikel har svängts. Du kommer att bli förvånad över hur lätt det här är för att uppnå så låt oss gräva in.
Det finns ett sveverblock för att hålla menyerna aktiva när du passerar över hjulet med musen och vi vill se till att det täcker hela hjulet, så för IE-kompatibilitetens skull kommer vi att lägga till en bakgrund med en 0,01 opacitet annars IE vann Jag förstår att elementet är ens där.
Med hjälp av marginell-vänster: 76px säkerställs att du har tillräckligt med utrymme för att sväva över huvudmenyn och undermenyn samt korsa över hjulet utan att någonting försvinner.
ul.menuBuild, ul.menuBuild ul bredd: 80px; / * anger storleken på menyblocken * / bakgrunden: rgb (0, 0, 0); / * RGBa med 0,01 opacitet * / bakgrund: rgba (0, 0, 0, 0,01); / * - en bg-färg måste inkluderas för IE för att fungera korrekt! * / padding-left: 0px; / * stoppar det vanliga inslaget från ul * / margin-left: 76px; / * Opera 7 finalens marginal och marginalboxmodell orsakar problem * /
Nu vill vi ta bort punkterna från varje menyalternativ eller [li]. Vi vill också se till att de är relaterade till navhållaren.
Du kan lägga till en radie för en liten extra styling. Vi gör bakgrunden till en fast färg och flytta menyalternativen till vänster så att de knappt rör vid nav-hållarens kanter.
Vadderingen, textinmatningen och färgen är för extra styling och är inte nödvändiga för att menyn ska fungera.
ul.menuBuild li list-style-type: none; / * tar bort punkterna * / position: relativ; -webkit-gränsen-radien: 0px 20px 20px 0px; / * webkit webbläsare * / -moz-border-radius: 0px 20px 20px 0px; / * firefox * / border-radius: 0px 20px 20px 0px; / * opera * / bakgrund: ingen repetitionsrulle 0 0 # 464646; höjd: 14px; vänster: -177px; vaddering: 8px; marginal: 6px 0 0; bredd: 140px; text-indent: 5px; / * Hur långt texten är från vänstra kanten av menyn * / färg: #fff; / * anger standard font färg till vit * /
Låt oss nu lägga lite gradient på undermenyerna och trycka den åt höger och stöta på det första undermenyalternativet bara knappast i kanten av wrap5.
Lägga till en boxskugga hjälper oss att skapa effekten av undermenyalternativen under deras respektive lager.
ul.menuBuild ul.submenu li bakgrund: # f2f2f2; / * gamla webbläsare * / bakgrund: -moz-linjär-gradient (vänster, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / bakgrund: -webkit-gradient (linjär, vänster topp, höger topp, färgstopp (0%, # 565656), färgstopp (3%, # 666), färgstopp (14% FFF)); / * webkit * / bakgrund: url (bg-image.png) no-repeat, linjär gradient (vänster, # 565656 0%, # 666 3%, #FFF 14%); / * framtida CSS3-webbläsare * / -pie-background: url (bg-image.png) no-repeat, linjär gradient (vänster, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", GradientType = 1); * / / * dvs. * / färg: # 464646; positioner: relativ; vänster: 296px; / * Så här slutar menyn på den andra sidan av hjulet * / -webkit-box-skugga: -2px 3px 12px -7px # 161616; / * webkit webbläsare * / box-skugga: 16px 0 10px -8px # 464646 inset; / * opera * / -moz-box-skugga: -2px 3px 12px -7px # 161616; / * firefox * /
Att lägga marginaler på varje undermenyobjekt låter oss skapa mer separation och ge effekten av att var och en ligger under ett annat lager.
Du kan också lägga till en opacitet för varje objekt för att få det att blekna från topp till mitten och från botten till mitten där mellannementet har full opacitet.
ul.menuBuild ul.submenu li.first margin-left: -12px; opacitet: 0,70; ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third margin-left: -12px; opacitet: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; opacitet: 0,70;
Okej så du har lagt till din undermeny men den visas fortfarande utan att huvudmenyn svängs över. För att fixa detta måste vi helt enkelt lägga till en bildskärm ingen till [ul].
ul.menuBuild li> ul / * använder> väljaren förhindrar många mindre webbläsare (och IE - se nedan) gömmer barn UL * / display: none; / * gör barnblock svänga utan att lämna utrymme för dem * / top: -169px; position: absolut; höger: -86px; color: # 565.656; bredd: 160px; -webkit-gränsen-radien: 0 4px 4px 0; / * webkit * / -moz-gränsen-radien: 0 4px 4px 0; / * firefox * / border-radius: 0 4px 4px 0; / * opera * / vaddering: 50px; höjd: 24px; bakgrund: rgb (255, 255, 255); / * Fallback för webbläsare som inte stöder RGBa * / bakgrund: rgba (255, 255, 255, 0.00); / * RGBa med 0,01 opacitet * /
Så nu syns det inte alls! Okej, låt oss gå vidare och få det att visas efter att en huvudartikel har svängts över. Genom att använda li: hover> ul kan vi säga att när en huvudmeny [li] svängs över så visar vi [ul] för lämplig undermeny med hjälp av displayen: block.
ul.menuBuild li: sväva> ul / * en av de viktigaste deklarationerna - webbläsaren måste upptäcka att sväva över godtyckliga element, den> riktar sig bara till barnet ul, inte något barn av detta barn ul * / display: block; / * gör barnblocket synligt - en av de viktigaste deklarationerna * / position: absolut; vänster: 0; bredd: 400px; höjd: 200px;
För ren estetik kan vi lägga till en radie, boxskugga och bakgrund. Vad som är nödvändigt är att skapa höjd, bredd, absolut positionering och toppmarginal.
Den övre marginalen tillåter oss att trycka på det första menyalternativet där vi vill ha det, då kan vi använda mindre marginal för att trycka på resten av föremålen.
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-gränsen-radien: 20px 0 0 20px; / * firefox * / border-radius: 20px 0 0 20px; / * opera * / -webkit-box-skugga: -2px 7px 8px -7px # 161616; / * webkit * / -moz-box-skugga: -2px 7px 8px -7px # 161616; / * firefox * / box-shadow: -16px 0 8px -7px # 222222 inset; / * opera * / bakgrund: # F0000F; / * gamla webbläsare * / bakgrund: -moz-linjär gradient (vänster, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / bakgrund: -webkit-gradient (linjär, vänster topp, höger topp, färgstopp (52%, # F0000F), färgstopp (60%, # CC0000), färgstopp (84% 990000), färgstopp (84%, # FFF), färgstopp (85%, # 464646), färgstopp (92%, # 363636), färgstopp (100%, # 121212)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * dvs * / bakgrund: linjär gradient (vänster, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * framtida CSS3-webbläsare * / -pie-bakgrund: linjär gradient (vänster, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * IE fixa med Pie * / höjd: 18px; vaddering: 8px; position: absolut; margin-top: 100px; bredd: 138px;
För de återstående 3 menyalternativen kommer vi att lägga till en toppmarginal för varje för jämn avstånd mellan dem och en marginal kvar för att stöta dem mot de olika lagren.
Nästa måste vi vara säker på att lägga till rotationen till varje objekt så att vi kan snygga passa menyn runt ratten.
ul.menuBuild li # menu2 -webkit-transform: rotera (-10deg); / * webkit * / -moz-transform: rotera (-10deg); / * firefox * / -o-transform: rotera (-10deg); / * opera * / -ms-transform: rotera (-10deg); / * ie9 och framtida versioner * / transform: rotera (-10deg); / * äldre webbläsare * / margin-top: 141px; margin-vänster: 5px; ul.menuBuild li # menu3 -webkit-transform: rotera (-21deg); / * webkit * / -moz-transform: rotera (-21deg); / * firefox * / -o-transform: rotera (-21deg); / * opera * / -ms-transform: rotera (-21deg); / * ie9 och framtida versioner * / transform: rotera (-21deg); / * äldre webbläsare * / margin-top: 181px; margin-left: 18px; ul.menuBuild li # menu4 -moz-transform: rotera (-32deg); / * firefox * / -ms-transform: rotera (-32deg); / * ie9 och framtida versioner * / transform: rotera (-32deg); / * äldre webbläsare * / -webkit-transform: rotera (-32deg); / * webkit * / -o-transform: rotera (-32deg); / * opera * / margin-top: 218px; margin-left: 38px;
Efter att ha tagit hand om huvudmenyalternativen kommer vi att göra samma sak för undermenyn förutom i stället för att menyalternativen går runt hjulet, vi vill att de ska vara raka upp och ner. För att kunna göra detta måste vi kompensera för huvudmenyns rotation genom att lägga till en rotation till varje undermeny.
Samma som huvudmenyn måste vi lägga till en övre marginal för att jämnt avståndet mellan varje och trycka på varje undermenyalternativ till höger så att de är ännu närmare respektive lager.
ul.menuBuild li # menu1> ul margin-top: 0; vänster: 20px; ul.menuBuild li # menu2> ul -webkit-transform: rotera (10deg); / * webkit * / -moz-transform: rotera (10deg); / * firefox * / -o-transform: rotera (10deg); / * opera * / -ms-transform: rotera (-10deg); / * ie9 och framtida versioner * / transform: rotera (-10deg); / * äldre webbläsare * / vänster: 24px; marginal-topp: 6px; ul.menuBuild li # menu3> ul -webkit-transform: rotera (21deg); / * webkit * / -moz-transform: rotera (21deg); / * firefox * / -o-transform: rotera (21deg); / * opera * / -ms-transform: rotera (-21deg); / * ie9 och framtida versioner * / transform: rotera (-21deg); / * äldre webbläsare * / vänster: 27px; marginal-topp: 16px; ul.menuBuild li # menu4> ul -webkit-transform: rotera (32deg); / * webkit * / -moz-transform: rotera (32deg); / * firefox * / -o-transform: rotera (32deg); / * opera * / -ms-transform: rotera (32deg); / * ie9 och framtida versioner * / transform: rotera (32deg); / * äldre webbläsare * / vänster: 28px; marginal-topp: 27px;
Slutligen kan vi lägga till några valfria stylingar för att göra tecknen bleknade ut och sedan fast igen när de svängde över. Detta kommer att föra varje objekt framåt för användaren när de svävar över den.
Dessa stilar är inte nödvändiga för att menyn ska fungera men de lägger till några fina effekter och ökar användbarheten.
ul.menuBuild ul.submenu li a färg: # 464646; / * färgen på undermenyfonter * / opacitet: 0,65; / * Detta blandar teckensnittet med bakgrunden * / filter: alfa (opacitet = 65); ul.menuBuild ul.submenu li a: svävar opacitet: 1,0; / * och detta ger fontens opacitet tillbaka till 100% * / filter: alfa (opacitet = 100) ul.menuBuild li a / * för huvudmeny länkarna * / färg: # FFBE8F; display: block; bredd: 100%; ul.menuBuild li: sväva> en färg: #fff; gränsen till vänster: dubbel 5px # 880000; / * Indikatorn för när ett objekt svängs över * / / * Använd inte display: block; * /
Om du vill stifta varje enskild undermeny kan du använda följande kod?
.sub1, .ub2, .ub3, .ub4
När du är färdig med sista delen, borde du ha något så här? Återigen om din inte ser ut som bilden nedan oroa dig inte, gå bara tillbaka och kolla din kod.
Credits: Centralsidan är från Envato-tillgångarbiblioteket.
Jo för IE kan vi använda CSSPIE i ett separat stilark. Jag kommer inte att gå in i det mycket eftersom även med den här fixen visar IE inte korrekt. Om du känner till en bättre åtgärd, var snäll och låt mig veta i kommentarerna.
Med hjälp av beteende kan vi ringa csspie php-filen för att berätta för IE att CSS3-formaten är ok att använda. Så här är hur det kommer att fungera?
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, .wrapp3, .wrap4, .wrap5, .nav-hållare, .completer, .completer2 behavior: url (styles / csspie / PIE.php); / * CSS3 IE fix - Stödjer gränsradie "," box-skugga "," gränsbild ", -yta-bakgrund", linjära gradienter "," RGBA "* /
Några andra IE-korrigeringar går så här?
ul.menuBuild ul.submenu li filter: alfa (opacitet = 70); / * IE har för många problem för gradvis opacitet så vi ska bara använda 70 för alla undermenyer * / .completer, .completer2 display: none; / * transformen fungerar inte korrekt så vi bara gömmer completers * / .nav-hållaren border-bottom-style: none; höjd: 0px;
Så jag hoppas att ni har haft denna handledning! Kom ihåg att CSS3-support är begränsat och om du vill ha kompatibilitet över alla webbläsare som någonsin skapats så finns det andra sätt att uppnå samma uppgift som att använda bilder och lite javascript. Om du vill ha en handledning om andra menystilar, hur du använder javascriptversionen eller hur du använder mer fantastiska CSS3-effekter, låt mig veta i kommentarerna och jag piskar upp lite för dig! Lämna dina kommentarer och frågor nedan ;)
Var tålmodig och fortsätt lära och innan du vet det kommer du att vara en mästare på vad du än gör!
