hurtigt tip: giv orman er navigation: mål, behandling,,,, vi offentliggjorde for nylig en stor lektion, som byggede orman clark er vertikal navigation menu til en fleksibel, jquery drevet harmonika.det er faktisk muligt at få det hele til at arbejde uden pres på jquery på alle, og det er den perfekte mulighed for at lege med css: mål vælgeren.,,,, så... hvad?skal vi glemme jquery og i stedet bruge css: mål, pseudo - komitéen for at gøre vores harmonika menu, udvide og kontrakt. som en påmindelse om, her er den oprindelige jquery demo, så her er den rent css tilgang.,,,: mål, pseudo - komitéen, du vil uden tvivl være bekendt med internet - adresser det ser sådan ud: http: //www.w3.org /tr /selektorer /&#mål pseudo.det slutter af med en&#tegn og et element id, som anvendes til at tage browser direkte til dette element.denne særlige url er et perfekt eksempel - det tager dig til pos. med en id,&#mål pseudo, (de er fri til at gå og læse). når syet på afslutningen af en url, dette id er kendt som et fragment - id.det er ikke vant til at tage browser til et sted på den side, det kan også anvendes til at identificere via css det pågældende element. kort sagt, vi bruger,: mål, at udvælge og manipulere element i fragment identifikator.,, trin 1: skal vi begynde?lad os starte med at downloade den oprindelige kilde filer fra den første lektion.det ser allerede er gjort for os, så er der ikke megen mening i at genopfinde den dybe tallerken. begynd med åbning. på linje 10, vil de se, at jquery er opført.har vi ikke brug for det, så skil dig af med den. <!doctype html > < http: //lang = ", en" > < head > < meta - charset = "utf - 8" > < afsnit > vertikal navigation menu: css3 kodet < /afsnit > < forbindelse rel = "stylesheet" href = "css /styles. css" > < manuskript src = "http: //ajax. googleapis. kom /ajax /libs /jquery /1.7.1 /jquery. min.js" > < /manuskript > < /head > < krop > så ved foden af det dokument, som de finder den funktion, som får jquery harmonika op og køre.fjern alt det., <!- indlede en harmonika - > < manuskript type = "tekst /javascript" > $(function() {var menu_ul = $(. menu > li > ul '), menu_a = $(. menu > li > a) menu_ul. hide(); menu_a. klik (funktion (e) (f. preventdefault(); hvis (!$(det). hasclass ('active ')) (menu_a. removeclass ('active'); menu_ul. filter ("synlig"). slideup ('normal) $(det). addclass ('active '). next(). stop (sandt). slidedown ('normal)} andre {$(det). removeclass ('active) $(det). next(). stop (sandt). slideup ('normal))))); < /manuskript >, fremragende.vi har nu en meget renere grundlag.,, trin 2: må jeg se noget id?som nævnt ovenfor er: mål, komitéen vil punkt på ethvert element, som er omhandlet i stykket - id.We therefore need to make sure our primary list items all have unique IDs, and that the anchors within them have corresponding links:, \t\t<li class="item1" id="one"><a href="#one">Friends <span>340</span></a> \t\t\t<ul> \t\t\t\t<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li> \t\t\t\t<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li> \t\t\t\t<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li> \t\t\t</ul> \t\t</li>,Now, when you click on the links, you'll see a fragment identifier appear in the url:, , Step 3: Collapse,Currently, having har fjernet alle jquery ting og sager, var fuldt ud vil blive udvidet.vi har brug for sin oprindelige tilstand er brudt sammen, så vi kan afsløre de enkelte afsnit, da forbindelserne er sammen. og tage over til de eksisterende css fil, vi er nødt til at tilføje nogle regler til bunds: /* yderligere styles * /. menu > li > ul (højde: 0; overløb: skjult.}, vi peger på vores submenus her; en direkte efterkommer af. menu liste poster.vi siger, at deres oprindelige højde er 0, og at eventuelle overskydende er skjult for at forhindre indhold på vej til lyset.vi har nu hele kollapsede.og det er, hvordan det vil være, hvis vi ikke gør noget..., trin 4: og udvide, vil vi hver submenu at udvide, men først når vi har klikket på dets moderselskab, link.lad os bruge: mål, at udvælge dem,. menu > li: målet er > ul (højde: auto.}, simpelthen, det siger: "se, at li, som er nævnt i adressen?- ændre højden af ul inden for det til auto ".når du klikker på et andet sted, og det id, ikke længere findes i url, submenu bryder sammen igen.prøv det!,, løntrin 5: forskønnelse, visuelt, er der et par ting tilbage at gøre.aktiv tilstand er ikke længere tildeles af jquery, så vi er nødt til at sørge for, at vores: liste over mål, der er blå.disse ikke længere eksisterer:,. menu > li > a.active,. menu > li a.active levetid, så bytter dem for disse:,. menu > li: målet er > a. menu > li: målet er > en levetid, vil vi også tilføje en grænse på bunden af vores udvidede submenus:,. menu > li: målet er > ul (højde: auto; grænseoverskridende nederst: 1px fast쥣a;}, okay, orman vil være tilfreds med, at:) se, hvad vi har nu.,, trin 6: overgange, - ved.du råber på skærmen, "hvad med en gnidningsløs overgang?"jeg er bange for, at du bliver skuffet.medmindre vi angiver en bestemt højde for submenus, kan vi ikke bruge css overgange til gnidningsløst, udvide og kollapse vores harmonika.overgangen vil ikke lege pænt, højde: auto.selvfølgelig, du kan angive en bestemt højde:,. menu > li: målet er > ul (højde: 7.9em; grænseoverskridende nederst: 1px fast쥣a;}, og derefter anvende overgangene:,. menu > li > ul (højde: 0; overløb: skjult - webkit overgang: højde 0.3s let i ud, - - 0.3s lette overgangen: højde i ud, - o-transition: højde 0.3s let i. - fru overgang: højde 0.3s let i ud; overgangen: højde 0.3s let i.},... men din menu, ikke længere vil være 100% fleksibel.du vil være begrænset til et bestemt antal (3) af submenu poster.tjek demo.,,, hvad vi kunne gøre, for at glatte tingene ud, er at tilføje en overgang til en anden ejendom.vi kan ikke have højden overgang, så nøjes vi med en uklarhed overgang,. menu > li > ul (højde: 0; overløb: skjulte; uklarhed: 0; filter: alfa (uklarhed = 0) /* ie6-ie8 * /- webkit: uklarhed i 0.9s lette overgangen ud, - - 0.9s lette overgangen: uklarhed i ud, - o-transition: uklarhed 0.9s let i. - fru overgang: uklarhed 0.9s let i ud; overgangen: uklarhed 0.9s let i.}. menu > li: målet er > ul (højde: auto; grænseoverskridende nederst: 1px fast쥣a; uklarhed: 1; filter: alfa (uklarhed = 100) /* ie6-ie8 * /}, hvad vi har gjort, er at sætte misligholdelse opaciteten af den submenu - 0; det er ikke blot har en højde på 0, det er nu åben.vi så også sætte overgange på misligholdelse.i den stat, der stadig billeder på vid gab, men indholdet stilles i udsigt.lidt lettere for øje.,, trin 7: arv - browsere, et andet spørgsmål er, at målet, ikke anerkendes af ældre browsere (internet explorer 8 nedenfor), så vores kollapsede menu er ubrugelige i disse browsere.lad os anvende et par af alternative metoder, som i det mindste vil gøre sejlads tilgængelige. for det første vil vi tilføje en betinget bemærkning (efter vores første css anmodning) til at trække i en sekundær css fil, hvis browser er internet explorer 8 eller tidligere:, <!- hvis lte - dvs. 8] > < forbindelse rel = "stylesheet" href = "css /ie8. css" > <![endif] - > og i den sag, vi blot gentager de regler, vi har arbejdet på, men i stedet for at bruge: mål, vi anvender,: svæv,.,. menu > li: svæv > ul (højde: 7.9em; grænseoverskridende nederst: 1px fast쥣a;), igen, se lige den demo.ikke helt det, vi ledte efter, men det er i det mindste en baglæns forenelig, tilgængelige navigation.,, indgåelse, i betragtning af de valg, du vil sikkert stadig mulighed for at jquery fremgangsmåde; det er også anerkendt i alle browsere (så længe javascript er aktiveret, og virkningen er bedre.stadig, hvis du ikke var klar over, at målet, vælgeren, hurtige tip vil forhåbentlig har givet dem et indblik i mere css potentiale.
