Share
Vi har nylig publisert en flott opplæring som bygde Orman Clarks vertikale navigasjonsmeny inn i et fleksibelt, jQuery-drevet trekkspill. Det er faktisk mulig å få alt til å fungere uten å lene seg på jQuery i det hele tatt, og er den perfekte sjansen til å spille med CSS: målvelger.
Vi kommer til å glemme jQuery og i stedet bruke CSS :mål pseudovelger for å gjøre vår trekkspillmeny utvide og kontrakt.
Som en påminnelse her er den opprinnelige jQuery-demoen, så er det den rene CSS-tilnærmingen.
Accentsconagua
:mål PseudovelgerDu vil uten tvil være kjent med nettadresser som ser slik ut: http://www.w3.org/TR/selectors/#target-pseudo. Det avsluttes med et # tegn og et element-ID, som brukes til å ta nettleseren direkte til det elementet. Denne spesielle nettadressen er det perfekte eksempelet - det tar deg til overskriften med et id av # Target-pseudo (vær så snill å gå og lese).
Når stikket er på enden av en URL, er dette ID kjent som et fragmentidentifikator. Det er ikke bare vant til å ta nettleseren til et sted på siden, det kan også brukes via CSS for å identifisere elementet i spørsmålet.
Kort oppsummert; vi bruker :mål å velge og manipulere elementet i fragmentidentifikatoren.
La oss sparke ved å laste ned de opprinnelige kildefilene fra den første opplæringen. Styling er allerede gjort for oss, så det er lite poeng i å gjenoppfinne hjulet.
Start med å åpne index.html, på linje 10, så får du se at jQuery er referert. Vi vil ikke trenge det, så bli kvitt det.
Vertikal navigasjonsmeny: CSS3 kodet
Så ved foten av dokumentet finner du funksjonen som får jQuery-trekkspillet oppe. Bli kvitt alt det også.
Utmerket. Vi har nå en mye renere grunnlag.
Som nevnt ovenfor, :mål velgeren vil peke på hvilket som helst element som refereres til i fragmentidentifikatoren. Vi må derfor sørge for at våre primære listeposter alle har unike IDer, og at ankrene i dem har tilsvarende lenker:
Nå, når du klikker på koblingene, ser du en fragmentidentifikator vises i webadressen:
For øyeblikket, etter å ha fjernet alle jQuery-biter og bobs, vil trekkspillet bli utvidet fullt ut. Vi trenger sin opprinnelige tilstand for å bli kollapset, slik at vi kan avsløre hver delseksjon når linkene klikkes.
Gå over til eksisterende CSS-fil, vi skal legge til noen regler nederst:
/ * flere stilarter * / .menu> li> ul høyde: 0; overløp: skjult;
Vi peker på våre undermenyer her; enhver direkte etterkommer av menyen. Vi sier at deres innledende høyde er 0, og at overløp er skjult for å hindre at innholdet presser seg inn i visningen. Vi har nå alt sammen kollapset. Og det er slik det vil forbli med mindre vi gjør noe med det ...
Vi vil at hver undermeny skal utvides, men bare når vi har klikket på overordnet lenke. La oss bruke :mål å velge dem:
.meny> li: mål> ul høyde: auto;
Enkelt sagt, dette sier: "Se det li som nevnes i url? Vel, endre høyden på ul i den til auto". Når du klikker et annet sted og id ikke lenger vises i webadressen, kollapser undermenyen igjen. Prøv det!
Visuelt er det et par ting igjen å gjøre. Den aktive tilstanden er ikke lenger tildelt av jQuery, så vi må sørge for at våre mållister er blå. Disse eksisterer ikke lenger:
.meny> li> a.aktiv
.meny> li a.active span
Så bytt dem ut for disse:
.meny> li: mål> a
.meny> li: mål> et span
Vi legger også til en ramme i bunnen av våre utvidede undermenyer:
.meny> li: mål> ul høyde: auto; grensebunn: 1px solid # 51555a;
OK, Orman vil være fornøyd med det :) Sjekk ut hva vi har så langt.
Jeg vet. Du roper på skjermen "Hva med de glatte overgangene ?!" Jeg er redd for at du kommer til å bli skuffet. Med mindre vi spesifiserer en bestemt høyde for undermenyene, kan vi ikke bruke CSS-overganger til jevnt å utvide og kollapse trekkspillet vårt. Overganger vil ikke leke pent med høyde: auto. Så klart du kunne spesifiser en bestemt høyde:
.meny> li: mål> ul høyde: 7.9em; grensebunn: 1px solid # 51555a;
og bruk deretter overganger:
.meny> li> ul høyde: 0; overløp: skjult; -webkit-overgang: høyde 0,3 lett-i-ut; -moz-overgang: høyde 0,3 lett-i-ut; -o-overgang: høyde 0,3 lett-i-ut; -ms-overgang: høyde 0,3 lett-i-ut; overgang: høyde 0,3 lett-i-ut;
... men menyen din vil ikke lenger være 100% fleksibel. Du vil bli begrenset til et bestemt nummer (3) av undermenyelementene. Sjekk ut demoen.
Hva vi kunne gjør bare for å glatte ting ut, legg til en overgang til en annen eiendom. Vi kan ikke ha høydeovergangen, så vi skal gjøre med en overføringsovergang:
.meny> li> ul høyde: 0; overløp: skjult; opasitet: 0; filter: alfa (opasitet = 0); / * IE6-IE8 * / -webkit-overgang: opacity 0.9s easy-in-out; -moz-overgang: opacity 0.9s easy-in-out; -Overgang: Opacity 0.9s Easy-in-Out; -ms-overgang: opacity 0.9s easy-in-out; Overgang: Opacity 0.9s easy-in-out; .menu> li: target> ul høyde: auto; grensebunn: 1px solid # 51555a; opasitet: 1; filter: alfa (opasitet = 100); / * IE6-IE8 * /
Det vi har gjort er satt standard opacity av undermenyen til 0; Ikke bare har den en høyde på 0, den er nå også gjennomsiktig. Vi stiller deretter overgangene på standardstatus. På hover-tilstanden sniker det seg fortsatt åpent, men da blir innholdet synlig. Litt lettere på øyet.
Et annet problem er at :mål blir ikke gjenkjent av eldre nettlesere (Internet Explorer 8 og under), slik at vår sammenbruddte meny blir gjort ubrukelig i disse nettleserne. La oss bruke et par alternative metoder, som i det minste vil gjøre navigasjonen tilgjengelig.
For det første legger vi til en betinget kommentar (etter vår første CSS-forespørsel) for å hente i en sekundær CSS-fil hvis nettleseren er Internet Explorer 8 eller tidligere:
Så i den filen gjentar vi bare reglene vi nettopp har jobbet med, men i stedet for å bruke :mål, vi bruker :sveve.
.meny> li: svever> ul høyde: 7.9em; grensebunn: 1px solid # 51555a;
Igjen, sjekk ut demoen. Ikke akkurat det vi var etter, men i det minste er det en bakoverkompatibel, tilgjengelig navigasjon.
Gitt valget, vil du sannsynligvis fortsatt velge jQuery-tilnærmingen. Det er like akseptert i alle nettlesere (så lenge JavaScript er aktivert) og effekten er jevnere. Fortsatt, hvis du ikke var klar over :mål velgeren, vil denne Quick Tip forhåpentligvis gi deg et innblikk i mer CSS potensial.
