Så här bygger du en off-canvas-navigering med jQuery.mmenu

Denna handledning tar dig på en snabb rundtur i jQuery.mmenu, ett jQuery-plugin som hjälper till att skapa omfattande webbplatsnavigering. När vi granskar det ser vi hur vi kan använda det här pluginet för att bygga en meny från menyn från början.

Vad är jQuery.mmenu?

För den bästa beskrivningen av jQuery.mmenu går vi vidare till sin Github-sida:

"Det bästa jQuery-plugin-programmet för app-likna-på-och-av-meny-menyer med glidande undermenyer för din webbplats och webapp.

Plugin jQuery.mmenu är mycket anpassningsbar och levereras med många tillägg (t ex räknare och delare) plus tillägg (t.ex. effekter och sidskuggor). För dem som föredrar, det är tillgängligt som ett Wordpress-plugin, och det fungerar bra i ett brett spektrum av webbläsare!

Komma igång med jQuery.mmenu

Till att börja med måste du ta en kopia av biblioteket. Detta kan göras genom att besöka sin officiella sida via en pakethanterare (t.ex. Bower) eller en CDN (t ex cdnjs).

När du är nedladdad måste du inkludera nödvändiga CSS- och JS-filer på dina sidor. 

Observera att olika tillgångar kan krävas beroende på vilken meny du vill bygga. Till exempel kräver en duk-menymeny jquery.mmenu.css (eller dess minifierade version) och jquery.mmenu.js (eller dess miniverade version) filer. Om du vill ändra menyns standardbeteende (t ex flytta dess position till höger) måste du även inkludera filerna som är relaterade till add-on-funktionen. Om det verkar förvirrande och du inte vill oroa dig för vilka är de nödvändiga filerna, fortsätt och använd "alla" filerna (dvs.. jquery.mmenu.all.css och jquery.mmenu.min.all.js ) i dina projekt.

I vår demo importerar vi "alla" filerna via en CDN. De huvud En del av vår sida kommer att referera till "alla" CSS-filen:

På samma sätt lägger vi "allt" -skriptet (och en kopia av jQuery) före stängningen märka:

Så, låt oss börja bygga menyn!

Ställa in HTML

Låt oss börja med att förstå strukturen på vår sida. Här är motsvarande HTML-kod:

Observera att vi placerar alla element, förutom för nav element, inom en innehållande div. 

Vi kan använda ett annat element som behållaren, men då måste vi informera pluginet om den här ändringen via den relevanta konfigurationsegenskapen (dvs. offCanvas.pageNodetype fast egendom). Dessutom ska vi, om möjligt, undvika att deklarera ett antal CSS-egenskaper för wrappelementet. Närmare bestämt rekommenderar plugin följande:

"Denna DIV är bäst utan en (min- / max) bredd och höjd, vaddering, kant och marginal."

Markup

Nästa steg är att titta närmare på menyns struktur. Den aktuella HTML-koden ser ut så här:

Här har vi använt en rak HTML-kod för att bygga vår meny. Oordnade listor, med kapslade listor och länkar. Plugin förväntar sig inte specifikt markup; Lyckligtvis kan vi använda vilken markering vi vill ha. 

Vi tilldelar en unik identifierare till menyn, som vi använder senare för att instansera plugin. Sist men inte minst döljer vi det tills alla stilar har blivit tillämpade. Det här steget är viktigt eftersom vi, genom att lägga till följande CSS-kod, förhindrar en kränkande FOUC:

nav display: none; 

Nu när vi har förberett vår sida är det dags att initiera menyn!

Avstängning av plugin

Innan vi visar hur vi kan avfyra pluginet, låt oss först cache några av våra väljare: 

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

Nu initierar vi det med hjälp av koden nedan:

$ menu.mmenu (// konfigurationsinställningar här);

Vi kan anpassa standardutseendet och funktionaliteten i vår meny via CSS och de tillgängliga konfigurationsinställningarna. Vi får se några exempel på detta på ett ögonblick.

Dessutom har vi möjlighet att öppna och stänga menyn antingen automatiskt eller manuellt. I vårt fall visar vi menyn när elementet med BTN-meny klassen klickas. För att uppnå denna funktionalitet utnyttjar vi det tillgängliga API: n. Här är den obligatoriska koden:

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

Däremot väljer vi att dölja menyn automatiskt. Detta är standardbeteendet; utlöses när vi klickar på någon del av sidan, förutom den del som tillhör menyn.

Innan vi går vidare finns det en sak som jag borde nämna. Om vi ​​försöker öppna en undermeny genom att klicka på målmenyobjektet (en element) kommer det här objektet inte att vara helt klickbart. Specifikt öppnas undermenyn endast när vi klickar på den högra delen av det menyalternativet (se liveexemplet för att förstå detta beteende). För att göra hel menyalternativ klickbart, vi måste lägga till följande rad kod:

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

Ändra bilden utanför duken

I det här avsnittet är målet att visa en annan navigeringsikon beroende på vår meny. Skärmbilden nedan visualiserar vad vi vill uppnå: 

De två ikonen anger

För att få det att hända jobbar vi med öppning och stängning evenemang. Du kan hitta dokumentationen för de händelserna på sidan som är relaterad till add-onen "offCanvas". Här är det stycke som vi använder för att ändra ikonerna:

api.bind ('öppning', funktion () $ img.attr ('src', 'arrows_remove.svg');); api.bind ('closing', funktion () $ img.attr ('src', 'arrows_hamburger.svg'););

Utöver händelserna ovan finns det också några andra att spela med (t ex öppnad och stängd händelser) som du kanske tycker är användbara för dina egna projekt.

Ändrar standardbredd

För att ändra den fördefinierade bredden på menyn kan vi använda antingen CSS eller Sass (genom att ändra källfilerna). Som standard är dess min-bredd och maximal bredd fastighetsvärden är lika med 140px och 440px respektive. I vår demo, låt oss se hur vi kan ändra det ursprungliga maximal bredd fastighetsvärde genom CSS. Nedan finns CSS-reglerna som måste övervägas:

.mm-meny maxbredd: 350px;  / ** * lägg till fler leverantörs prefix * beroende på vilka webbläsare du riktar in * / @media all och (minbredd: 550px) html.mm-opening .mm-slideout transform: translate (350px, 0) ;  / ** * åsidosätta denna regel * om du bygger en rätt meny * / @media alla och (min bredd: 550px) html.mm-right.mm-opening .mm-slideout transform: translate (-350px, 0); 

Ytterligare CSS-ändringar

Vid denna tidpunkt fortsätter vi med att anpassa menyns utseende. Återigen ska vi redigera Sass-källfilen för att ändra stilen enligt våra behov. Ta en titt på de regler som vi kommer att åsidosätta nedan (för enkelhet har jag utelämnat värdena för Sass-variablerna): 

.mm-meny bakgrund: mörkare ($ huvudfärg, 10%);  .mm-listview> li> a color: $ text-color; vaddering: 20px;  .mm-listview> li> a: svep, .mm-listview .mm-next.mm-fullsubopen: svep + a färg: $ highlight-color;  .mm-listview> li> a: sväng span color: $ text-color;  .mm-menu .mm-listview> li.mm-selected> a: inte (.mm-next) bakgrund: transparent url (arrows_check.svg) no-repeat center right 10px; bakgrundsstorlek: 30px 30px; text-dekoration: linje genom; 

Tänk nu på den sista regeln. Varje gång vi klickar på ett menyalternativ, tar det emot mm-selected klass, så vi kan använda den väljaren för att stila den. Men vi vill bara stila det sista objektet i en urvalsprocess, så vi pekar på de som inte har klassen mm-nästa. 

"Om" leder till undermenyn till höger, men vi har bara stylat den sista länken som klickades

Lägg till tillägg och tillägg

I en tidigare sektion såg vi hur vi initierar plugin. Låt oss nu utöka sitt beteende och funktionalitet genom att överväga standardkonfigurationsalternativen. 

Först ändrar vi titeln som visas ovanför huvudpanelen. 

Därefter kommer vi att inkludera "räknare" och "off-canvas" -tillägg. Den här sista tillägget tillåter oss att ändra menyns position i förhållande till sidan. 

Slutligen lägger vi till tre tillägg. Kolla in den slutliga initialiseringskoden nedan: 

$ menu.mmenu (räknare: true, navbar: title: "Menyinnehåll", tillägg: ["sidoskugga", "effekt-zoom-meny", "effekt-zoom-paneler"], avKanvas: position: "rätt", zposition: "tillbaka");

Slutsats

I denna handledning gick vi igenom processen att skapa en meny utan kanvas med jQuery.mmenu-plugin. Som ett nästa steg, gräva i hela källan för vår demo på CodePen. Då föreslår jag att du hoppa in på jQuery.mmenus officiella sida och titta på de olika interaktiva exemplen som finns tillgängliga. Visa oss dina exempel i kommentarerna!

Om du letar efter en snabb lösning, glöm inte att Envato Market har en samling olika CSS- eller JavaScript-menyer och navigations widgets. Det är en bra utgångspunkt för idéer och exempel.