Slik bygger du en off-canvas-navigasjon med jQuery.mmenu

Denne opplæringen tar deg med på en rask gjennomgang av jQuery.mmenu, en jQuery-plugin som bidrar til å skape omfattende nettstednavigering. Når vi undersøker det, ser vi hvordan vi kan bruke denne plugin-modulen til å bygge en fra-lerret-meny fra grunnen av.

Hva er jQuery.mmenu?

For den beste beskrivelsen av jQuery.mmenu, går vi over til Github-siden:

"Det beste jQuery-plugin-programmet for app-likt-på-og-av-lerret-menyer med skyveundermenyer for ditt nettsted og webapp.

JQuery.mmenu-pluginet er svært tilpassbart og leveres med mange tilleggsprogrammer (for eksempel tellere og dividere) pluss utvidelser (for eksempel effekter og sideskygger). For de som foretrekker, er den tilgjengelig som et Wordpress-plugin, og det fungerer bra i et bredt spekter av nettlesere!

Komme i gang med jQuery.mmenu

Til å begynne med må du ta en kopi av biblioteket. Dette kan gjøres ved å besøke sin offisielle side, gjennom en pakkebehandling (for eksempel Bower), eller en CDN (for eksempel cdnjs).

Når du er lastet ned, må du inkludere de nødvendige CSS- og JS-filene på sidene dine. 

Vær oppmerksom på at avhengig av menyen du vil bygge, kan det være nødvendig med ulike eiendeler. For eksempel krever en off-canvas-meny jquery.mmenu.css (eller den minifiserte versjonen) og jquery.mmenu.js (eller dets minifiserte versjon) filer. Hvis du vil endre standardoppførselen til menyen (for eksempel flytte posisjonen til høyre), må du også inkludere filene som er relatert til tilleggsarkivet. Hvis det virker forvirrende, og du ikke vil bekymre deg for hvilke er de nødvendige filene, fortsett og bruk "alle" filene (dvs.. jquery.mmenu.all.css og jquery.mmenu.min.all.js ) i prosjektene dine.

I vår demo importerer vi "alle" filene via en CDN. De hode element på vår side vil referere til "alle" CSS-filen:

På samme måte legger vi "alt" -skriptet (og en kopi av jQuery) før avslutningen stikkord:

Så, la oss begynne å bygge menyen!

Sette opp HTML-en

La oss begynne med å forstå strukturen på vår side. Her er den tilsvarende HTML-koden:

Legg merke til at vi plasserer alle elementene, bortsett fra nav element, innenfor en inneholdende div. 

Vi kan bruke et annet element som beholderen, men da måtte vi informere pluginet om denne endringen via den aktuelle konfigurasjonsegenskapen (dvs. offCanvas.pageNodetype eiendom). I tillegg bør vi, hvis det er mulig, unngå å deklarere en rekke CSS-egenskaper for innpakningselementet. Nærmere bestemt anbefaler plugin følgende:

"Denne DIV er best av uten en (min- / maks) bredde og høyde, polstring, kant og margin."

The Markup

Det neste trinnet er å se nærmere på menyenes struktur. Den relevante HTML-koden ser slik ut:

Her har vi brukt litt grei HTML-kode for å bygge menyen vår. Uordnede lister, med nestede lister og lenker. Pluginet forventer ikke spesifikk markering; lykkelig, vi kan bruke hvilken som helst oppføring vi vil ha. 

Vi tilordner en unik identifikator til menyen, som vi vil bruke senere for å instantiere pluginet. Sist men ikke minst skjuler vi det til alle stilene har blitt brukt. Dette trinnet er viktig fordi, ved å legge til følgende CSS-kode, forhindrer vi en ødeleggende FOUC:

nav display: none; 

Nå som vi har utarbeidet vår side, er det på tide å initialisere menyen!

Firing pluggen

Før vi viser hvordan vi kan brette pluginet, la vi først cache noen av våre seleksjoner: 

var $ meny = $ ('# meny'); var $ btnMenu = $ ('.btn-meny'); var $ img = $ ('img');

Nå initialiserer vi det ved å bruke koden nedenfor:

$ menu.mmenu (// konfigurasjonsinnstillinger her);

Vi kan tilpasse standardutseendet og funksjonaliteten til menyen vår gjennom CSS og de tilgjengelige konfigurasjonsinnstillingene. Vi ser noen eksempler på dette i et øyeblikk.

Videre har vi muligheten til å åpne og lukke menyen enten automatisk eller manuelt. I vårt tilfelle viser vi menyen når elementet med btn-Meny klassen er klikket. For å oppnå denne funksjonaliteten vil vi dra nytte av den tilgjengelige APIen. Her er den nødvendige koden:

var api = $ menu.data ("mmenu"); $ btnMenu.click (funksjon () api.open (););

I motsetning vil vi velge å skjule menyen automatisk. Dette er standard oppførsel; utløst når vi klikker på hvilken som helst del av siden, unntatt den delen som tilhører menyen.

Før vi går videre, er det en ting jeg skal nevne. Hvis vi prøver å åpne en undermeny ved å klikke på målmenyelementet (en element), vil dette elementet ikke være helt klikkbart. Spesielt vil undermenyen bare åpne når vi klikker på høyre side av det menyelementet (se liveeksemplet for å forstå denne oppførselen). For å gjøre hel Menyelementet klikkbart, vi må legge til følgende linje av kode:

$ menu.find (".mm-next") .addClass ("mm-fullsubopen");

Endre Off-Canvas-bildet

I denne delen er målet å vise et annet navigasjonsikon, avhengig av tilstanden til menyen vår. Skjermbildet nedenfor visualiserer hva vi vil oppnå: 

De to ikonene angir

For å få det til å skje, jobber vi med åpning og lukking arrangementer. Du finner dokumentasjonen for de hendelsene på siden som er relatert til tillegget "offCanvas". Her er koden vi bruker til å endre ikonene:

api.bind ('åpning', funksjon () $ img.attr ('src', 'arrows_remove.svg');); api.bind ('closing', funksjon () $ img.attr ('src', 'arrows_hamburger.svg'););

Utover hendelsene ovenfor er det også noen få andre å leke med (f.eks åpnet og lukket hendelser) som du kanskje finner nyttige for dine egne prosjekter.

Endre standardbredden

For å endre den forhåndsdefinerte bredden på menyen, kan vi bruke enten CSS eller Sass (ved å endre kildefilene). Som standard er det en minstebredde og max bredde Eiendomsverdiene er lik 140 px og 440px henholdsvis. I vår demo, la oss se hvordan vi kan endre den første max bredde eiendomsverdi gjennom CSS. Nedenfor er CSS-reglene som må overstyres:

.mm-meny maksimal bredde: 350px;  / ** * legg til flere leverandørprefikser * avhengig av nettleserne du målretter mot * / @media alle og (min bredde: 550px) html.mm-åpning .mm-slideout transform: translate (350px, 0) ;  / ** * overstyr denne regelen * hvis du bygger en høyre meny * / @media alle og (min bredde: 550px) html.mm-right.mm-opening .mm-slideout transform: translate (-350px, 0); 

Ytterligere CSS-endringer

På dette punktet fortsetter vi å tilpasse utseendet på menyen. Igjen, vil vi redigere Sass kildefilen for å endre stilene i henhold til våre behov. Ta en titt på reglene som vi vil overstyre nedenfor (for enkelhet har jeg utelatt verdiene til Sass-variablene): 

.mm-meny bakgrunn: mørkere ($ hovedfarge, 10%);  .mm-listview> li> a color: $ text-color; polstring: 20px;  .mm-listview> li> a: svever, .mm-listview .mm-next.mm-fullsubopen: svever + a farge: $ høyde-farge;  .mm-listview> li> a: svever span color: $ text-color;  .mm-menu .mm-listview> li.mm-selected> a: ikke (.mm-next) bakgrunn: transparent url (arrows_check.svg) no-repeat center right 10px; bakgrunnsstørrelse: 30px 30px; tekst-dekorasjon: linje gjennom; 

Tenk nå den siste regelen. Hver gang vi klikker på et menyelement, mottar den mm valgte klassen, så vi kan bruke den väljeren til å stilte den. Men vi vil bare style det aller siste elementet i en utvelgelsesprosess, så vi peker på de som ikke har klassen av mm-next. 

"Om" fører til undermenyen til høyre, men vi har bare stylet den siste linken klikket

Legger til utvidelser og tillegg

I en tidligere seksjon så vi hvordan vi initialiserer plugin. La oss nå utvide sin oppførsel og funksjonalitet ved å overstyr de standard konfigurasjonsalternativene. 

Først endrer vi tittelen som vises over hovedpanelet. 

Deretter inkluderer vi "tellene" og "off-canvas" tilleggene. Denne siste tillegget lar oss endre posisjonen til menyen i forhold til siden. 

Til slutt legger vi til tre utvidelser. Sjekk ut den endelige initialiseringskoden nedenfor: 

$ menu.mmenu (tellere: true, navbar: title: "Menyinnhold", utvidelser: ["sideskygge", "effektzoommeny", "effektzoompaneler"], avKanvas: posisjon: "høyre", zposition: "tilbake");

Konklusjon

I denne opplæringen gikk vi gjennom prosessen med å lage en av-lerret-meny ved hjelp av jQuery.mmenu-plugin. Som et neste trinn, graver du inn i den komplette kilden til vår demo på CodePen. Deretter foreslår jeg at du hopper inn på jQuery.mmenus offisielle side og ser på de ulike interaktive eksemplene som er tilgjengelige. Vis oss dine eksempler i kommentarene!

Hvis du leter etter en rask løsning, ikke glem at Envato Market har en samling av forskjellige CSS- eller JavaScript-menyer og navigasjons widgets. Det er et godt utgangspunkt for ideer og eksempler.