Var inte en fyrkant, bryta ut din tråkiga lådan och försök på en cirkel för storlek. Idag ska vi bygga en cirkulär navigeringsmeny som spinner till olika punkter när användaren svänger över ett ankare.
Längs vägen måste vi övervinna flera hinder som hur vi strukturerar vår HTML för att främja en fjärrflytare och hur du placerar alla element helt rätt så att allt fungerar. Det är en rolig utmaning och det finns mycket att lära oss, låt oss börja!
Starta Demo - Ladda ner filer
Steg 1: Structural HTML
Innan vi skriver en enda karaktär av HTML måste vi ta reda på strukturen av vad det är som vi bygger. För detta kan vi vända oss till Photoshop och göra en grundläggande skiss av hur vi vill att menyn ska se ut. Här är vad jag kom med:
I grunden är alla rektanglarna högst bundet till en av de fyra små cirklarna inuti storcirkeln. När en rektangel svängs över, roterar den motsvarande lilla cirkeln upp till menyns övre del. Återigen använder vi begreppet "remote"? sväva eftersom användaren interagerar med ett område och det påverkar en annan.
Varje gång jag försöker dra av en fjärrhytt, tar det mig några försök att få strukturen precis rätt. Det här beror på hur CSS-väljare arbetar, och mer specifikt, hur hoverpseudoklassen fungerar. Tänk på följande:
Låt oss säga att vi sätter denna struktur på plats med tanken på att vi ville ha en svängare över ankret för att ändra färgen på stycket. Om du har en grundläggande uppfattning om hur fjärran fungerar, kan du komma med några CSS så här:
Som det visar sig, fungerar det helt enkelt inte. I vår CSS-väljare måste vi binda ankaret som svävar in med det stycke som ska hanteras, men våra element finns i två helt separata div. Det finns inget enkelt sätt att klättra upp här och över DOM-trädet.
Så vad gör vi? Svaret ligger i omstruktureringen av vår HTML. Den här gången kommer vi att kasta de två elementen på samma nivå av trädet.
Nu är vår paragraf en syskon i vårt ankare, vilket innebär att vi har en tydlig väg att binda dem i vår CSS. Så här fungerar det:
Den här gången berättar vi att webbläsaren ska utlösa ett färgskift på varje stycke som är det närmaste syskon till ett ankare som svävar över.
Ansökan
Om vi tillämpar denna kunskap på vårt scenario kan vi komma fram till en struktur som fungerar. Börja med att skapa tre divs: wrapper, meny och cirkel. Bo meny insidan av omslag och cirkel insidan av meny.
Inne i menyn div, placera fyra ankare, var och en med en unik klass. Inne i cirkel div, placera en oorderad lista som innehåller siffrorna ett till fyra.
Det kan fortfarande vara lite förvirrande om hur alla dessa delar hänför sig till vår tidigare skiss, så låt oss uppdatera det med några visuella signaler för att ge dig en uppfattning om vad allt gör.
Steg 2: Wrapper CSS
Koden ovan representerar all HTML som vi behöver för det här lilla projektet. Resten av vårt arbete är alla CSS. Till att börja med, låt oss lägga ner några grundläggande resent- och positioneringskoder:
Det finns inte mycket här för att vara förvirrad, vi skissar enkelt ut vårt omslag. Observera att -webkit-backface-synlighet bit är att förhindra en bugg som gör att Webkit flimrar på CSS-övergångar.
Steg 3: Cirkel CSS
Nästa hoppa vi till kodningen den stora cirkeln. Att göra en cirkel i CSS är ganska lätt, bara se till att höjden och bredden är lika och att gränsen är inställd på minst 50%. Allt annat här hjälper bara att placera allt snyggt.
För att få cirkeln att se lite snyggare, lägger vi till en insatsskugga. Slutligen kasta vi i en övergång så att cirkeln kommer att animera den rotation som händer senare.
Om vi tittar på vår levande förhandsgranskning borde vi ha en bra stor cirkel och några andra olika spridda element som vi kommer att ta upp nästa.
Steg 4: Meny CSS
För vårt nästa trick ska vi ställa in menyalternativen. För att göra detta, rikta ankaret, lägg i lite marginal och vaddering, sätt bredden och färgen, ta bort textdekorationen och stila teckensnittet. Rikta sedan på svävarstaten och lägg till en bakgrundsfärg. Här är koden:
Nu om vi tittar på vår live-förhandsgranskning kommer länkarna i vår meny att se mycket trevligare ut. Listobjekten är fortfarande otroligt, men vi kommer att attackera dem nästa.
Steg 5: Little Circle CSS
För att skapa de små cirklarna riktar vi först in på listobjekten och ställer dem upp ungefär som storcirkeln: Gör höjden och bredden lika och sätt gränsen till 50%. Också vara säker på att rensa punkterna, sätt bakgrunden till vit och stryk teckensnittet som du ser nedan.
Här är den knepiga delen. Ovan gav vi varje krets absolut positionering, så nu måste vi skotta dem på plats. Vi kan rikta in på varje enskild cirkel med n: te-barn, använd sedan topp och vänster att knyta dem där vi vill ha dem. Slutligen vill vi göra det så att toppen av varje nummer vetter mot den yttre kanten av den stora cirkeln så att när hela elementet roterar är numret på toppen alltid högt uppåt. Vi gör detta genom att använda en CSS-transformation.
Om vi tittar på vår förhandsgranskning nu är allt ganska bra. Det finns en sak som inte är riktigt ändå?
Steg 6: Inre cirkel CSS
Vårt ursprungliga koncept var inte bara en stor cirkel, det var också centrerad inre cirkel. Vi kan dra av det utan någon extra HTML-markup med vår gamla vän innan. Skapa ett element innan omslag, sätt innehållet till? DS?, gör det till en cirkel som de andra (130px den här gången), anpassa och stil texten, flytta den till toppen med z-index och skott den på plats med absolut positionering.
Det ser mycket bättre ut! Därmed är vår visuella styling helt klar. Nu är allt som är kvar att få denna suger till liv.
Steg 7: Hover Circle CSS
För att göra vår menyspinn måste vi använda vår fjärrträngningslugg kombinerat med en CSS-transform. När användaren svänger över en av de övre menyalternativen, vrider hela cirkelelementet så att motsvarande antal ligger överst.
Den svåraste delen av detta är att bestämma väljaren. Vi börjar på högsta nivå som innehåller både cirkeldivan och menyalternativen. Det här är förstås menyn div. Sedan begränsar vi våra alternativ till ett specifikt barn i menyn och riktar den på svävaren. Slutligen berättar vi till webbläsaren som vi vill agera på några syskon av det objektet svävar över med en klass av cirkel.? Det här ser ut som i praktiken:
Det är ett val av en väljare, men det blir jobbet gjort och är tillräckligt bra för vårt roliga lilla experiment. Nu, eftersom vi riktar in den andra cirkeln här måste vi rotera hela diven med 90 grader. Eftersom vi vill gå moturs kommer numret också att vara negativt:
Det är allt som behövs, nu använder vi helt enkelt denna teknik över alla fyra cirklarna. Vi börjar med en rotation på 0, sedan -90, -180 och slutligen, -270.
Ta en titt!
Grattis, du är klar! Nu är det dags att kolla frukterna av vårt hårda arbete. Här är en demo.
demo: Klicka här för att starta.
Som alltid, tack ett gäng för att läsa och gärna lämna en kommentar nedan för att låta mig veta vad du tycker. Det finns en massa olika sätt att du kan närma sig detta projekt, hur skulle du ha gjort det annorlunda?