Lucrul cu elemente imbricate este dificil pentru că, să zicem, atunci când mutați un element părinte cu el, toți copiii acestuia se mișcă, de asemenea. Prin urmare, vom aplica câteva trucuri care vor sprijini traducerile 3D dorite ale submeniurilor și ale copiilor lor. Ideea principală este să creștem valoarea de turnare pentru a ne asigura că subnivelurile nu sunt afișate atunci când ne mișcăm cu toții puțin pentru a expune marginile elementelor părinte. Desigur, acest lucru nu este necesar atunci când elementul părinte acoperă submeniul.
Vă rugăm să rețineți că folosim proprietăți CSS (transform, transition) care funcționează numai în browserele moderne. Un exemplu de alternativă pentru browserele care nu acceptă poate fi găsit la sfârșitul fișierului component.css, care arată pur și simplu meniul de prim nivel. Facem același lucru în absența lui JS.
Pentru meniu, avem nevoie de următoarea structură imbricată:
Aici, fiecare nivel este împachetat cu o etichetă div cu clasa mp-level. Nu vom putea aplica meniului acest tip de poziționare fixă, deoarece transformările îl vor face să se comporte ca un element poziționat absolut, așa că va trebui să folosim poziționarea absolută, ceea ce va duce la problema comportamentului nedorit al site-ului (meniu defilare și în funcție de înălțimea documentului).
Pentru a evita derularea meniului și tăierea acestuia dacă conținutul site-ului este prea scurt, vom folosi un mic truc luând următoarea structură a paginii:
Acum atribuim elementelor următoarele stiluri CSS:
Html, body, .container, .scroller (înălțime: 100%;) .scroller (overflow-y: scroll;) .scroller, .scroller-inner (poziție: relativ;) .container (poziție: relativ; overflow: ascuns; fundal: # 34495e;)
Acest lucru va permite derularea conținutului atunci când meniul versiunii mobile a site-ului este închis și va deveni, de asemenea, egal cu înălțimea ferestrei browserului. În acest fel, imităm ceea ce ar realiza o poziționare fixă. Pluginul în sine poate fi numit astfel:
Nou mlPushMenu (document.getElementById ("mp-meniu"), document.getElementById ("declanșator"));
Sau, dacă submeniurile ar trebui să acopere nivelurile anterioare:
Nou mlPushMenu (document.getElementById ("mp-meniu"), document.getElementById ("declanșator"), (tip: "copertă"));
Shifter este un plugin jQuery pentru navigare mobilă simplă. Shifter funcționează prin verificarea elementelor țintă din DOM și a evenimentelor obligatorii cu acestea.
SlickNav
SlickNav este un plugin de meniu mobil receptiv pentru jQuery, cu caracteristici precum suport pentru meniuri pe mai multe niveluri, compatibilitate între browsere, markup flexibil și simplu și se degradează cu grație fără JavaScript.
Menutron
Menutron convertește meniurile de navigare dintr-o listă într-un meniu de selecție atunci când browserul este redimensionat. Pe dispozitivele mobile, meniul de selectare afișează un control nativ, facilitând selectarea unui articol.
Meniu receptiv și sensibil la atingere
Un tutorial pentru crearea unei navigații drop-down receptive și ușor de tactil. Tehnica constă din 3 părți principale, care sunt Navigare simplă în meniul derulant bazat pe HTML și CSS, implementarea Responsiveness folosind interogări media și acceptarea acestora pentru dispozitivele cu ecran tactil folosind plugin-ul jQuery super minuscul.
jQuery.menu
MMENU este un plugin jQuery pentru crearea unei aplicații de meniuri glisante duble pentru site-ul dvs. mobil sau site-ul web receptiv.
Navobile
JQuery Navobile este un plugin jQuery care facilitează navigarea pe mobil. Navobile folosește CSS pentru a aplica traduceri CSS3, detectarea mobilă și fixarea poziției de navigare.
FlexNav
FlexNav este un prim exemplu mobil de utilizare a interogărilor media și de a avea un meniu frumos stratificat cu suport pentru atingere, deschideri cu mouse-ul și acces la fila de introducere a tastaturii.
Meniu Retina-Ready receptiv
Meniu receptiv cu trei aspecte pentru diferite dimensiuni de browser. Meniul se schimbă automat la una dintre cele trei aspecte diferite, în funcție de dimensiunea ferestrei browserului: o versiune pe rând „desktop”, o versiune optimizată pentru tabletă cu două coloane și o versiune mobilă cu un link de meniu pentru a afișa și a ascunde navigarea pentru ecrane mici. Fontul a fost folosit ca pictograme pentru a evita estomparea la rezoluții diferite.
slimMenu
slimMenu este un plugin jQuery ușor, care este creat pentru a crea meniuri de navigare rapide și stratificate pe fly. Cu slimMenu, nu mai trebuie să te lupți cu solicitările media pentru a crea meniuri receptive sau orice alte pluginuri grele pentru crearea de submeniuri stratificate. Este 100% receptiv pentru dispozitive mobile.
Meniu glisant orizontal
Un diapozitiv de meniu simplu, orizontal, cu o rețea în miniatură, ca un submeniu. Meniul iese din partea de sus când se face clic pe elementul din meniul principal și sub-articolele dispar. După ce faceți clic pe alt element, înălțimea submeniului se va ajusta și conținutul va dispărea în și în afara când comutați.
Una dintre zonele care necesită o atenție deosebită atunci când se dezvoltă un design de interfață pentru un dispozitiv mobil este meniul de navigare. Dacă site-ul are multe secțiuni sau pagini, este necesară abilități speciale pentru a plasa toate elementele la o rezoluție mică a ecranului. Foarte des, navigarea se transformă într-o grămadă de linii sau o grămadă de butoane îngrămădite unul peste altul. În acest tutorial, ne vom uita la una dintre modalitățile de a crea navigare folosind jQuery.
Sarcină
Capturile de ecran de mai jos arată situațiile cu șabloane pe ecranele mobile. Dacă navigarea are 3 sau 4 butoane, atunci locația sa va fi salvată pe o singură linie. Dar atunci când meniul conține 6 sau mai multe elemente, rezultatul este o grămadă urâtă.
Soluţie
O modalitate obișnuită este de a converti navigarea într-o listă derulantă bazată pe elementul selectat. Această soluție are dezavantajul că elementul select nu poate fi stilat cu CSS. Pluginurile Javascript precum Chosen vă permit să personalizați meniul sau trebuie să vă mulțumiți cu stilurile de sistem pentru meniul drop-down. De asemenea, utilizatorul poate fi confuz atunci când versiunea cu ecran lat a structurii meniului este transformată într-o listă derulantă pe un dispozitiv mobil.
2) Ieșire ca bloc
O altă modalitate populară este de a modela elementele de meniu ca elemente stivuite vertical. Cu toate acestea, această abordare ocupă mult spațiu pentru titlu. Dacă navigarea conține multe butoane, utilizatorul va trebui să parcurgă o listă lungă pentru a ajunge la informații.
3) Pictograma meniu
Și ultima metodă pe care o vom analiza în tutorialul nostru este folosirea unei pictograme de meniu pentru a activa navigarea. Această abordare economisește spațiu pe pagină (ceea ce este important pe un dispozitiv mobil) și vă oferă control deplin asupra aspectului cu CSS. Pictograma meniului și navigarea în sine pot fi prezentate în conformitate cu stilul general al site-ului.
Navigare mobilă inclusă cu jQuery
În acest tutorial, vă vom arăta cum să creați navigare pentru un ecran mic. JQuery va fi folosit pentru a pregăti pictograma meniului și pentru a activa navigarea. Nu sunt necesare etichete HTML suplimentare pentru ca navigarea să funcționeze.
Pentru meniul nostru va fi folosită o structură simplă:
Meniul necesită cod JavaScript pentru a funcționa. Funcția pregătește elementul
