Hvordan bygge en Lava-Lamp Style Navigasjonsmeny

For noen uker siden, opprettet jeg en screencast som viste hvordan man kan bygge en navigasjonsmeny på tre nivåer. I en svar-e-post ba en av våre lesere om en veiledning om hvordan man bygde en lava-lampestil-meny. Heldigvis er det ganske enkelt en oppgave, spesielt når du bruker et JavaScript-bibliotek. Vi skal bygge en fra grunnen i dag.

Foretrekker en Screencast?

Trinn 1 Opprett markeringen

Før vi kan skape denne fine funksjonaliteten, trenger vi en base hvorfra vi skal jobbe fra. I din favorittkodeditor må du opprette en uordnet liste for navigasjonen din, og importere både jQuery og jQuery UI, via Google.

     SpasticNav Plugin      Hjem
 Handle om
 bloggen
 Mer om min portefølje
 Ta kontakt med

Legg merke til hvordan vi ga et id med "valgt" til hjemmesiden. Dette er ganske vanlig på de fleste nettsteder; det tillater bruk for å målrette mot den gjeldende siden, og utforme det aktuelle listeelementet tilsvarende.

Deretter må vi bestemme hvordan du best kan utføre lava-lampens funksjonalitet. For å tillate gjenbruk, pakker vi dette lille skriptet inn i et plugin, og kaller det som:

 $ ( '# Nav') spasticNav (.);

Siden vi har bestemt oss for å bygge et plugin, la oss gå videre og opprette en ny fil for det skriptet, og referer det til i vår mark-up. Vi kaller det jquery.spasticNav.js.

Trinn 2 begynner pluggen

For å redusere antall globale variabler som vi må opprette, samt fjerne muligheter for $ symbolet som knytter sammen med andre JavaScript-biblioteker, la oss pakke inn plugin-en i en selvutførende anonym funksjon.

 (funksjon ($) ) (jQuery);

Nå blir jQuery sendt inn i pluginet vårt, og vil bli representert via $ symbolet.

Deretter er det generelt en god praksis å gi brukerne av plugin så mye fleksibilitet som mulig. Som sådan gir vi dem muligheten til å passere inn i en objekt-bokstavelig når de kaller pluginet for å overstyre en håndfull innstillinger. Som jeg ser det, skal de kunne:

Still størrelsen på overlappingen for vår lille klump. Dette refererer til hvor mye blokken vil overstige høyden på navigasjonsmenyen.
Still inn hastigheten
Angi en tilbakestilling, noe som får bloben til å flytte tilbake til gjeldende sideelement (forutsatt at brukeren aldri klikker på en lenke)
Sett fargene på blob. Dette kan oppnås med CSS, men det er en fin bekvemmelighet, likevel.
Still inn lette alternativet.

Nå kaller vi pluginet, og gjør det lik en funksjon. $ .fn er ganske enkelt et alias for jquery.prototype.

 $ .fn.spasticNav = funksjon (alternativer) ;

Å vite at vi vil tillate disse overstyringene, må vi sørge for at vi aksepterer en "alternativer" -parameter.

Trinn 3 Konfigurasjonsalternativer

Nå som vi har kalt vår plugin, er neste trinn å opprette konfigurasjonsalternativene.

 alternativer = $ .extend (overlapping: 20, hastighet: 500, tilbakestill: 1500, farge: '# 0b2b61', lettelse: 'easeOutExpo', alternativer);

Ovenfor tar vi alternativvariabelen, angir noen standardegenskaper og verdier, og utvider den med hva som helst (hvis noe) brukeren passerer inn når de kaller pluginet. På den måten vil alternativene de overgår, overstyre standardinnstillingene. For eksempel, hvis jeg, når jeg kaller dette pluginet, passerer:

 $ ('# nav'). spasticNav (speed: 2000, easing: 'easeOutElastic');

Disse to egenskapene vil overstyre standardinnstillingene, mens resten av alternativene forblir de samme.

Trinn 4 Implementering av funksjonaliteten

Nå er vi klare til å sykle gjennom hvert element som ble sendt til dette pluginet, og implementere lava-lampens funksjonalitet. Husk at vi ikke kan anta at brukeren skal sende et enkelt element til dette pluginet. De kunne, hvis de ville, referere til en klasse, som refererer til flere elementer som skal motta denne funksjonaliteten. Som sådan vil vi ringe this.each for å iterere over hvert element i det innpakket settet.

 returner this.each (funksjon () );

Innenfor denne funksjonen oppretter vi noen variabler. Ikke alle av dem vil umiddelbart ha verdier, men siden JavaScript-motoren heiser alle variable navn til toppen av funksjonen uansett (bak kulissene), er det generelt en god praksis å deklarere dem øverst, og deretter initialisere dem senere.

 var nav = $ (dette), currentPageItem = $ ('# valgt', nav), blob, nullstille;

nav: "Caches" dette, pakket inn i jQuery-objektet.
currentPageItem: Inneholder listeposten med et valgt ID. Vi sender en andre parameter for å angi konteksten for å søke fra. På den måten trenger vi ikke å krysse hele dommen for å finne dette elementet.
blob: For mangel på et bedre ord, vil denne variabelen referere til highlighter, som følger musen vår når vi svinger over menyen.
tilbakestille : Dette lagrer en referanse til setTimeout-funksjonen som vil opprette senere. Det er nødvendig for å ringe clearTimeout. Mer om dette snart ...

Nå som vi har erklært / initialisert våre variabler, la oss lage den faktiske bloben, så å si.

 $ ('') .css (width: currentPageItem.outerWidth (), høyde: currentPageItem.outerHeight () + options.overlap, left: currentPageItem.position (). venstre, topp: currentPageItem.position (). topp - options.overlap / 2, backgroundColor: options.color). AppendTo (dette);

Årsaken til at vi ringer CSS-metoden, i stedet for å bare legge til en klasse, er fordi disse verdiene vil variere avhengig av listen i den nåværende siden. Som sådan må vi bruke JavaScript for å hente de verdiene.

bredde: Få bredden på currentPageItem, inkludert eventuelle grenser og polstring.
høyde: Få høyden på currentPageItem, inkludert eventuelle grenser og polstring. Legg også til mengden overlapping for å få blokken til å strekke seg utenfor menyen.
venstre: Setter den venstre egenskapen til bloben lik den venstre posisjonen til det aktuellePageItem. (Vi må sette en posisjoneringskontekst i vårt CSS for at denne verdien skal tre i kraft.)
topp: Setter også den øverste verdien, og setter vertikalt blokken fast.
bakgrunnsfarge: Angir bakgrunnsfargen.

Til slutt legger vi til dette nye listeposten til dette, eller #nav.

Deretter må vi lagre en referanse til #blob. På den måten trenger vi ikke å søke i DOM hver gang vi ønsker å få tilgang til det. Vi erklærte blob variabel øverst på funksjonen. La oss initialisere det.

 blob = $ ('# blob', nav);

Trinn 5 The Hover Event

Vi må nå "lytte" til når brukeren svinger over en av listepostene (unntatt blob selvfølgelig) i vår navigasjonsmeny. Når de gjør det, vil vi sette bredden og venstre egenskapene til bloben lik den for den aktuelle svingte listeposten.

 $ ('li: not (#blob)', nav) .over (funksjon () // mus over clearTimeout (reset); blob.animate (left: $ (this) .position (). venstre, bredde: $ (dette) .width (), varighet: options.speed, easing: options.easing, kø: false);, funksjon () // mouse out reset = setTimeout (funksjon () blob.animate (bredde: currentPageItem.outerWidth (), venstre: currentPageItem.position (). left, options.speed), options.reset););

For å oppsummere skriptet ovenfor ...

Få alle listeplassene - ikke #blob - i navigasjonsmenyen, og når de svinger over, kjør en funksjon.
Animer blokken, og sett dens venstre og breddeverdier lik den for den svarte listen.
Pass et objekt bokstavelig som den andre parameteren for animering, og sett lengden og lempelsen lik det vi angir i våre konfigureringsalternativer. Sett kø til falsk for å forhindre animasjonsoppbygging.
Når de musen ut, ring setTimeOut, som vil skyve blob tilbake til gjeldende sideelement. Hvis vi ikke gjorde dette, og brukeren ikke klikket på en navigasjonslink, viste menyen at de var på
en annen side helt. Dette vil etter en eller annen gang animere blob tilbake til currentPageItem.

Og det er alt der er til det! Dette er en super enkel plugin. Det neste trinnet er å stile vår navigasjonsmeny.

Trinn 6 Styling the Menu

Uten styling bør vår meny se ut som dette:

La oss først stilen "nav" ul. Åpne din style.css-fil, og legg til:

 #nav posisjon: relative; bakgrunn: # 292929; flyte: venstre;

Deretter skal vi utforme hvert listeelement.

 #nav li float: left; listestil: none; grense-høyre: 1px solid # 4a4a4a; border-left: 1px solid svart;

Dette flytter bare hvert listepunkt til venstre, og legger til en kantlinje til hver side.

Når vi går videre, må vi anke ankeretiketter i vår navigasjonsmeny.

 #nav li a color: # e3e3e3; stilling: relativ; z-indeks: 2; flyte: venstre; skriftstørrelse: 30px; font-familie: helvetica, arial, sans-serif; tekst-dekorasjon: ingen; polstring: 30px 45px;

Vi setter en farge, flyter dem til venstre, setter inn noen skriftverdier og en sunn mengde polstring. Ta vare på z-indeksegenskapen. Dette er en nødvendighet, og vil bli forklart kort tid. Men husk at for å kunne justere z-indeksen må vi sette en posisjoneringskontekst, som vi har gjort.

Fordi vi ikke implementerer et fullstendig tilbakestilt stilark, la oss sørge for at vi nullstiller noen standardmarginer og utfylling på ul og li, for å redde potensielle hodepine.

 ul, li margin: 0; polstring: 0;

Det siste skrittet er å stilte blokken selv!

 #blob border-right: 1px solid # 0059ec; border-left: 1px solid # 0059ec; posisjon: absolutt; topp: 0; z-indeks: 1; bakgrunn: # 0b2b61; bakgrunn: -moz-lineær gradient (topp, # 0b2b61, # 1153c0); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 0b2b61) til (# 1153c0)); -moz-grense-radius: 4px; -webkit-grense-radius: 4px; -moz-boks-skygge: 2px 3px 10px # 011331; -webkit-boks-skygge: 2px 3px 10px # 011331;

Igjen stiller vi noen fine farger for våre grenser, og legger til noen bakgrunnsfarger (inkludert CSS3-gradienter / grenser / skygger for Firefox og Safari / Chrome). Igjen ser vi z-indeksegenskapen. Uten dette vil blokken vise fremfor alt teksten i navigasjonsmenyen. For å motvirke dette må vi være sikre på at z-indeksegenskapen er lavere enn listeposten er! Vi må også sette posisjonen til absolutt for å justere topp- og venstreverdiene med pluginet vårt.

Konklusjon

Det er alt der er til det! Med minimal innsats har vi opprettet en virkelig flott navigasjonsmeny fra grunnen av. Gi meg beskjed hvis du har spørsmål! Takk for at du leser og ser på.

Kode