Idag kommer vi att ha alla slags roliga. Först bygger vi en animerad meny med något glänsande nytt CSS3 samtidigt som vi lär oss hur vi implementerar pseudo-selektorer på ett praktiskt sätt på ett verkligt projekt. Då följer vi upp hur vi bygger samma sak utan pseudo-selektorer för bättre webbläsarsupport. Slutligen slutar vi med en titt på hur man skrotar alla den snygga CSS till förmån för några bra gammaldags jQuery.
Följ med oss när vi granskar inte ett, men tre sätt att hantera en CSS-glidande navigationsmeny!
Varför Pseudo Selectors?
Ett av de främsta syftet med denna artikel är att illustrera ett verkligt världsexempel för att använda pseudo-selektorer som inte är den självklara tabellen handledning.
Pseudo-selektörer får mycket hype på designbloggar men när det kommer dags för kommentarer ser jag alltid samma fråga:? Bra, men när ska jag någonsin verkligen använda dessa ?? Ibland blir vi vana med att använda löjliga och orealistiska exempel för att visa upp lite nytt leksak, medan läsare genast märker det som något? Snyggt? men inte någonting som någonsin kommer att bli praktiskt.
Vår navigationsmeny idag kasta i bara ett par pseudo-selektörer på ett mycket snabbt sätt, vilket är exakt hur du ska använda dessa killar i framtiden.
Vad bygger vi på?
Målet är att skapa en enkel CSS navigeringsmeny bestående av rektangelblock med en röd bakgrund. När användaren svänger över menyalternativet kommer det att finnas en glidande animering och både meddelandet och bakgrundsfärgen på menyalternativet kommer att ändras.
Det är nästan som en garageportöppningseffekt som appliceras via CSS-animationer. Det är ett roligt projekt och den slutliga effekten ser bra ut.
Steg ett: HTML
Vår HTML-struktur är mycket kortfattad, bara en div som innehåller en orörd lista med tre listobjekt. Listobjekten kan se lite otroligt vid första anblicken, var och en har inte en utan två länkar, en direkt efter den andra. Kolla in det:
Varje listobjekt representerar ett navigeringsobjekt. Varje navigeringsobjekt har två olika tillstånd: standard och svävar. De två länkarna representerar varje stat. Lägg märke till hur jag, på svävaren, har ändrat passiva meddelanden till ett samtal till handling:? Om? blir? Möt oss?, hjälper detta subtilt till att uppmuntra klickbeteende.
Det är verkligen all den HTML vi behöver för den här rundan. Du kan redan börja tänka på hur du skulle rikta varje länk i listobjektet annorlunda. Det skulle vara ganska svårt utan våra pseudoväljare.
Steg 2: Startmenyn CSS
För att starta CSS måste vi ställa in menyområdet som helhet. Varje menyalternativ kommer att vara 100px högt med 200px bredt och vi har tre av dem. Det ger oss ett totalt område på 100px med 600px för menyn som helhet. Lägg till i tio pixlar av vaddering för var och en av de tre objekten och vår totala summan blir 100px med 630px.
Efter att ha ställt in höjd och bredd, centrerade jag helt enkelt menyn tillsammans med texten och gömde överflödet, vilket kommer att vara viktigt med animationen senare.
Steg 3: Stil länkarna
Därefter spikar vi ner menyns estetiska. Vi målar först listobjekten och flyter dem till vänster med några marginaler. Sedan följer vi upp det genom att utforma alla länkar i menyn.
I huvudsak vred vi varje länk till ett stort rött block:
Observera att denna styling effektivt har avbrutit den andra länken i varje uppsättning. Vad som händer är att den andra länken i varje listobjekt staplas under den första och bara döljs. Om vi tillfälligt stänger av? Överfyllning: dold? detta blir mycket lättare att visualisera.
Steg 4: Ändra de sekundära länkstilarna
Observera i bilden ovanför att, trots att de har olika text, är de övre och nedre länkarna väsentligen identiska. Låt oss ändra detta lite för att göra övergången mer märkbar. För att göra detta ändrar vi helt enkelt den andra rutan i varje uppsättning till svart och texten till vit.
Den knepiga delen är, hur mäter vi bara den andra länken? Vi har inte inkluderat något i HTML för att ställa in två: inga klasser, inga id, ingenting. Det är här de oh så praktiska pseudo-selektorerna spelar in! Med hjälp av pseudo-selektorer kan vi enkelt rikta oss på varje annan länk genom att använda udda eller jämnt.
Denna väljare ser lite komplicerad så låt oss springa igenom den. Först riktar vi oss till menyns ID, så borrar vi ner till den oordnade listan och mer specifikt ankarkoderna i den listan. Nästa lägger vi till vår pseudovelector?: Nth-of-type (even)?, Som endast riktar sig till den andra länken i vart och ett av våra länkuppsättningar.
Nu kan vi kasta i några stilar för att ställa dem ifrån de röda blocken:
Nu om vi återigen tillfälligt kommenterar? Överflöde: dold? vi kan se att våra länkar har mycket mer differentiering.
Steg 5: Hover Slide Action
Nu är det dags att definiera den åtgärd som kommer att ske på svävaren. I grund och botten vill vi att den röda länken glider upp och ur synvinkel när den svarta länken kommer till synen.
Det låter lätt nog, men när du verkligen ger det lite tanke, blir den här väldigt knepig! Vi vill att den övre länken ska glida upp när vi svävar över knappen, men när det glider ur sikte, kommer du inte att sväva över det längre och orsakar lite riktigt buggy-åtgärder.
Efter en seriös tanke kom jag till följande slutsats. Vi måste rikta hela listobjektet till svängningsevenemanget, det vill säga oavsett om den övre eller nedre länken är i sikte, fungerar allt fortfarande. Men trots att svävar över listobjektet bör utlösa händelsen är det verkligen något annat, den första länken, som behöver flyttas.
Att översätta dessa mål till CSS ser ut så här:
Många människor inser inte det, men du behöver inte agera på det objekt som du ställer in svävartillståndet till. Här utlöser vi svävaren på listobjektet men flyttar det första barnet (tack pseudovelector) av det objektet, vilket i det här fallet kommer att vara den bästa länken.
För att göra denna övergång till en smidig, återgår vi steg 3-koden och lägger till några fina CSS3-övergångar.
Färdiga! Pseudo Selector Version
Därmed är vår första version komplett! Våra animationer ser bra ut och pseudo-selektorerna gör tunga lyft för att hålla vår markering snygg och ren.
demo: Klicka här för att starta.
Ladda ner: Klicka här för att ladda ner alla tre versionerna.
Skrotning av Pseudo Selectors
Jag älskar personligen pseudo-selektörer, attribut väljare och alla andra godsaker som tillhandahålls av CSS3. Stödet är faktiskt ganska bra för dem över hela linjen med nästan alla stora webbläsare som spelar tillsammans, inklusive IE9!
Men den värsta webbläsaren i historien skulle inte bara gå och inte vara en smärta i halsen, så det är naturligtvis något äldre än IE9 kommer att ha problem med dessa väljare. Eftersom de flesta bara har blivit färdiga för att skrapa IE6-stöd, är vi sannolikt år borta från att ignorera IE6 och IE7.
Om du vill implementera denna meny i ett live-projekt är det förmodligen en bättre idé att fortsätta och använda klasser i din HTML istället. Låt oss se hur det fungerar.
html
Med tanke på vårt beslut att kasta bort våra experimentella pseudo-selektörer måste vi lägga till en extra klass för att hjälpa till att rikta den första länken utan att påverka det andra i varje listobjekt. Här kastade jag bara i en topp? klass på varje länk som sitter ovanpå.
CSS
Nu med denna extra markering på plats, behöver vi inte pseudo-selektorerna i vår CSS. Vi kan helt enkelt använda klasser istället, som har universellt stöd.
Färdiga! Non-Pseudo Selector Version
Vår andra version är komplett! För er som inte är angelägna om pseudo-selektörer, här är en version utan dem.
demo: Klicka här för att starta.
Ladda ner: Klicka här för att ladda ner alla tre versionerna.
Använda jQuery för animationerna
Som ett sista alternativ kan du kasta ut CSS-animationerna och utföra samma åtgärder med jQuery (eller använd jQuery som backning via Modernizr).
Bygga på tidigare, icke-pseudo-väljare version, stäng av CSS animationer och kasta i den här jQuery:
Som du kan se, lanserade detta svepseffekten på listobjektet och animerar övergången precis som vi gjorde i CSS. Resultaten är nästan identiska och borde fungera i ungefär varje webbläsare runt, beviljas att de inte har JavaScript inaktiverat.
Min ursprungliga version av detta var lite knäppt med repeterande animationer så en stor hattspets till Adrian Pelletier som har ett liknande projekt som påminde mig om att kasta i jQuery-stoppfunktionen!
Färdiga! jQuery Version
Vår sista version använder samma struktur som den tidigare men slänger ut CSS-övergångarna till förmån för jQuery. Ta en titt.
demo: Klicka här för att starta.
Ladda ner: Klicka här för att ladda ner alla tre versionerna.
Slutsats
Denna handledning gav dig inte en, men tre olika metoder för att uppnå samma fantastiska glidande animerade meny. Den första versionen illustrerar perfekt användbarheten av pseudo-selektorer i verkliga projekt. Den andra tar bort pseudo-selektorerna för dem som letar efter en mer kompatibel version. Den slutliga versionen använder jQuery för animationerna istället för CSS3-övergångar.
Lämna en kommentar nedan och meddela vilken version du skulle använda på din webbplats idag eller hur du skulle tweak det!