behandlingen af responderende navigation: fra lærred mønstre,,,, i denne lektion vi går gennem fire ændringer af mønstre, hvor navigations - og side indhold er sat ud af lærred til bevarelse af rummet til anmodede om.det er tid til at stoppe kopiering og slaget, lad os begynde at forstå!,,, at opsummere, den første i denne serie koncentreret om mønstre, hvor sejlads forblev i hovedet.den anden så at mønstre, der flyttede sejlads til fods.den tredje drøftet mønstre, hvor menuen kunne vendes om og., med alle disse mønstre målet har været at mindske den lodrette rumfart indtager på mindre skærme.i dag vil vi flytte dele af den side af lærred, indtil de har anmodet om, i lighed med de tidligere artikler disse mønstre er sikkert bekendt med brad frost, som har udarbejdet nogle af de mønstre, der anvendes på følsomme områder.luke wroblewski er en anden, der har været den idé fra lærred mønstre.,, mønstre, med hoved og fod mønstre, der er mest omarrangeret sejlads for forskellige skærmstørrelse.de greb mønstre vi gemte sejlads, hvis pladsen blev stram og anvendes en knap til at unhide sejlads.fra lærred mønstre arbejde på samme måde som den toggle - mønstre, i og med at de er ude af syne, når vi har brug for at spare på plads og kan anmodes om med et tryk på en knap.i stedet for at være fuldstændig skjult, men de er bare væk fra skærmen eller endog delvis synlige, er der en række forskellige kombinationer af, hvor og hvordan de forskellige dele af side kan bevæge sig offscreen.jeg vil gerne fokusere på denne lektion fire - variationer.,,, sidebar navigation - menuen er beliggende i en aftale af lærred.du er en knap lysbilleder menuen i og lysbilleder størstedelen af indholdet af lærred.vi skal bruge afkrydsningsfelt hacke for klik begivenhed.,, sidebar navigation er, - - det er det samme mønster som ovenfor, bortset fra, at vi vil bruge javascript i stedet for afkrydsningsfelt hacke for klik begivenhed.,, tavler, - dette mønster forskellige indhold i paneler.navigation på toppen af side blev det vigtigste indhold til panelet anmodet om.vi bruger radio knapper til klik begivenhed.,, kom her. - dette mønster er magen til den ovenfor, bortset fra at det giver større uafhængighed ved åbning og lukning af indhold.vi skal også bruge javascript for klik begivenheder.,,, som vi har gjort i denne serie begreber i hvert mønster bygge på dem, der kom før det.i denne forelæsning, vi vil overveje et par forskellige måder til at flytte dele af din http: //struktur og af lærred.css for hver vil være det samme, selv om det vil naturligvis variere med de forskellige strukturer.vi skal også bruge begge css (afkrydsningsfelt og radio knapper) og javascript drevet klik begivenheder.ideelt set ved udgangen af denne forelæsning, du har en god forståelse af de grundlæggende teknikker, der er involveret, og vil være i stand til at ændre dem for at tage hensyn til behov for deres projekt.,, fuldstændig kode for alle disse mønstre, der er ved at downloade led ovenfor, og kan også ses på demo og betragter kildekode.,,,,, det tager nav mønster, det er den enkleste og sandsynligvis mest almindelige af lærred mønster.ved misligholdelse side vil åbne som en enkelt kolonne af indhold.den eneste synlige navigation vil være den ensomme menu - knappen.trykke på knappen, vil forårsage menuen til at glide ind fra venstre, at de fleste af skærmen.den fælles kolonne indhold vil for det meste glide væk til højre, men noget af det vil være synligt,.,,, metode: på små skærme, vi gemmer os i menuen og erstatte det med menuen knap.den knap er bundet til en afkrydsningsfelt med bliver kontrolleret og ikke at skabe 2 medlemsstater.da slog det hele glider til højre viser den fulde menu.du igen på menuen på eller tæt på knap, vi lægger op til toppen af menuen lysbilleder alt tilbage.As the browser is resized larger we'll convert the menu to a horizontal navigation bar as well as convert our single column layout to a 2 column layout., ,Step 1: The HTML, ,With these patterns it's important to see the structure for all the major pieces so I've included more than the menu, though I've stripped out most of what's inside these major pieces to keep things more readable., ,<input id="toggle" type="checkbox" /> <nav> <label class="close" for="toggle" onclick><span>X</span> Close</label> <ul id="nav"> <li><a href="">Back to Post</a></li> <li class="current"><a href="sidebar-nav.html">Sidebar Nav</a></li> <li><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li> <li><a href="sidebar+.html">Sidebar+</a></li> <li><a href="panels.html">Panels</a></li> </ul> </nav> <div class="wrapper"> <div class="inner"> <header> <label class="btn" for="toggle" onclick>Menu</label> </header> \t\t <div class="container main-content"> <div id="content"></div> <div id="sidebar"></div> </div> <section class="subfooter"></section> <div id="footer"></div> </div> </div>, ,The important part to notice is thi de fleste af indholdet er pakket med yderligere to divs, et stykke papir og en indre div. bemærk, at "menu" knap er inde i hovedet, der er inde i disse supplerende divs.det betyder, at de knap glider til højre med vores indhold, da sammen.,, sejlads, er imidlertid uden for disse to supplerende divs og omfatter afkrydsningsfelt, vi tjekker og uncheck.i nav - element, vil vi skabe en etiket, der er forbundet med afkrydsningsfelt for at lukke den menu, selv om menuen knap kan stadig bruges til at lukke menuen samt.,, denne struktur skaber to uafhængige dele.en til menuen og for alt andet.,, trin 2: misligholdelse css,, hvis du læser den foregående forelæsning om greb mønstre, du genkender den knap, - - og det er ccs.stil med knap anvender samme farver, grænse - og hældning radius, som den foregående tutor.,,, hvad der er forskellige, er, at vi nu har flyttet den knap, eftersom den menu er af lærred.også i stedet for at bruge placering her knap er drevet tilbage.dette betyder, at alt glider til højre, knappen glid til højre -.,,. btn {flyde: venstre margen: 1.5em 0 0 0; baggrund:ϧ, polstring: 0.25em 2%; farve:&#fff; markør: point; grænseoverskridende radius: 0.25em; baggrund farve:b5756; baggrund billede: - webkit lineær gradient (top,b6766,b5756); baggrund billede: - moz lineær gradient (top,b6766,b5756); baggrund billede: - ms lineær gradient (top,b6766,b5756); baggrund billede: - o-linear-gradient (top,b6766,b5756); baggrund billede: lineær gradient (top,b6766,b5756)} btn: den {baggrund farve:b7776; baggrund billede: - webkit lineær gradient (top,b8786,b7776); tilbagejorden billede: - moz lineær gradient (top,b8786,b7776); baggrund billede: - ms lineær gradient (top,b8786,b7776); baggrund billede: - o-linear-gradient (top,b8786,b7776); baggrund billede: lineær gradient (top,b8786,b7776);, har vi brug for afkrydsningsfelt for dens funktion, men vi behøver ikke at se det, så tager vi stilling det langt væk fra skærmen.,,&#greb {holdning: absolutte, venstre: - 999em;}, for nu skal vi sejlads væk.vi ordner det standpunkt, da vi ikke ønsker, at den skriftrulle, når synlige, og vi vil også sætte højde på 100%, så det fylder højden af skærmen.hvis du har flere forbindelser, kan man ikke vælge at gøre, men vi har kun et par knytter dette skulle være okay.,, da den menu er senere synlige, ønsker vi ikke, at det at udfylde det horisontalt.om fastsættelse af bredde til 75%, vil give os mulighed for at vise en del af indholdet, da den menu er synlige.at flytte menu fra skærm, vi sætter det er venstre værdi - 75% svarer til den bredde.vi skal også fastsætte en overgangsperiode, så menuen lysbilleder i problemer i stedet for at stå på en gang, de resterende styles tilføje en baggrund og noget polstring til at skubbe forbindelser under tæt på etiketten.,, nav (holdning: faste, venstre: - 75%; bredde: 75%, højde: 100% fyldstof: 5em 0 0 0; baggrund:b3736; - webkit overgang til venstre 0.5s; - moz overgang: venstre 0.5s; - ms overgang: venstre 0.5s; - o-transition: venstre 0.5s; overgangen: venstre 0.5s;}, ønsker vi, at den tæt på etiket til at fungere som en knap så vi satte en markør værdi.det er måske mest interessante her, er, hvordan vi stil x, der er beliggende i en tid i tæt på etiketten.for at skabe en cirkel omkring x - tilføjer vi en grænse, og så en grænse på 50%.for at gøre det mere cirkulær jeg justerede den øverste /bunden og venstre /højre polstring af øje.bemærker, at en anden skrifttype ville kræve, at disse polstring værdier til at ændre.,,. luk {markør: pointer, farve:&#fff;}. tæt: svæv (farve:ϧ.}. tæt ved grænsen: 2px fast&#(fff; grænseoverskridende radius: 50%; polstring: 0.2em 0.4em;},, css for den liste over links til æstetik.den højeste margen på listen er givet en lille bule, men ellers margener og paddings er blevet nulstillet.forbindelsen bliver en nederste grænse, og det for at afslutte den virkning, selve listen bliver en øverste grænse.,, de forbindelser, også får en gradient baggrund for at give dem en lille smule af dybde og deres højde er blevet overdrevet at 4em for at skabe et stort tap område.,,&#nav (margen: 0.1875em 0 0 0: polstring: 0, liste stil: ingen; grænseoverskridende top: 1px fast̉}&#nav en (tekst): ingen; farve:&#fff; polstring: 1em 0 1em 5%; display: blok; grænse nederst: 1px fast̉, højde: 4em; baggrund billede: - webkit lineær hældning (top,b4746,b3736); baggrund billede: - moz lineær gradient (top,b4746,b3736); baggrund billede: - ms lineær gradient (top,b4746,b3736); baggrund billede: - 0inear hældning (top,b4746,b3736); baggrund billede: lineær gradient (top,b4746,b3736)}&#nav a: den {baggrund:b4746; baggrund billede: - webkit lineær gradient (top,b5756,b4746); baggrund billede: - moz lineær gradient (top,b5756,b4746); baggrund billede: - ms lineær gradient (top,b5756,b4746); baggrund billede: - o-linear-gradient (top,b5756,b4746); baggrund billede: lineær gradient (top,b5756,b4746)}, ved første øjekast css for indpakning og indre divs, måske ikke være meget at gøre.begge dele er sat til 100% bredde og indpakning div får en yderligere overløb: skjult.det vil være vigtigt, når vi glider indholdet til højre i næste afsnit.den indre div er udbudt til højre, og vi giver det en overgang til at matche nav element ovenfor.,,. papir (bredde: 100%; overløb: skjult.}. indre {flyde: ret; bredde: 100% - webkit overgang 0.5s; - moz overgang 0.5s; - ms overgang. 0.5s; - o-transition: 0.5s; overgangen: 0.5s;},,,,, trin 3: css til at afsløre den menu, vi bruger afkrydsningsfelt hacke for klik begivenhed så at målrette elementer efter knap har været sammen, vi kan bruge: undersøgt i kombination med en søskende vælgeren.det er faktisk ret let at slide alt til højre.,, nav - element, sætter vi bare det er venstre værdien til 0.det ændrer hele menuen vil glide ind i betragtning og fylder 75% af skærmen (siden vi satte sin bredde 75%).nu, hvor den tætte forbindelse kan vi ordne det til toppen og venstre (du kan lave og ligger på knap i default css så godt.jeg valgte at gøre det her, men der er ingen særlig grund bag dette valg).,,: kontrolleret - nav (venstre: 0}: kontrolleret - nav. luk {holdning: faste, top. 1.5em; venstre: 4%}, at glide indholdet til den ret, vi giver det en højre margen på 75%.det er, hvor det var vigtigt for indpakning div., der skal over holdes skjult.havde det ikke været fastsat den samlede bredde side ville stige.indholdet er godt, men vi ville være i stand til at rulle til venstre og højre for at afsløre og gemme det.det ønsker vi ikke.med overløb: skjult på sin modervirksomhed beholder noget, der ville have været offscreen nu er skjult.,,: kontrolleret ~. papir. indre {margen ikke: - 75%),,,,, trin 4: css i medierne, søgninger, når det er større, end vi har plads nok til at 48em passer den menu horisontalt øverst.det er et stramt, men vi kan stadig ændre menuen til en horisontal navigation bar.,, vi gemmer den menu knap, for det er ikke længere nødvendig og flytte logo til venstre.så alt i hovedet vil enten være flydt eller placeret, må vi sørge for, at den overskrift i sig selv ikke kollapser.her er en lille numse polstring arbejde.,, @ medier skærm og min bredde: 48em) (header (polstring nederst: 5em;} logo (flyde: venstre margen: 1.25em 0} btn (display: ingen.}), og, i tilfælde af bredden af browser var steg, mens menu var åben og indholdet af til højre, vil vi sætte margen på 0.vi vil også slukke overgang, som vi ikke længere ønsker, hvis de browser er ændret igen.,, @ medier skærm og min bredde: 48em) {: kontrolleret ~. papir. indre {margen: 0%; - webkit overgang: 0 - moz overgang: 0; - ms overgang: 0 - o-transition: 0; overgangen: 0}}, at sejlads skal vi nu flyder til højre.vi er også nødt til at sætte den holdning til misligholdelse statisk, og da vi ikke længere behøver at den baggrund, vi sætter det tilbage til gennemsigtig.mens vi er ved det, vi skal nulstille højde, polstring, bredde, og vi slukker overgangen.,, meddelelse om, at det er gjort både nav og nav i kontrolleret.man ved aldrig, hvornår man vil starte med deres browser små og efter at klikke menuen knap, resize browseren bredere.vi kan lige så godt tage højde for den mulighed, @ medier skærm og min bredde: 48em) (nav,: kontrolleret - nav (flyde: ret. position: statiske; baggrund: gennemsigtige polstring: 0. højde: auto; bredde: 100% - webkit overgang: 0 - moz overgang. 0. - fru overgang: 0 - o-transition: 0; overgangen: 0}}, vil vi aldrig skal se den tætte forbindelse, når vores navigations - altid er synlige, så vi sætter sine display til ingen.konstaterer endnu en gang, vi gør dette for både indchecket og ikke - medlemsstater.,, @ medier skærm og min bredde: 48em) (nav. tæt på: kontrolleret - nav. luk (display: ingen;}}, endelig vil vi ændre listen fra lodret til horisontale.vi tager absolut placering på listen, svæver over produkter og bringe dem tilbage til fremvisning i overensstemmelse.en smule polstret forbindelserne og placér et par ting som grænsen og baggrund, og vi er klar.,, @ medier skærm og min bredde: 48em) (# nav (holdning: absolutte, top. 1.5em; ret: 2% grænse: 0} {display: i overensstemmelse&#nav li og flyde: venstre}&#nav li.current en (farve:b7776;}&#nav en {polstring: 0 1.5em; display: overensstemmelse; grænse: 0; baggrund: gennemsigtige;}&#nav a: den {baggrund: gennemsigtige;}&#sidebar {margen top: 5.5em;}}, trin 5.: et fix til programmerbare og androide, jeg dækkede det sidste gang i greb knapper, men det skader ikke at gentage det i tilfælde af, at du gik glip af posten.de har nogle problemer i six afkrydsningsfelt ind under version 6 og androide version 4.1.2.fastsættes der for begge er enkle, men ikke indlysende.,, programmerbare fastsætte er en tom onlclick begivenhed på etiketten er forbundet til afkrydsningsfelt.hvis du bladrer tilbage, kan du se den tomme onclick i html ved begyndelsen af dette mønster.den kunstige livsform fastsætte er falsk informationstiltag på kroppen element, som det fremgår nedenfor, organ {- webkit informationskampagne: bugfix uendelige 1s;} @ - webkit keyframes bugfix {fra {polstring: 0} {polstring til: 0), og med, at vi er færdig med at undersøge sagen nærmere på menuen.,, tanker, dette mønster fungerer godt for et par grunde.det bevarer plads ved at skjule den menu, indtil det er anmodet om.en simpel overgang og glid til højre, gør det klart, hvad der sker.den mobile anordninger menuen er altid bare hanen væk.,, nøglerne til mønster er at oprette et klik (tap) begivenhed, og her afkrydsningsfelt hacke blev anvendt.baseret på den aktuelle afkrydsningsfelt, venstre, højre, venstre eller højre margen, der værdier kan justeres, så dele af side befinder sig, hvor du vil.her er menuen tog op til 75% af den side, hvor synlig, men det kunne let have været 100%, 50% eller en anden værdi,, en anden vigtig nøgle, der er overfyldt gemt på papir div. for at sikre den indre div forsvinder helt, og kan ikke være scrolled, når af lærred.den knap er, hvad vi ønsker at flytte side indhold,.,, eksempler, nedenfor vises nogle eksempler på dette mønster, der anvender css klik begivenheder.de eksempler, som varierer mønsteret lidt og 2 af dem bruger de: mål tilbage til klik begivenhed i stedet for afkrydsningsfelt hack.,,, en anden version af dette mønster på codepen,, csspanelmenu - anvendelser: mål i stedet for: kontrolleret, css tricks forelæsning for csspanelmenu,,, sidebar nav er mønster. dette mønster er stort set det samme som den ovenfor.der er kun én forskel, og det er vigtige her klik begivenhed, vil blive kontrolleret af javascript, der er stadig mere almindeligt anvendt af lærred mønstre.vi vil ændre ovenstående mønster, så det bruger jquery i stedet for afkrydsningsfelt hack.,,, metode: på små skærme, vi gemmer os i menuen og erstatte den med en menu - knappen.vores jquery funktion vil opsnappe klik og tilføje eller fjerne en klasse, så vores css kan få kendskab til staten.styles, der er fastsat i disse klasser vil udvise side opstilling af menuen åben eller lukket.endnu en gang som browser er ændret større vi vil omvende menuen til en horisontal navigation bar samt omsætte vores fælles kolonne indretning til 2 kolonne layout.,, trin 1: http: //,, html i jquery version af mønstret er næsten nøjagtig, hvad vi så.den afkrydsningsfelt input er blevet fjernet, og de to mærker, er blevet omregnet til forbindelser.Otherwise everything below is the same as we saw in the checkbox version of this pattern., ,<nav> <a class="close"><span>X</span> Close</a> <ul id="nav"> <li><a href="">Back to Post</a></li> <li><a href="sidebar-nav.html">Sidebar Nav</a></li> <li class="current"><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li> <li><a href="sidebar+.html">Sidebar+</a></li> <li><a href="panels.html">Panels</a></li> </ul> </nav> <div class="wrapper"> <div class="inner"> <header> <a class="btn">Menu</a> < /header > < div klasse = "container vigtigste indhold" > < div id = "indhold" > < /div > < div id = "aftale" > < /div > <. /div > < afsnit klasse = "subfooter" > < /afsnit > < div id = "lille" > < /div > < /div > < /div >,, trin 2: misligholdelse css, er der endnu mindre forskel her.misligholdelse af css er nøjagtig den samme i begge udgaver af mønster.,,,,, trin 3: css for åbne menu, her er også lignende, men vi er nødt til at foretage et par ændringer.css egenskaber og de samme værdier som ovenfor, men de skal lægges til de forskellige politiske.vi får at se, hvordan disse klasser er tilføjet, og fjernet lige nu, men man kan allerede se, et par ting ved at se på udvælgere.,, kommer vi til at tilføje eller fjerne en åben gruppe nav - element.i den version, vi måtte tage over nav element som søskende af: kontrolleret pseudo - vælgeren.vi skal stadig bruge søskende politiske mod. indre div som nav element og. papir klasse er søskende.,, nav.open {tilbage: 0} nav.open. tæt på {holdning: faste, top. 1.5em; venstre: 4%; display: blok.}. åben ~. papir. indre {margen ikke: - 75%), egenskaber og deres værdier, er de samme, som vi så ovenfor.,, trin 4: css i medierne forespørgsler, endnu en gang css er den samme, som den var i afkrydsningsfelt udgave af dette mønster.den eneste forskel er, at: kontrolleret - nav erstattes med nav.open og kontrolleret ~. papir. indre erstattes af. åben ~. papir. indre.lige som i ovenstående afsnit, stoler jeg på, du behøver ikke at se kode igen, da det er næsten identiske.jeg vil minde dem om, at det er en god idé at mål både åbne og lukkede versioner af nav - element i tilfælde af, at nogen første åbner menuen. og så resizes deres browser, så stil både nav og nav.open og omfatter både for deres efterkommer selektorer vi stil såvel.,, løntrin 5: javascript (jquery), undskyld, du måtte vente.det er virkelig det kød i denne udgave af mønstret.vi begynder ved at beslaglægge det klik på en forbindelse med en klasse af. btn tilføjes.her er vores enlige menu button, ønsker vi at tilføje og fjerne klassen på nav - element.hvis du husker vores knap (a.btn), er det inde i hovedet, som er inde i. indre div., som er inde i. papir div., som er en af dine søskende til nav - element.at boble op fra knap til indpakning div. vi bruger jquery parents() funktion, som finder det nærmeste slægtning, der matcher i stedet for blot den mest umiddelbare.der kan vi få søskende nav element.,, vil vi prøve at se, om de andre elementer allerede har klasse, der anvendes, og hvis det sker, skal vi fjerne klasse.ellers vil vi tilføje det.While most people probably won't reach for the Menu button to close the menu given the layout, we might as well let them in case they do., ,$(document).ready(function() { $('a.btn').click(function() { if($(this).parents('.wrapper').siblings('nav').hasClass('open')){ $(this).parents('.wrapper').siblings('nav').removeClass('open'); } else { $(this).parents('.wrapper').siblings('nav').addClass('open'); } return false; }); $('a.close').click(function() { if($(this).parent('nav').hasClass('open')){ $(this).parent('nav').removeClass('open'); } return false; }); });, ,The close button is inside the nav element so it's a more direct path from it to nav. vi har kun brug for den fælles parent() funktion og behøver ikke at lede længere.også da tæt på knap vil kun vise, når der er tale om nav. vi behøver ikke at tilføje det.det har sikkert ikke brug for at prøve at se, om det er til stede, da det skal være.,, tanker,, hvis du forstod afkrydsningsfelt version af dette mønster, denne anden udgave af jquery bør være ret let at forstå det.vi fjernede afkrydsningsfelt og konverterede etiketter til forbindelser.i landestøttestrategien, hvor vi havde tidligere: kontrolleret - nav, vi bruger nav.open og andre steder, hvor vi tidligere havde: kontrolleret ~. papir. indre, vi bruger. åben ~. papir. indre, den nye lov er det jquery funktion for at tilføje, og fjerne den klasse (svarende til kontrol og unchecking den afkrydsningsfelt).hvis du ved, jquery burde det være let at forstå den funktion.forhåbentlig er det ikke alt for vanskeligt, selv hvis du ikke er bekendt med jquery.vi opsnappede klik og derefter anvendes en jquery funktioner til ind i dom for at komme fra klik til nav - element, vi ville ændre.,, hvilket af de to versioner, du bruger, er op til dig.ingen er perfekt.den afkrydsningsfelt hacke har brug for et par fastsætter for six og androide og vil ikke fungere i ældre versioner af, dvs. javascript sandsynligvis er installeret og aktiv for enhver, der besøger din hjemmeside, men sandsynligvis ikke er den samme som altid.odds er enten mulighed, mister du nogle besøgende, men tvivlsomt mange.,, eksempler, nedenfor, er yderligere demos, der udnytter dette mønster og anvendelse javascript for klik begivenhed.hvis du tager et kig på dem alle, vil du se den demo her er baseret på den ene af david skæppe og jeg har medtaget dave er tutor.en glædelig demo vil se alle forskelligt fra de andre, men det er kernen, det stadig er stort set de samme mønster.en begivenhed, som er fyret, og gennem denne begivenhed i samråd menu er afsløret og de vigtigste indhold ændringer.,,, demo i zurb, demo af david bushell,, tutor for david bushell er demo, jpanelmenu, glædelig - en finere udgave af dette mønster, demo i codrops, demo med jason weaver.,, paneler mønster, dette mønster er forskellige fra de to ovennævnte, selv om det stadig er baseret på de samme grundlæggende idéer.her skal vi strukturere 3 dele af demo (menu, vigtigste indhold og gruppemøde) 3 separate paneler af indhold.i det mindste skærme kun ét panel vil vise, på et tidspunkt.vi vil omfatte nye menu øverst på den side, der giver mulighed for hvert panel.at nogen er det panel, det er forbundet til på skærmen med andre paneler flyttede væk.,,, metode: på små skærme kan vi kun vise et panel i en tid med de vigtigste indhold er misligholdelse panel synlige.vi vil skabe 3 knapper i hovedet, en for hvert panel.disse knapper er alle såkaldte radio knapper.vi skal bruge noget lignende for afkrydsningsfelt hacke (radio knap hacke) til at kontrollere klik begivenhed.hvis en afkrydsningsfelt gør det muligt for to stater, radio knapper mulighed for så mange lande, som vi ønsker.som browser er ændret vil vi vise flere paneler på skærmen på en gang.først skal vi vise to paneler med en skjult, og endelig vil vi vise alle tre paneler af misligholdelse,.,, trin 1: http: //,, nogle ting, som har ændret sig i strukturen i html fra de to foregående mønstre.første nav element med vores menu er nu inde. papir og. indre divs.dette vil gøre det muligt for os at glide alle tre paneler på én gang ved at foretage ændringer til deres moderselskab div. indre, både hoved og fod er blevet trukket ud af. papir og. indre klasser.før vi ønskede hovedet og fod til at flytte med indhold som menuen åbnet.vi ønsker, at de altid være på plads.kun "paneler," vores indhold vil glide af og på skærmen.siden vores knapper, vil forblive på plads, kan vi også fjerne den tætte forbindelse /etiketten.,, inde i hovedet, nu har vi et div., der indeholder tre etiketter, én for hver af de tre paneler.alle har det samme. btn klasse, vi har brugt før, selv om de har deres egne særlige klasse som godt.bemærker, at hver etiket er en anden toggle - eller radio - knappen.de tre radio - input er uden hoved.de deler navn "panel", og hver har en unik id - som man kunne forvente med radio knapper.They're outside the header so they can be siblings of the .wrapper div., ,<header> <div id="panel-nav"> <label class="btn btn-1" for="toggle-1" onclick>Menu</label> <label class="btn btn-2" for="toggle-2" onclick>Content</label> <label class="btn btn-3" for="toggle-3" onclick>More</label> </div> </header> \t\t <input id="toggle-1" name="panel" type="radio" /> <input id="toggle-2" name="panel" type="radio" /> <input id="toggle-3" name="panel" type="radio" /> <div class="wrapper"> <div class="inner"> <nav> <ul id="nav"> <li><a href="">Back to Post</a></li> <li><a href="sidebar-nav.html">Sidebar Nav</a></li> <li><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li> <li class="current><a href="panels.html">Panels</a></li> <li"><a href="sidebar+.html">Sidebar+</a></li> </ul> </nav> <div class="container main-content"> <div id="content"></div> </div> <div id="sidebar"></div> </div> </div> <section class="subfooter"></section> <div id="footer"></div>, ,,, ,Step 2: The Default CSS, ,Some of the default css, such as that which styles the buttons er den samme, som den var over, faktisk er det samme som det var i den sidste artikel.tilsvarende for de grundlæggende se menuen sig med gradient baggrund.jeg vil ikke have nogen nedenfor.i stedet for css nedenfor, er ting, der har ændret sig en smule mere, eller som er nye dette mønster.,, har vi naturligvis at skjule den radio input, og vi vil gøre det på samme måde, som vi har i fortiden.,,&#toggle-1,&#toggle-2,&#toggle-3 {holdning: absolutte, venstre: - 999em;}, når vi nu har bragt vores tre paneler i samme beholdere, vi giver hver enkelt til venstre til at placere dem.de er også i en bredde på 1 /3 af det hele.hvorfor vil blive klart, om et øjeblik.,, nav (flyde: venstre polstring: 0; baggrund:b3736; bredde: 33.334%). de vigtigste indhold {flyde: venstre; bredde: 33.333%}&#sidebar {flyde: venstre polstring: 0, 2%; bredde: 33.333%}, hvorfor de 33. +%).den måde, hvorpå dette mønster fungerer set i de to politiske nedenfor.vi sætter papir til 100% bredde og så gemme sig nogen over indholdet i den.vi sætter bredde. indre div til 300% (1 /3 af, der er 100%), og det er venstre margen til standardlisten - 100% til midt - panelet er synlig.,, da overløb: skjult er kun 1 /3 af bredden af den indre div vil være synlig. på et tidspunkt.1 /3 af denne bredde er bredden af nogen af de tre paneler.med andre ord, kun ét panel kan være synlige, og alt dette panel vil være synlig.,,. papir (bredde: 100%; overløb: skjult.}. indre (bredde: 300% margen: - 100%; - webkit overgang: margen 0.5s; - moz overgang: margen 0.5s; - ms overgangen: margen 0.5s; - o-transition: margen 0.5s; overgangen: margen 0.5s;), og, endelig, da den. indre div., er den, der vil gå, kan vi tilføje den overgang, og som du kan se denne overgang vil kun forekomme, når der er en ændring i margenen af de indre.,.,,,, trin 3: css for at aktivere de paneler, skifter tavler er utrolig let.det var virkelig i oprettet ovenfor.alt hvad vi skal gøre for at vise en anden panel er at tilpasse den venstre margen for. indre. vi er nødt til at være i stand til at få adgang til den. indre div. på grundlag heraf radio knap er udvalgt, så i stedet for at anvende de generiske: kontrolleret, så bruger vi det, der er knyttet til de enkelte radio knapper.,,,,,&#toggle-1 er på menuen,&#toggle-2 er for de vigtigste indhold, og&#toggle-3 er til konference.da alt er flydt efterlod en margen på 0 vil vise den første af disse paneler eller menuen.en venstre margen på 100% fra menuen skærmen og udviser den største indhold.en venstre margen på 200% presser både menuen og største indhold af skærm og viser den nærmere.&#toggle-1: kontrolleret, ~. papir. indre {margen: 0%}&#toggle-2: kontrolleret ~. papir. indre {margen: - 100%)&#toggle-3: kontrolleret.. papir. indre {margen: - 200%},,,,, trin 4: css i medierne, i 48em forespørgsler, vi har plads nok til at vise mere end ét panel, selvom det er for snævert, for at vise dem alle tre.vi har vores valg, hvor to tilstødende paneler til at vise.jeg troede, at i menuen og hovedindholdet af misligholdelse var det mest fornuftige, fordi vores indhold vil altid vise i denne bredde, kan vi fjerne fremvisning af det er radio - knappen.og mens vi er ved det, lad os komme i de resterende to knapper op og til højre.mens jeg ikke viser det under jeg også justeret holdning af logoet og