Share
I denne opplæringen lager vi en navigasjonslinje som forblir med deg mens du ruller ned - og vi vil også kaste en gimmick eller to i blandingen for å polere den.
"Alle elsker bånd", sier Chris Coyier når han diskuterer dydene til :før og :etter pseudo-elementer. Jeg har sett disse stiliserte, trekantkantede båndene dukker opp over hele Internett (et fremtredende eksempel som Facebooks Introducing Timeline-side), og mens de har en viss appell, må jeg innrømme at den romlige effekten de lager, gjør det bare ikke ' Ikke se rett på meg.
Ribbon er likevel av en grunn, men de bryter det meste flate designparadigmet som vi tradisjonelt er bundet til, og de er en av de få visuelle elementene som gjør det på en uklart måte. Men som det gamle ordtaket sier, burde det være mer enn en måte å skinne en katt - så i denne opplæringen vil jeg foreslå en alternativ visuell stil for slike elementer, som jeg finner mye mer naturlig og estetisk hyggelig. Jeg håper du liker det og nyter godt av det!
I denne opplæringen skal vi bruke en av HTML5s nye elementer, den nav tag, som en beholder for en horisontal liste over lenker. Jeg vil kort forklare hvordan du får det til å se pen ut med litt CSS.
Viktigst av alt, vil du gjøre deg kjent med grunnleggende om jQuery's Waypoints-plugin, som vil gi avansert funksjonalitet: Når brukeren ruller ned, holder navigasjonsfeltet til toppen av visningsporten, samt endrer for å indikere gjeldende del . Som en liten tilpasning bruker vi et annet plugin, ScrollTo, for å gi jevn rulling og praktisk posisjonering når brukeren klikker på navigasjonslinkene.
Jeg er sikker på at du allerede er kjent med de ulike nye elementene som har blitt introdusert med HTML5. I dette eksemplet skal vi gjøre bruk av to av dem: og . Vi skal begynne med følgende:
En rimelig stor overskrift.
Lorem ipsum ...
Vi må gi vår navigasjonslinje en eksplisitt bredde. Gjør den 28px bredere enn innpakningen, og trykk den på plass med en negativ venstre margin. La oss også gi det forsiktig avrundede toppkanter ved hjelp av grensen - * - radius, så vel som noen vilkårlig polstring.
nav posisjon: relativ; bredde: 928px; polstring: 2em; margin-left: -14px; Grense øverst til venstre: 14px 7px; Grense-topp-høyre-radius: 14px 7px;
Deretter skal vi legge til en uordnet liste over koblinger inne i navigeringslinjen, og sette elementene til skjerm: inline-blokk for å sette dem alle på en enkelt linje. Vi trenger ikke noen kuler, så vi vil også kaste liste-stil: ingen inn i blandingen.
nav li display: inline-block; listestil: none;
Frem til nå bør du ha noe slikt:
Nå, hvis bare CSS tillot oss å ha flere pseudo-elementer (dvs.. :: etter :: etter), kunne vi enkelt fullføre de avrundede kantene på navigeringslinjen på en semantisk ren måte. Men vi kan ikke gjøre det, så vi må legge til to ikke-semantiske divs på slutten av nav. Gi dem klassene nav-venstre og nav høyre (eller du kan kalle dem noe fantasifullt, som Castor og Pollux). De er 14px bred ved 14px høye, og er absolutteLy posisjonert 14px fra den nederste enden av nav.
Som vist ovenfor, er border-radius Familie av egenskaper kan ta to verdier for hvert hjørne. De kan også være prosenter av elementets bredde, noe som er ganske praktisk - denne tilnærmingen gjør det mulig for grenseradiusen å tilpasse seg automatisk til endringer i boksens dimensjoner.
De små "skyggene" som fullfører navigasjonslinjens båndutseende, opprettes ved hjelp av ::etter pseudo-elementer. Deres bredde og høyde, samt deres grenseradier, er også satt ved hjelp av prosenter.
/ * bytt 'venstre' med 'høyre' for de andre to * / .nav-venstre posisjon: absolutt; venstre: 0; bunn: -14px; bredde: 14px; høyde: 14px; bakgrunn: # 848a6a; Bensin-venstre-radius: 100% 50%; .nav-venstre :: etter innhold: "; posisjon: absolutt; høyre: 0; bredde: 66%; høyde: 66%; bakgrunn: # 000; grense-topp-venstre radius: 100% 50%; grense -bottom-venstre-radius: 100% 50%;
Og vi er ferdige her!
Etter å ha blitt kvitt mesteparten av den umulige geometrien av rettkjørte bånd, la oss fortsette.
For å oppnå den flytende header-effekten bruker vi et jQuery-plugin som kalles Waypoints, av Caleb Troughton. Den eneste hensikten er å utløse hendelser når brukeren ruller til et bestemt element. Som du vil se, er det ekstremt enkelt, men gir deg mye fleksibilitet - du kan se på flere eksempler på hjemmesiden sin.
Inkluder jQuery og Waypoints på siden din, og la oss komme i gang!
Den første tror du må gjøre er å registrere et veipunkt ved å ringe .veipunkt () metode på et element. Selvfølgelig gjør dette ingenting av seg selv - du må definere en håndteringsfunksjon til arrangementet. Den enkleste måten å gjøre dette på er å overføre denne funksjonen som en parameter til .veipunkt ().
Prøv det nå: Legg til følgende i skriptet ditt og se en melding dukker opp når du ruller forbi navigasjonslinjen.
Accentsconagua
$ (funksjon () // Når siden har lastet, $ ('nav'). veipunkt (// opprett en veipunktsfunksjon () alarm ("Veipunkt nådd.");); Nå, for å oppnå ønsket effekt, blir ting nødvendigvis litt mer komplisert. Først må vi legge inn navigeringslinjen i en beholder, som vil være vårt virkelige veipunkt, og tjene som en praktisk plassholder (mer på dette under).
Opprett følgende CSS-regel i CSS. (Mens du er i det, flytt noen vertikale marginer på nav kan ha til nav-container)
.klebrig posisjon: fast; topp: 0;
Og vi er klar for den gode delen! Endre skriptets innhold til følgende:
$ (funksjon () // Gjør våre DOM-søk på forhånd var nav_container = $ ("nav-container"); var nav = $ ("nav"); nav_container.waypoint (handler: nav.toggleClass ('klebrig', retning == 'ned'););); Ok, hvor pokker kom alt dette fra, spør du med rette. Vel, du har sikkert funnet ut at vi legger til et veipunkt til nav-container; bare denne gangen, gjør vi det annerledes. I stedet for direkte å overføre håndteringsfunksjonen til .veipunkt (), vi encapsulating det i et objekt. På egen hånd gjør det ingen forskjell: begge er helt gyldige måter å gjøre det samme på. Objektet som vi passerer, kan imidlertid inneholde flere andre valgverdier - slik at bruk av det nå gir en mer konsekvent kode senere.
Handler-funksjonen som vi har definert, mottar to parametre: den første er standard jQuery begivenhet objekt, som er av liten interesse her. Den andre er veipunktspesifikke: det er en streng hvis verdi er heller 'ned' eller 'opp' avhengig av hvilken måte brukeren rullet da de nådde veipunktet.
Nå, å vite hvilken vei brukeren går er en svært viktig informasjon å ha, rett og slett fordi det tillater oss å utføre ulike oppføringer i begge retninger. I kroppen av håndteringsfunksjonen bruker vi en relativt lite kjent variant av jQuery's .toggleClass () metode, som gir en nyttig stenografi: I denne syntaksen bestemmer den andre parameteren om klassen vil bli lagt til målelementet eller fjernet fra det. Når brukeren ruller ned, vil uttrykket retning === 'ned' evaluerer til ekte, så vår navigasjonslinje mottar klissete klassen, og stikker til toppen av visningsporten. Så snart brukeren ruller opp igjen, blir klassen fjernet fra navigasjonslinjen, som vender tilbake til stedet. Prøv det nå.
Cool, va? Men hvis du sakte rulle ned forbi veipunktet som du nettopp har opprettet, vil du sannsynligvis legge merke til at når du passerer det, hopper innholdet litt opp på grunn av at navigasjonslinjen blir fjernet fra innholdsstrømmen. Foruten å se veldig slurvet, kan slik oppførsel muligens skjule deler av innholdet ditt og svekke bruken. Heldigvis, alt som trengs, er en enkel løsning - legge til følgende kode i håndteringsfunksjonen din, slik at hoppet går bort.
hvis (retning == 'ned') nav_container.css ('høyde': nav.outerHeight ()); ellers nav_container.css ('height': 'auto'); Det som skjer her er ganske opplagt: vi bruker nav-container som plassholder, som nevnt ovenfor. Når vi ruller ned, utvider vi høyden, og innholdet under holder seg på plass. Det er imidlertid en fangst - for at dette skal fungere som det er noen vertikale marginer som du kanskje vil ha rundt navigasjonslinjen, skal brukes til nav-container og ikke til nav.
Så det er det! Vi har oss en fin, fast navigeringslinje, akkurat som mange andre nettsteder allerede gjør. Vis er over, folkens ...
… eller er det? Vel, det er fortsatt et triks eller to du kanskje vil se, og som kanskje bare legger deg foran pakken. Hvis det er tilfelle, les videre.
Hvis du tenker på det, er det mange tilfeller der utløser en hendelse når et element når kanten av nettleservisningen, er ikke det du vil gjøre. Heldigvis gir Waypoints et praktisk alternativ for det: offset. Slik ser det ut:
nav.waypoint (handler: ..., offset: 50)
offset lar deg lage det faktiske veipunktet på en variabel avstand fra toppen av elementet. En positiv verdi utløser veipunktet når elementets topp er på den angitte avstanden under toppen av visningsporten, og en negativ verdi utløser veipunktet når elementet er så langt over toppen av visningsporten (dvs. at brukeren har rullet godt forbi den ).
Verdien av offset kan være et tall (som representerer en fast mengde piksler), en streng som inneholder en prosentandel (tolket som en prosentandel av visningsportens høyde), eller en funksjon som returnerer et antall piksler. Den siste kan gi litt seriøs fleksibilitet, og vi skal gjøre litt bruk av det senere. For nå, la oss holde fast på faste verdier og se hva de er gode for.
Det første som kommer til å tenke er å legge til litt plass over det klissete elementet. Bruker offset variabel, dette er enkelt: For en 15-pixel offset fra toppen, legg til offset: 15px til .veipunkt ()'s alternativer, og endre top: 0px til top: 15px i .klissete CSS regel.
Hvis designet krever det, kan en liten gradient over navigasjonslinjen også være en fin touch. Dette gjøres enkelt ved å legge til enda en annen div inne i nav, og skriver litt av CSS:
.klebrig .nav-over posisjon: absolutt; top: -15px; venstre: 1em; høyre: 1em; høyde: 15px; bakgrunn: lineær gradient (topp, rgba (255,255,255,1) 0%, rgba (255,255,255,0) 100%); / * legg til kryssbrowsergradientkode etter behov * /
Denne ganske subtile bit øye candy ville fungere pent i minimalistisk design.
En ting som Caleb har gjennomtenkt med i Waypoints, er å kunne generere et veipunkts offsett dynamisk, slik som:
nav.waypoint (handler: ..., offset: function () return - (nav.outerHeight () + 50);)
Dette tillater oss å ha en handler som ville utløse når brukeren allerede har rullet 50px forbi bunnen av elementet uten å måtte vite sin høyde på forhånd.
Merk: Slike prosedyrisk genererte forskyvninger (så vel som de som er oppgitt som prosenter), omberegnes hver gang vinduet blir endret, nye veipunkter blir lagt til, eller et veipunkts alternativer er endret. Hvis du gjør noe annet som kan påvirke posisjonene til veipunktene (for eksempel å endre DOM eller sidelayout), må du ringe $ .waypoints ( 'refresh') etterpå for stillingene som skal omberegnes.
I sammenheng med vår veiledning, er en bruk for denne funksjonaliteten jevnt å skyve navigasjonslinjen fra toppen. Vær forberedt - følgende er den største delen av koden så langt. Det skal ikke være noe i det som du ikke allerede er kjent med, men så går det:
var top_spacing = 15; var waypoint_offset = 50; nav_container.waypoint (handler: funksjon (begivenhet, retning) hvis (retning == 'ned') nav_container.css ('height': nav.outerHeight ()); nav.addClass ("klistret"). stop () .css ("top", -nav.outerHeight ()) .animate ("top": top_spacing); else nav_container.css ('høyde': 'auto'); nav.removeClass ("klebrig") .stop () .css ("topp", nav.outerHeight () + waypoint_offset) .animate ("top": "";, offset: funksjon .outerHeight () + waypoint_offset);); Ikke altfor dårlig! Det er alt ganske vanlig jQuery-pris: så snart vi legger til eller fjerner klissete klasse til nav, Vi overstyrer elementets vertikale posisjon ved hjelp av .css (), og så .animere () det til hva det skal være. De .Stoppe() tjener til å forhindre mulige feil ved å rydde jQuery's eventkø.
Det er en liten bivirkning til dette, men siden koden effektivt tar over navigasjonselementets vertikale posisjon når den er fast, kan du også slippe top: 15px erklæring fra CSS. Hvis du er en del av et stort prosjekt, med separate personer som jobber med design og front-end scripting, kan dette utgjøre et problem siden det er lett å miste oversikten over slike hack. Bare for å fortelle deg at det finnes plugins - for eksempel Ariel Fleslers utmerkede jQuery.Rule som kan brukes til å bygge bro over gapet mellom skript og stilark. Du må selv bestemme om du trenger noe sånt.
Du kan sikkert oppnå en lignende effekt med CSS @keyframes i stedet, men det er mye mindre støtte for dem (og mange leverandør prefikser), de er mindre fleksible, og "opp" animasjonen ville være en stor no-no. Siden vi ikke forlater sporet av progressiv forbedring, er det ingen grunn til ikke å holde fast i jQuerys robuste funksjonalitet.
Du kan finne deg selv å måtte endre hvilket element som er uthevet som leseren går forbi forskjellige deler av siden din. Med veipunkter er dette ganske enkelt å oppnå. Du må legge til følgende i skriptet ditt:
$ (funksjon () ... // kopi fra her ... var seksjoner = $ ('del'); var navigasjon_links = $ ('nav a'); sections.waypoint (handler: funksjon (hendelse, retning) // handler kode, offset: '35% '); // ... til her); Denne gangen bruker vi en offset uttrykt som en prosentandel av vinduets høyde. Effektivt betyr dette at den imaginære linjen som forteller skriptet vårt, hvilken seksjon som for øyeblikket blir vist, er plassert omtrent en tredjedel fra toppen av visningsporten - rett om hvor seeren ville se på når du leser en lang tekst. En mer robust løsning kan bruke en funksjon for å tilpasse seg endringer i navigeringsbjelkens høyde.
Koden som vi skal bruke i vår håndteringsfunksjon er imidlertid litt mindre selvforklarende. Her er det:
var aktiv_seksjon; active_section = $ (dette); hvis (retning === "opp") active_section = active_section.prev (); var active_link = $ ('nav a [href = "#' + active_section.attr (" id ") + '"]'); navigation_links.removeClass ( "valgt"); active_link.addClass ( "valgt"); Først må vi vite hvilken del som for øyeblikket blir vist. Hvis vi ruller ned, er delen som veipunktet tilhører, den samme som blir aktiv. Rulling oppover et veipunkt betyr imidlertid at det er den forrige delen som er tatt i betraktning - så vi bruker .prev () for å velge det. Da fjerner vi valgt klasse fra alle koblinger i navigeringsfeltet, før du bruker den på nytt til den som har href attributtet tilsvarer id av den aktive delen.
Dette fungerer ganske pent; Hvis du vil gå utover å legge til og fjerne klasser, vil du kanskje se etter et plugin som LavaLamp.
På et tidspunkt har du kanskje lagt merke til at det å klikke på koblingene i navigeringsfeltet plasserer toppen av seksjonen øverst i nettleservisporten. Dette er motstridende nok når det ikke er noe som skjuler den delen av skjermen; nå som vi har en navigeringslinje der, blir det en stor irritasjon. Det er her Ariel Fleslers ScrollTo kommer til redning. Ta med den på siden din, og legg til følgende kode:
navigasjon_links.click (funksjon (hendelse) $ .scrollTo ($ (dette) .attr ("href"), varighet: 200, offset: 'left': 0, 'top': - 0,15 * $ .height ());); (selvfølgelig, den koden går over den siste krøllete braceen!)
Selv om det finnes bedre måter å knytte en funksjon til klikk på hendelser, skal vi holde fast ved den enkleste: .Klikk (). De .scrollTo () Metoden kalles på en måte som ligner på .veipunkt (). Det krever to parametre - et rullemål og et objekt som inneholder forskjellige alternativer, som i dette tilfellet er ganske selvforklarende. Den klikkte lenken er href Attributt fungerer pent som et rullemål, og uttrykket som brukes som toppforskyvning, plasserer målet på 15% av visningsportens høyde.
Og det virker som om vi er ferdige. Jeg har introdusert deg til det praktiske lille pluginet som er Waypoints, og vi har gått over noen brukssaker som burde gi deg en ide om de forskjellige tingene du kan oppnå med det. Vi har også implementert en mye mer intuitiv rulleoppførsel for å gå med vår navigasjon. Kast litt Ajax inn i blandingen, og du er på vei mot å bygge den slags sømløse, oppslukende nettopplevelsen som kommer til å være fremtid på nettet ... vel, sannsynligvis vil det være trendy for en kort stund og da bli vanlig, noe som gjør webveteraner nostalgiske om hvordan ting pleide å være. Men hei, det er slik ting går.
Når det gjelder bånd, er deres største ulempe dette: de er bare en illusjon. Sidene av båndet går faktisk ikke rundt kantene på beholderen; de vises bare slik, noe som blir ganske opplagt når båndet går over et element som stikker ut fra kanten av siden.
På grunn av hvordan z-indeksen fungerer, synes det å være ingen enkel måte å løse denne konflikten på, for å unngå å unngå det i utgangspunktet. Men med litt fantasi, så vel som en grunnleggende kunnskap om jQuery, kan du konstruere en måte for disse elementene til Flytt ut av båndets måte som den nærmer seg dem. Å gjøre dette er langt utover omfanget av denne opplæringen, skjønt; forhåpentligvis vil jeg kunne vise det til deg før eller senere i form av et raskt tips, enten her eller på Nettuts +. Følg med!
