Share
Er is geen betere manier om CSS3 te leren dan om je handen vuil te maken voor een echt project en dat is precies wat we gaan doen. Ik ga je leren hoe je een geweldig, gelaagd CSS3-wielmenu kunt maken met behulp van een paar beginners- en gevorderde CSS-technieken. Breek dus je favoriete teksteditor of IDE en laten we aan de slag gaan met wat CSS3-magie!
Vandaag leer je hoe je de candy cane teardrop kunt maken uit de vele verschillende beschikbare stijlen en kleurvariaties. U ontvangt alle variaties in de bronbestanden. Ook als een toegevoegde bonus heb ik een beetje optionele Javascript toegevoegd, zodat je je afbeeldingen kunt roteren afhankelijk van het menu-item dat zweeft. Het bronbestand komt zelfs met zijn eigen documentatie!
Opmerking: ondersteuning voor IE is op dit moment beperkt. We zullen dit grotendeels doornemen met als doel de grenzen te verleggen van wat we kunnen doen in CSS3? maar zoals met alle dingen op het randje van bruikbaarheid, betekent het een beetje stabiliteit opofferen. We zullen echter het IE-onderwerp aan het einde van de tutorial bespreken!
We bieden deze zelfstudie vandaag in twee verschillende indelingen aan: een video en een volledig geschreven zelfstudie hieronder. Volg samen met welke methode van leren je ook de voorkeur geeft (of beide!) En we zullen je zo snel mogelijk bereiken!
De stap-voor-stap geschreven tutorial is hieronder. Zorg ervoor dat je ook de volledige downloadbare bron haalt!
Het eerste wat we willen doen is een aantal lagen maken die elkaar zullen overlappen en op hun plaats blijven terwijl ze zo weinig mogelijk code gebruiken. Het is belangrijk om uw code niet te vullen met veel opgeblazenheid en niet om veel te maken
onnodige drijvers of absoluut gepositioneerde elementen, dus we zullen zoveel mogelijk proberen relatief te blijven.
Zoals je kunt zien is de code behoorlijk rechttoe rechtaan. We hebben in feite de ene laag op de andere gestapeld en op deze manier kunnen ze hun posities behouden.
Vervolgens willen we een afbeelding toevoegen aan het midden van het wiel of in dit geval een traan. Om dat te doen, voegen we gewoon de volgende code toe tussen de klasse wrap4 en de klasse completer. Hiermee wordt de afbeelding vergrendeld in het midden van het canvas. We zullen hier een rockable afbeelding voor gebruiken omdat ze geweldig zijn!
Accentsconagua
Nu willen we een voor een wat stijl aan elke laag toevoegen.
Dit wordt de belangrijkste container voor uw wielmenu. Het bevat ook alle universele lettertypen en lettergroottes die effect hebben op alles wat zich in de div bevindt.
# menu-wrap background: # e7e7e7; / * Dit is niet nodig * / hoogte: 600 px; / * Dit is belangrijk en houdt het wiel op zijn plaats wanneer het over elementen zweeft * / font-family: sans-serif, Franklin Gothic Medium, Helvetica, Arial; / * Als Franklin niet wordt gebruikt, wordt automatisch naar het volgende lettertype in de familie * / font-size: 14px; / * Bepaalt de globale lettergrootte * / letter-spacing: 1px! Belangrijk; / * Effectafstand tussen letters voor alle lettertypen in het wiel * /
We gaan door en zorgen ervoor dat ons middenbeeld op de juiste manier wordt gestyled door het in het midden van het wiel te plaatsen met marges, enkele dimensies en een rand toe te voegen.
# menu-wrap .orbit height: 210px; marge: 32px; / * Duwt de afbeeldingen in het display naar het midden * / positie: absoluut; breedte: 210 px; # menu-wrap .orbit-frame border: 2px solid # 999; / * Maakt een scheiding tussen de afbeelding en wrap5 * /
Alle wrappers: we willen een aantal stijlen maken die van toepassing zijn op alle hoofdwikkelaars door een universele randstraal toe te voegen, deze allemaal in het midden te plaatsen, een relatieve positie toe te voegen zodat alles blijft zitten en naar beneden te duwen om de even gelaagde te krijgen effect.
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder / * stijlen alle wielcontainers * / -moz-border-radius: 220px 0 200px 220px; / * firefox * / -webkit-border-radius: 220px 0 200px 220px; / * webkit * / border-radius: 220px 0 200px 220px; / * opera * / margin: 0 auto; / * centreert alle wrappers ten opzichte van elkaar * / positie: relatief! belangrijk; / * Niet aanraken tenzij je weet wat je doet * / top: 20px;
Dit is je grootste laag die achter alle anderen zit. We gaan een rode achtergrond met een verloop maken en een solide rode fallback gebruiken voor oudere browsers. We zullen ook CSSpie gebruiken om IE te vertellen dat het goed is om deze stijlen te gebruiken. Daarna hoeven we alleen nog een breedte en hoogte toe te voegen en u bent klaar. U wilt ervoor zorgen dat de breedte en hoogte groter zijn dan alle andere lagen zodat deze achter hen worden weergegeven.
.wrap1 background: # FF0000; / * oude browsers * / achtergrond: -moz-linear-gradient (bovenaan, # FF0000 0%, # 990000 100%); / * firefox * / achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleur-stop (0%, # FF0000), kleur-stop (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / achtergrond: lineair verloop (bovenaan, # FF0000 0%, # 990000 100%); / * toekomstige CSS3-browsers * / -pie-achtergrond: lineair verloop (bovenaan, # FF0000 0%, # 990000 100%); / * IE-fix met Pie * / height: 394px; width: 394px;
Nu voor wrap 2 doen we precies hetzelfde, alleen gebruiken we variaties van wit als het verloop en voegen we een buitenste en binnenste doosschaduw toe om een licht afschuiningseffect te creëren plus de schaduw op de achtergrond. Dan moeten we de breedte en hoogte ongeveer 40px kleiner maken dan de hoofdlaag om het mooi en gelijkmatig te maken.
.wrap2 background: #FFFFFF; / * oude browsers * / achtergrond: -moz-linear-gradient (boven, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / achtergrond: -webkit-gradiënt (lineair, linksboven, linksonder, kleur-stop (0%, # FFFFFF), kleur-stop (100%, # DCBE8F)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * ie * / achtergrond: lineaire gradiënt (bovenkant, #FFFFFF 0%, # DCBE8F 100%); / * toekomstige CSS3-browsers * / -pie-achtergrond: lineaire gradiënt (boven, #FFFFFF 0%, # DCBE8F 100%); / * IE-fix met Pie * / height: 354px; width: 354px; -moz-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) inzet; -webkit-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) inzet; vakschaduw: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) inzet;
We zullen nu het proces voor alle andere wrappers herhalen met verschillende gekleurde verlopen en elke laag 40 px kleiner maken dan de vorige.
.wrap3 background: # FF0000; / * oude browsers * / achtergrond: -moz-linear-gradient (bovenaan, # FF0000 0%, # 990000 100%); / * firefox * / achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleur-stop (0%, # FF0000), kleur-stop (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / achtergrond: lineair verloop (bovenaan, # FF0000 0%, # 990000 100%); / * toekomstige CSS3-browsers * / -pie-achtergrond: lineair verloop (bovenaan, # FF0000 0%, # 990000 100%); / * IE fix met Pie * / height: 314px; width: 314px; .wrap4 border: 2px solid # FF0000; achtergrond: # 990000; / * oude browsers * / achtergrond: -moz-linear-gradient (bovenaan, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / achtergrond: -webkit-gradiënt (lineair, linksboven, linksonder, kleur-stop (0%, # 990000), kleur-stop (55%, # CC0000), kleur-stop (57%, # FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "# FF0000", GradientType = 0); / * ie * / achtergrond: lineair verloop (boven, # 990000 0%, # CC0000 55%, # FF0000 57%); / * toekomstige CSS3-browsers * / -pie-achtergrond: lineair verloop (boven, # 990000 0%, # CC0000 55%, # FF0000 57%); / * IE-fix met Pie * / -moz-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inzet, 5px 5px 9px 6px rgba (221, 252, 116, 0.81) inzet; -webkit-vak-schaduw: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inzet, 5px 5px 9px 6px rgba (221, 252, 116, 0.81) inzet; vakschaduw: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inzet, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) inzet ; Hoogte: 274px; width: 274px;
Nu kunnen we wrap5 stijlen en de nav-houder die alle menu-items op zijn plaats houdt en voor de candycane-stijl, we maken het zwart om een mooi neutraal contrast toe te voegen, terwijl wrap5 wit zal zijn en als de container voor de midden afbeelding. Wat we hier doen is het verwijderen van de achtergrond, zodat je door wrap5 en de nav-houder heen kunt kijken, waardoor de andere lagen erachter verschijnen, evenals de middelste afbeelding. Nadat je het transparant hebt gemaakt, voegen we een zwarte rand toe aan de houder voor de noorder en een witte rand om wrap5. De rand van de nav-houder moet aan de rechterkant verborgen zijn (voor de submenu's), aan de linkerkant (voor de hoofdmenu's) verdubbeld en voor de rest een mooi en gemakkelijk effect terwijl het aantal lagen dat we hebben geminimaliseerd wordt toevoegen. Traditioneel kun je met dit effect maximaal 5 of 6 nieuwe lagen toevoegen, dit bespaart veel code.
Deze keer zijn de breedte en hoogte van wrap5 60 px minder dan de andere lagen om het leuk en zelfs opnieuw te maken. Nog een 10px push aan de bovenkant zal helpen de laag uit te lijnen en een binnendoosschaduw geeft ons een mooi perspectief van de afstand tussen wrap5 en het middenbeeld.
Door een top van 0 toe te voegen aan de nav-houder worden de lagen automatisch uitgelijnd met de andere. We gebruiken ook een negatieve marge voor verdere uitlijning linksboven en maken een proportionele hoogte / breedte om deze mooi op de andere lagen te laten passen.
.wrap5 -moz-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) inzet, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); -webkit-vak-schaduw: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) inzet, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); vakschaduw: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) inzet, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); border: 20px solid #FFF; / * maakt de omslag om de afbeelding erachter te zien * / height: 214px; top: 10px; / * centreer het element * / width: 214px; .nav-houder background: none repeat scroll 0 0 transparent; randkleur: # 121212; / *** De grensverklaringen worden gebruikt om de laatste wrapper aan te maken, midden doorkijkt en verbergt de rechterrand om de submenu's * / border-stijl weer te geven: solid hidden solid double; grensbreedte: 73px gemiddeld 73px 73px; hoogte: 252px; marge: -92px; / * centreert het object op relatieve elementen * / top: 0; breedte: 324 px;
"De rand van de nav-houder moet aan de rechterzijde (voor de submenu's) worden verborgen, aan de linkerkant (voor de hoofdmenu's) verdubbeld en voor de rest een mooi en gemakkelijk effect terwijl het aantal lagen wordt geminimaliseerd moeten toevoegen. "
Nou dat was makkelijk genoeg. Dus nadat je dit allemaal hebt voltooid, heb je hopelijk iets nieuws geleerd dat je al aan je vaardigheden hebt toegevoegd. Dit is hoe je je creatie er tot nu toe moet uitzien. Als het er niet zo uitziet, doorloop je de code opnieuw en kijk je of je misschien iets hebt gemist? maak je geen zorgen, het is waarschijnlijk iets heel kleins.
De Completers: Hmm? ziet dit er voor u incompleet uit? We moeten het afmaken met een aantal lagen die ik completers heb genoemd, zodat we delen van het middenbeeld kunnen verbergen en de nav-houder verder rond de andere lagen kunnen brengen, wat een mooi afgerond effect creëert en het afsluit.
Om te doen wat ik zojuist heb genoemd, is vrij eenvoudig. We kunnen de meeste styling toepassen op beide completers voor minder code. Laten we een randstraal aan één kant toevoegen om een mooie curve te maken, dan gebruiken we transform om de completer uit te lijnen tussen wrap1 en wrap5. Het toevoegen van onze achtergrondkleur is erg belangrijk of er verschijnt niets. We moeten deze laag absoluut gepositioneerd maken en deze naar rechts en naar boven verplaatsen om hem perfect in lijn te krijgen.
.completer1 zal een weergave van geen hebben voor deze druppelvormige stijl. Op andere stijlen, zoals het wiel, hebben we dat gedeelte verwijderd om te maken zodat het wordt weergegeven.
.completer2 heeft iets meer rotatie en we moeten het een beetje naar beneden duwen om het passend te maken.
.completer, .completer2 / ** absolute elementen om de rand van afbeeldingen te verbergen ** / -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: roteren (-20deg); / * firefox * / -webkit-transform: roteren (-21deg); / * webkit * / -o-transform: roteren (-20deg); / * opera * / -ms-transform: roteren (-20deg); / * ie9 en toekomstige versies * / transform: rotate (-20deg); / * oudere browsers * / achtergrondkleur: # 121212; achtergrondafbeelding: geen; achtergrondpositie: 0 0; achtergrondherhaling: herhalen; hoogte: 135 px; positie: absoluut; rechts: -24px; top: -56px; breedte: 130 px; . Completer display: none; .completer2 -moz-transform: roteren (110 graden); / * firefox * / -webkit-transform: roteer (111deg); / * webkit * / -o-transform: roteren (110 graden); / * opera * / -ms-transform: roteren (110 graden); / * ie9 en toekomstige versies * / transform: rotate (110deg); / * oudere browsers * / top: 195px;
Nadat je de completers hebt toegevoegd, zou je zoiets als dit moeten hebben? Nogmaals, als je niet hetzelfde hebt als wat je hier ziet, controleer dan gewoon je code en zie wat je gemist hebt.
Nu hebben we een groot aantal lagen om mee te werken. Ze zijn allemaal netjes ingepakt en hebben soepele CSS3-effecten, dus laten we verder gaan en deze baby laten werken!
Nu willen we navigatielinks toevoegen die eruitzien alsof ze zich achter verschillende lagen bevinden. Aan de linkerkant (in de dubbele rand) willen we de hoofdmenu-items en aan de rechterkant (in de open ruimte) willen we dat de submenu-items verschijnen nadat een hoofditem zweeft. Je zult verbaasd zijn hoe gemakkelijk dit te volbrengen is, dus laten we ingaan.
Er is een zweefblok om de menu's actief te houden terwijl je met je muis over het stuur gaat en we willen er zeker van zijn dat dit het hele wiel bestrijkt, dus omwille van IE-compatibiliteit voegen we een achtergrond toe met een dekkingsgraad van 0,01 anders won IE Ik erken dat het element er zelfs is.
Marge links gebruiken: 76px zorgt ervoor dat je voldoende ruimte hebt om over het hoofdmenu en het submenu te zweven en het wiel over te steken zonder dat er iets verdwijnt.
ul.menuBuild, ul.menuBuild ul width: 80px; / * bepaalt de grootte van de menublokken * / achtergrond: rgb (0, 0, 0); / * RGBa met 0.01 dekking * / achtergrond: rgba (0, 0, 0, 0.01); / * - een BG-kleur MOET worden opgenomen om IE goed te laten werken! * / opvulling links: 0px; / * stopt de gebruikelijke inspringing van ul * / margin-left: 76px; / * Het marge- en marge-boxmodel van Opera 7 final veroorzaakt problemen * /
Nu willen we de opsommingstekens verwijderen uit elk menu-item of [li]. We willen er ook voor zorgen dat ze relatief zijn ten opzichte van de houder van het naviland.
Je kunt een randstraal toevoegen voor een beetje extra styling. We zullen de achtergrond een effen kleur geven en de menu-items naar links verplaatsen, zodat ze amper de randen van de houder aanraken.
De opvulling, tekstindruk en kleur zijn voor extra styling en zijn niet vereist voor het functioneren van het menu.
ul.menuBuild li list-style-type: none; / * verwijdert de opsommingstekens * / positie: relatief; -webkit-border-radius: 0px 20px 20px 0px; / * webkit-browsers * / -moz-border-radius: 0px 20px 20px 0px; / * firefox * / grensradius: 0px 20px 20px 0px; / * opera * / background: none repeat scroll 0 0 # 464646; hoogte: 14 px; links: -177px; opvulling: 8px; marge: 6px 0 0; width: 140px; text-indent: 5px; / * Hoe ver de tekst is vanaf de linkerrand van het menu * / color: #fff; / * stelt de standaardlettertypekleur in op wit * /
Laten we nu een beetje verloop toevoegen aan de submenu's en deze naar rechts duwen en het eerste submenu-item net tegen de rand van wrap5 slaan.
Het toevoegen van een vakschaduw helpt ons het effect te creëren van de submenu-items die zich onder hun respectievelijke lagen bevinden.
ul.menuBuild ul.submenu li background: # f2f2f2; / * oude browsers * / achtergrond: -moz-linear-gradient (links, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / achtergrond: -webkit-gradient (lineair, linkerbovenkant, rechtsboven, kleurstop (0%, # 565656), kleurstop (3%, # 666), kleurstop (14%, # FFF)); / * webkit * / achtergrond: url (bg-image.png) geen herhalende, lineaire gradiënt (links, # 565656 0%, # 666 3%, #FFF 14%); / * toekomstige CSS3-browsers * / -pie-achtergrond: url (bg-image.png) geen herhaling, lineair verloop (links, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", GradientType = 1); * / / * ie * / color: # 464646; position: relative; left: 296px; / * Dit is hoe het menu aan de andere kant van het wiel terecht komt * / -webkit-box-shadow: -2px 3px 12px -7px # 161616; / * webkit-browsers * / vakschaduw: 16px 0 10px -8px # 464646 inzet; / * opera * / -moz-box-shadow: -2px 3px 12px -7px # 161616; / * firefox * /
Door marges op elk submenu-item te plaatsen, kunnen we meer scheiding creëren en het effect geven dat elke laag zich onder een andere laag bevindt.
U kunt ook een dekking voor elk item toevoegen om het van boven naar midden en van beneden naar midden te laten vervagen, waarbij het middelste item de volledige dekking heeft.
ul.menuBuild ul.submenu li.first margin-left: -12px; dekking: 0,70; ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third margin-left: -12px; opaciteit: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; dekking: 0,70;
Oké, je hebt je submenu toegevoegd, maar het wordt nog steeds weergegeven zonder dat er een hoofdmenu overheen zweeft. Om dit op te lossen, moeten we simpelweg een display none toevoegen aan de [ul].
ul.menuBuild li> ul / * met de> selector voorkomt veel minder browsers (en IE - zie hieronder) verbergt kind ULs * / display: geen; / * maak kindblokken zwevend zonder ruimte te laten voor ze * / top: -169px; positie: absoluut; rechts: -86px; color: # 565656; breedte: 160 px; -webkit-border-radius: 0 4px 4px 0; / * webkit * / -moz-border-radius: 0 4px 4px 0; / * firefox * / grensradius: 0 4px 4px 0; / * opera * / opvulling: 50px; hoogte: 24 px; achtergrond: rgb (255, 255, 255); / * Terugval voor webbrowsers die geen RGBa * / achtergrond ondersteunen: rgba (255, 255, 255, 0.00); / * RGBa met 0.01 dekking * /
Dus nu komt het helemaal niet opdagen! Oké, laten we doorgaan en het laten weergeven nadat een hoofditem is overgeheveld. Door li: hover> ul te gebruiken, kunnen we zien dat wanneer een hoofdmenu [li] wordt overgeheveld, we [ul] voor het juiste submenu weergeven met behulp van display: block.
ul.menuBuild li: hover> ul / * een van de belangrijkste verklaringen - de browser moet zweven over willekeurige elementen detecteren, de> target alleen het kind ul, geen kind uls van dat kind ul * / display: block; / * maakt het kinderblok zichtbaar - een van de belangrijkste verklaringen * / positie: absoluut; left: 0; width: 400px; Hoogte: 200px;
Voor pure esthetiek kunnen we een randstraal, doosschaduw en achtergrond toevoegen. Wat nodig is, is om de hoogte, breedte, absolute positionering en bovenmarge te creëren.
De bovenste marge stelt ons in staat om het eerste menu-item naar beneden te duwen naar waar we het willen hebben, dan kunnen we minder marge gebruiken om de rest van de items naar beneden te duwen.
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 inzet; / * opera * / achtergrond: # F0000F; / * oude browsers * / achtergrond: -moz-linear-gradient (links, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, rechtsboven, kleurstop (52%, # F0000F), kleurstop (60%, # CC0000), kleurstop (84%, # 990000), kleur-stop (84%, # FFF), kleur-stop (85%, # 464646), kleur-stop (92%, # 363636), kleur-stop (100%, # 121212)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * ie * / achtergrond: lineaire gradiënt (links, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * toekomstige CSS3-browsers * / -pie-achtergrond: lineair verloop (links, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * IE-fix met Pie * / height: 18px; opvulling: 8px; positie: absoluut; margin-top: 100px; width: 138px;
Voor de overige 3 menu-items voegen we een bovenmarge toe aan elk voor een gelijke tussenafstand en een marge over om ze tegen de verschillende lagen te stoten.
Vervolgens moeten we ervoor zorgen dat de rotatie aan elk item wordt toegevoegd, zodat we het menu rond het wiel mooi kunnen aanpassen.
ul.menuBuild li # menu2 -webkit-transform: rotate (-10deg); / * webkit * / -moz-transform: roteren (-10deg); / * firefox * / -o-transform: roteren (-10deg); / * opera * / -ms-transform: roteren (-10deg); / * ie9 en toekomstige versies * / transform: rotate (-10deg); / * oudere browsers * / margin-top: 141px; margin-left: 5px; ul.menuBuild li # menu3 -webkit-transform: rotate (-21deg); / * webkit * / -moz-transform: roteren (-21deg); / * firefox * / -o-transform: roteren (-21deg); / * opera * / -ms-transform: roteren (-21deg); / * ie9 en toekomstige versies * / transform: rotate (-21deg); / * oudere browsers * / margin-top: 181px; margin-left: 18px; ul.menuBuild li # menu4 -moz-transform: roteren (-32deg); / * firefox * / -ms-transform: roteren (-32deg); / * ie9 en toekomstige versies * / transformeren: roteren (-32deg); / * oudere browsers * / -webkit-transform: roteren (-32deg); / * webkit * / -o-transform: roteren (-32deg); / * opera * / margin-top: 218px; margin-left: 38px;
Na het verzorgen van de hoofdmenu-items gaan we hetzelfde doen voor het submenu, behalve dat in plaats van de menu-items rond het wiel te laten gaan, we willen dat ze recht op en neer gaan. Om dit te doen, moeten we compenseren voor de rotatie van het hoofdmenu door een rotatie toe te voegen aan elk submenu.
Gelijk aan het hoofdmenu moeten we een bovenmarge toevoegen om de afstand tussen beide te evenaren en elk submenu-item naar rechts te duwen zodat ze nog dichter bij hun respectievelijke lagen staan.
ul.menuBuild li # menu1> ul margin-top: 0; left: 20px; ul.menuBuild li # menu2> ul -webkit-transform: rotate (10deg); / * webkit * / -moz-transform: roteren (10 deg); / * firefox * / -o-transform: roteren (10 deg); / * opera * / -ms-transform: roteren (-10deg); / * ie9 en toekomstige versies * / transform: rotate (-10deg); / * oudere browsers * / links: 24px; margin-top: 6px; ul.menuBuild li # menu3> ul -webkit-transform: rotate (21deg); / * webkit * / -moz-transform: roteren (21 deg); / * firefox * / -o-transform: roteren (21 deg); / * opera * / -ms-transform: roteren (-21deg); / * ie9 en toekomstige versies * / transform: rotate (-21deg); / * oudere browsers * / links: 27px; margin-top: 16px; ul.menuBuild li # menu4> ul -webkit-transform: rotate (32deg); / * webkit * / -moz-transform: roteren (32deg); / * firefox * / -o-transform: roteren (32deg); / * opera * / -ms-transform: roteren (32deg); / * ie9 en toekomstige versies * / transform: rotate (32deg); / * oudere browsers * / links: 28px; margin-top: 27px;
Eindelijk kunnen we een aantal optionele stijlen toevoegen om de lettertypen uit te faden en vervolgens weer vast te maken wanneer ze over de randen zweven. Hiermee wordt elk item naar voren gebracht voor de gebruiker wanneer deze erover zweeft.
Deze stijlen zijn niet vereist voor het functioneren van het menu, maar ze voegen wel een aantal leuke effecten toe en vergroten de bruikbaarheid.
ul.menuBuild ul.submenu li a color: # 464646; / * de kleur van submenu-lettertypen * / dekking: 0.65; / * Dit voegt het lettertype samen met de achtergrond * / filter: alpha (opacity = 65); ul.menuBuild ul.submenu li a: hover opacity: 1.0; / * en dit brengt de dekking van het lettertype weer terug naar 100% * / filter: alpha (opacity = 100) ul.menuBuild li a / * voor de links naar het hoofdmenu * / color: # FFBE8F; weergave: blok; breedte: 100%; ul.menuBuild li: hover> a color: #fff; border-left: double 5px # 880000; / * de indicator voor wanneer een item boven * / / * wordt geplaatst, gebruikt geen display: block; * /
Als u elk afzonderlijk submenu verder wilt stylen, kunt u de volgende code gebruiken?
.sub1, .2, .s3, .44
Nadat je het laatste deel hebt voltooid, zou je zoiets als dit moeten hebben? Nogmaals, als de jouwe er niet uitziet zoals de onderstaande afbeelding maak je geen zorgen, ga gewoon terug en controleer je code.
Credits: de middelste afbeelding is afkomstig uit de bibliotheek envato assets.
Goed voor IE kunnen we CSSPIE gebruiken in een aparte stylesheet. Ik zal er niet veel op ingaan omdat zelfs met deze fix IE niet correct wordt weergegeven. Als u een betere oplossing weet, kunt u me dit laten weten in de opmerkingen.
Met behulp van gedrag kunnen we het csspie php-bestand gebruiken om IE te laten weten dat de CSS3-stijlen goed werken. Dus hier is hoe het zal werken?
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 behaviour: url (styles / csspie / PIE.php); / * CSS3 IE-fix - Ondersteunt 'border-radius', 'box-shadow', 'border-image', -pie-background ', liinear-gradients', 'RGBA' * /
Een paar andere IE-oplossingen gaan als volgt?
ul.menuBuild ul.submenu li filter: alpha (opacity = 70); / * IE heeft te veel problemen voor geleidelijke dekking, dus we gebruiken slechts 70 voor alle submenu's * / .completer, .completer2 display: none; / * transformatie werkt niet goed, dus verbergen we de completers * / .nav-houder border-bottom-style: none; height: 0px;
Dus ik hoop dat jullie deze tutorial leuk vonden! Onthoud dat CSS3-ondersteuning beperkt is en als je compatibiliteit wilt met alle browsers die ooit zijn gemaakt, zijn er andere manieren om dezelfde taak uit te voeren, zoals het gebruik van afbeeldingen en wat JavaScript. Als je een tutorial over de andere menustijlen wilt, hoe je de javascript-versie gebruikt of gewoon hoe je nog meer geweldige CSS3-effecten gebruikt, laat het me dan weten in de comments en ik zal wat voor je oprapen! Laat hieronder uw opmerkingen en vragen achter ;)
Wees geduldig en blijf leren en voor je het weet ben je een meester in wat je ook doet!
