Cum se construiește o navigare în afara canvasului cu jQuery.mmenu

Acest tutorial vă va face un tur rapid al jQuery.mmenu, un plugin jQuery care vă ajută să creați navigare extinsă a site-ului web. Pe măsură ce o examinăm, vom vedea cum putem folosi acest plugin pentru a construi un meniu în afara canvasului de la zero.

Ce este jQuery.mmenu?

Pentru cea mai bună descriere a jQuery.mmenu, vom trece la pagina Github:

"Cel mai bun plugin jQuery pentru aplicații asemănătoare aplicațiilor on-și off-panvas cu submeniuri alunecoase pentru site-ul dvs. Web și webapp.

Pluginul jQuery.mmenu este foarte personalizabil și conține multe extensii (de ex. Contoare și separatoare) plus extensii (de ex. Efecte și umbre de pagină). Pentru cei care preferă, este disponibil ca plugin Wordpress și funcționează bine într-o gamă largă de browsere!

Noțiuni de bază cu jQuery.mmenu

În primul rând, va trebui să luați o copie a bibliotecii. Acest lucru se poate face vizitând pagina oficială a acestuia, printr-un manager de pachete (de exemplu, Bower) sau un CDN (de exemplu, cdnjs).

Odată descărcate, va trebui să includeți fișierele CSS și JS necesare în paginile dvs.. 

Rețineți că, în funcție de meniul pe care doriți să-l construiți, ar putea fi necesare diferite active. De exemplu, un meniu în afara canvasului necesită jquery.mmenu.css (sau versiunea sa miniaturală) și jquery.mmenu.js (sau versiunea sa miniaturală). Dacă doriți să modificați comportamentul implicit al meniului (de exemplu, mutați poziția sa spre dreapta), va trebui să includeți și fișierele care au legătură cu extensia "off-canvas". Dacă acest lucru pare confuz și nu doriți să vă faceți griji cu privire la fișierele necesare, continuați și utilizați fișierele "toate" (adică. jquery.mmenu.all.css și jquery.mmenu.min.all.js ) în proiectele dvs..

În demo-ul nostru, vom importa fișierele "toate" prin intermediul unui CDN. cap elementul paginii noastre va face referire la fișierul "toate" CSS:

În același mod, vom plasa scriptul "toate" (și o copie a jQuery) înainte de închidere etichetă:

Deci, să începem să construim meniul!

Configurarea codului HTML

Să începem prin înțelegerea structurii paginii noastre. Iată codul HTML corespunzător:

Observați că plasăm toate elementele, cu excepția nav element, într-un conținut care conține div. 

Putem folosi un element diferit ca container, dar prin aceasta trebuie să informăm pluginul despre această modificare prin proprietatea de configurare relevantă (adică offCanvas.pageNodetype proprietate). În plus, dacă este posibil, ar trebui să evităm declararea unui număr de proprietăți CSS pentru elementul de înfășurare. Mai specific, pluginul recomandă următoarele:

"Acest DIV este cel mai bine fără o lățime și înălțime (min- / max-), umplutură, margine și margine".

Marcajul

Următorul pas este să examinați mai atent structura meniului. Codul HTML relevant arata astfel:

Aici am folosit un cod HTML simplu pentru a construi meniul nostru. Liste neordonate, cu liste și linkuri imbricate. Plugin-ul nu se așteaptă marcare specifică; fericit, suntem capabili să folosim orice marcă dorim. 

Atribuiți un identificator unic meniului, pe care îl vom folosi mai târziu pentru a instanți pluginul. Apoi, nu în ultimul rând, îl ascundem până când toate stilurile au fost aplicate cu succes. Acest pas este important pentru că, prin adăugarea următorului cod CSS, împiedicăm o FOUC deranjantă:

nav display: nici unul; 

Acum că am pregătit pagina noastră, este timpul să inițializăm meniul!

Firing Plugin-ul

Înainte de a arăta modul în care putem declanșa plugin-ul, să lăsăm mai întâi cache câteva dintre selectorii noștri: 

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

Acum îl inițializăm folosind codul de mai jos:

$ menu.mmenu (// setările de configurare aici);

Putem personaliza aspectul implicit și funcționalitatea meniului nostru prin CSS și setările de configurare disponibile. Vom vedea câteva exemple de acest lucru într-un moment.

În plus, avem opțiunea de a deschide și a închide meniul fie automat, fie manual. În cazul nostru, vom afișa meniul când elementul cu BTN-meniul clasa este apăsată. Pentru a atinge această funcție, vom profita de API-ul disponibil. Iată codul necesar:

var api = $ meniu de date ("mmenu"); $ btnMenu.click (funcție () api.open (););

În schimb, vom alege să ascundem meniul automat. Acesta este comportamentul implicit; declanșat când faceți clic pe orice parte a paginii, cu excepția părții care aparține meniului.

Înainte de a merge mai departe, mai este un lucru pe care ar trebui să-l menționez. Dacă încercăm să deschidem un submeniu făcând clic pe elementul din meniul destinație (A element), acest element nu va fi pe deplin clicabil. În mod specific, submeniul se va deschide numai când faceți clic pe partea dreaptă a elementului din meniu (consultați exemplul live pentru a înțelege acest comportament). Pentru a face întreg elementul de meniu clicabil, trebuie să adăugăm următoarea linie de cod:

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

Schimbarea imaginii Off-Canvas

În această secțiune, obiectivul este să afișați o altă pictogramă de navigare în funcție de starea meniului nostru. Imaginea de mai jos vizualizează ceea ce dorim să obținem: 

Cele două stări de pictograme

Pentru a face acest lucru, vom lucra cu deschidere și închidere evenimente. Puteți găsi documentația acelor evenimente în pagina care are legătură cu add-on-ul "offCanvas". Iată fragmentul pe care îl folosim pentru a schimba pictogramele:

api.bind ('deschidere', functie () $ img.attr ('src', 'arrows_remove.svg');); api.bind ('închidere', funcție () $ img.attr ('src', 'arrows_hamburger.svg'););

Dincolo de evenimentele de mai sus, există și alți câțiva jucători (de ex deschis și închis evenimente) pe care le-ați putea folosi pentru proiectele proprii.

Modificarea lățimii implicite

Pentru a modifica lățimea predefinită a meniului, putem folosi fie CSS, fie Sass (modificând fișierele sursă). În mod prestabilit min lățime și lățimea maximă valorile proprietăților sunt egale cu 140px și 440px respectiv. În demonstrația noastră, să vedem cum putem schimba versiunea inițială lățimea maximă valoarea proprietății prin CSS. Mai jos sunt regulile CSS care trebuie suprasolicitate:

.meniul mm max-width: 350px;  / ** * adăugați mai multe prefixe ale furnizorilor * în funcție de browserele pe care le vizați * / @media all și (min-width: 550px) html.mm-deschidere .mm-slideout transform: translate (350px, 0) ;  / ** * suprascrie această regulă * în cazul în care construiți un meniu din dreapta * / @media all și (min-width: 550px) html.mm-right.mm-deschidere .mm-slideout transform: translate (-350px, 0); 

Modificări suplimentare ale CSS

În acest moment, vom continua personalizarea aspectului meniului. Din nou, vom edita fișierul sursă Sass pentru a modifica stilurile în funcție de nevoile noastre. Uitați-vă la regulile pe care le vom suprascrie mai jos (pentru simplitate am omis valorile variabilelor Sass): 

.meniu-mm fundal: întunecat ($ main-color, 10%);  .mm-listview> li> a culoare: $ text-culoare; padding: 20px;  .mm-listview> li> a: hover, .mm-listview .mm-next.mm-fullsubopen: hover + a culoarea: $ highlight -color;  .mm-listview> li> a: spațiu de hover culoare: $ text-color;  .mm-meniu .mm-listview> li.mm-selectat> a: nu (.mm-next) fundal: url transparent (arrows_check.svg) no-repeat center right 10px; dimensiune de fundal: 30px 30px; text-decorare: linie-prin; 

Acum ia în considerare ultima regulă. De fiecare dată când facem clic pe un element de meniu, primește mm selectat clasa, astfel încât să putem folosi acel selector pentru al modela. Dar vrem doar să stilisem ultimul element dintr-un proces de selecție, așa că vom îndrepta spre cele care nu au clasa mm-next. 

"Despre" duce la submeniul din partea dreaptă, dar am redactat doar stilul ultimului link pe care l-ați făcut clic

Adăugarea extensiilor și a suplimentelor

Într-o secțiune anterioară, am văzut cum inițializăm pluginul. Acum, să ne extindem comportamentul și funcționalitatea, suprascriind opțiunile de configurare implicite. 

În primul rând, schimbăm titlul care apare deasupra panoului principal. 

Apoi, vom include add-on-urile "counters" și "off-canvas". Acest ultim add-on ne permite să schimbăm poziția meniului în raport cu pagina. 

În cele din urmă, adăugăm trei extensii. Consultați codul final de inițializare de mai jos: 

$ menu.mmenu (counters: true, navbar: title: "Conținutul meniului", extensions: [position-to-zoom- "dreapta", introducerea: "înapoi");

Concluzie

În acest tutorial, am trecut prin procesul de creare a unui meniu în afara canvasului folosind pluginul jQuery.mmenu. Ca un pas înainte, sapa în sursa completă pentru demo-ul nostru pe CodePen. Apoi, vă sugerez să sariți în pagina oficială a jQuery.mmenu și să examinați diferitele exemple interactive care sunt disponibile. Arătați-ne exemplele dvs. în comentarii!

Dacă doriți o soluție rapidă, nu uitați că Envato Market are o colecție de diferite meniuri CSS sau JavaScript și widgeturi de navigare. Este un bun punct de plecare pentru idei și exemple.