Share
Vi publicerade nyligen en bra handledning som byggde Orman Clarks vertikala navigationsmeny i ett flexibelt, jQuery-driven dragspel. Det är faktiskt möjligt att få allting att fungera utan att luta sig på jQuery alls och är den perfekta chansen att spela med CSS: målväljare.
Vi kommer att glömma jQuery och istället använda CSS :mål pseudo-väljaren för att göra vår accordeonmeny utökad och kontrakt.
Som en påminnelse här är den ursprungliga jQuery-demo, då är det rent CSS-tillvägagångssättet.
Accentsconagua
:mål Pseudo SelectorDu kommer säkert att känna till webbadresser som ser ut så här: http://www.w3.org/TR/selectors/#target-pseudo. Det slutar med ett # tecken och ett element-ID, som används för att ta webbläsaren direkt till det elementet. Denna speciella url är det perfekta exemplet - det tar dig till rubriken med ett ID av # Mål-pseudo (gärna gå och läsa upp).
När det sys på slutet av en URL, är detta id känt som en fragmentidentifierare. Det är inte bara vanligt att ta webbläsaren till en plats på sidan, den kan också användas via CSS för att identifiera det aktuella elementet.
Kortfattat; vi använder :mål att välja och manipulera elementet i fragmentidentifieraren.
Låt oss sparka av genom att hämta de ursprungliga källfilerna från den första handledningen. Styling är redan gjort för oss, så det finns liten punkt att återuppfinna hjulet.
Börja med att öppna index.html, på rad 10 ser du att jQuery är refererad. Vi kommer inte att behöva det, så bli av med det.
Vertikal navigationsmeny: CSS3 kodad
Sedan vid foten av dokumentet hittar du den funktion som får jQuery-dragspelet igång. Bli av med allt det också.
Excellent. Vi har nu en mycket renare grund.
Som nämnts ovan :mål väljaren kommer att peka på vilket element som avses i fragmentidentifieraren. Vi måste därför se till att våra primära listobjekt har alla unika ID och att ankarna inom dem har motsvarande länkar:
Nu när du klickar på länkarna ser du en fragmentidentifierare visas i webbadressen:
För närvarande, efter att ha tagit bort alla jQuery-bitarna och bobbarna, kommer dragspelet att utvidgas till fullo. Vi behöver dess initiala tillstånd att kollapsas, så att vi kan avslöja varje delsektion när länkarna klickas.
Gå över till den befintliga CSS-filen, vi lägger till några regler längst ner:
/ * ytterligare stilar * / .menu> li> ul höjd: 0; överflöde: gömd;
Vi pekar på våra undermenyer här; någon direkt efterföljare av menyobjekten. Vi säger att deras ursprungliga höjd är 0, och att alla överflöden är dolda för att förhindra att innehållet skjuter in i sikte. Vi har nu hela kollapsat. Och det är hur det kommer att förbli om vi inte gör något åt det ...
Vi vill att varje undermeny ska expandera, men bara när vi har klickat på sin föräldra länk. Låt oss använda :mål för att välja dem:
.meny> li: mål> ul höjd: auto;
Enkelt sagt, säger detta: "Se det li som nämns i url? Jo, ändra höjden på ul i den till auto". När du klickar någon annanstans och id inte längre visas i webbadressen, kollapsar undermenyn igen. Försök!
Visuellt finns det ett par saker kvar att göra. Det aktiva tillståndet tilldelas inte längre av jQuery, så vi måste se till att våra mållistor är blåa. Dessa finns inte längre:
.meny> li> a.active
.meny> li a.active span
Så byt dem för dessa:
.meny> li: mål> a
.meny> li: mål> ett spann
Vi lägger också till en gräns längst ner i våra expanderade undermenyer:
.meny> li: mål> ul höjd: auto; gränsbotten: 1px fast # 51555a;
OK, Orman blir glad med det :) Kolla vad vi har hittills.
Jag vet. Du skriker på skärmen "Vad sägs om de smidiga övergångarna ?!" Jag är rädd att du kommer att bli besviken. Om vi inte anger en bestämd höjd för undermenyerna, kan vi inte använda CSS-övergångar för att smidigt expandera och kollapsa vårt dragspel. Övergångar kommer inte att spela bra med höjd: auto. Självklart du skulle kunna Ange en bestämd höjd:
.meny> li: mål> ul höjd: 7.9em; gränsbotten: 1px fast # 51555a;
och använd sedan övergångar:
.meny> li> ul höjd: 0; överflöde: gömd; -webkit-övergång: höjd 0.3s lätt-i-ut; -moz-övergång: höjd 0.3s lätt-i-ut; -o-övergång: höjd 0.3s lätt-i-ut; -ms-övergång: höjd 0.3s lätt-i-ut; övergång: höjd 0.3s lätt-i-ut;
... men din meny kommer inte längre att vara 100% flexibel. Du kommer att vara begränsad till ett visst nummer (3) av undermenyobjekt. Kolla in demoen.
Vad vi skulle kunna gör, för att släta ut saker, en övergång till en annan egenskap. Vi kan inte ha höjdövergången, så vi kommer att göra med en övergångsövergång:
.meny> li> ul höjd: 0; överflöde: gömd; opacitet: 0; filter: alfa (opacitet = 0); / * IE6-IE8 * / -webkit-övergång: opacitet 0.9s lätt-i-ut; -moz-övergång: opacitet 0.9s lätt-i-ut; -överskridande: opacitet 0.9s lätt-i-ut; -ms-övergång: opacitet 0.9s lätt-i-ut; övergång: opacitet 0.9s lätt-i-ut; .menu> li: target> ul höjd: auto; gränsbotten: 1px fast # 51555a; opacitet: 1; filter: alfa (opacitet = 100); / * IE6-IE8 * /
Vad vi har gjort är inställt på undermenyns standard opacitet till 0; Det har inte bara en höjd på 0, det är nu också transparent. Vi ställer då också övergångarna på standardtillståndet. På svävarläget snäppar det fortfarande vid öppet, men sedan blinkar innehållet i sikte. Lite lättare på ögat.
Ett annat problem är att :mål känns inte igen av äldre webbläsare (Internet Explorer 8 och nedan), så vår kollapsade meny blir oanvändbar i dessa webbläsare. Låt oss tillämpa ett par alternativa metoder, som åtminstone gör att navigationen är tillgänglig.
För det första lägger vi till en villkorlig kommentar (efter vår första CSS-förfrågan) för att dra i en sekundär CSS-fil om webbläsaren är Internet Explorer 8 eller tidigare:
Sedan i den filen upprepar vi helt enkelt de regler som vi just arbetat med, men istället för att använda :mål, vi använder :sväva.
.meny> li: sväva> ul höjd: 7.9em; gränsbotten: 1px fast # 51555a;
Återigen, kolla in demoen. Inte precis vad vi var ute efter, men åtminstone är det en bakåtkompatibel, tillgänglig navigering.
Med tanke på valet kommer du förmodligen fortfarande välja jQuery-tillvägagångssättet. Det är lika accepterat i alla webbläsare (så länge som JavaScript är aktiverat) och effekten är mjukare. Fortfarande, om du inte var medveten om :mål väljaren, kommer denna snabba Tips förhoppningsvis att ge dig en inblick i mer CSS-potential.
