Meniu pop-up pentru dispozitive mobile. Diferite meniuri obișnuite și mobile în WordPress, funcție wp_is_mobile, plugin WP Responsive Menu

Dezvoltare site

Mulți oameni încearcă deja să își adapteze site-ul web pentru dispozitive mobile. Ei folosesc noile caracteristici ale CSS3 atât pe site-uri simple, cât și pe cele mult mai complexe. În acest proces apar unele dificultăți, iar una dintre cele mai importante este comportamentul meniului site-ului atunci când este vizualizat pe ecrane mici. Decide această problemă, după cum sa dovedit, în mai multe moduri. Pentru mine este la fel această sarcină a devenit recent deosebit de relevant, așa că sunt cu ochii pe materialele de pe Internet cu privire la design adaptiv. Și recent am dat peste buna analiza modele de navigare adaptive existente.

Deoarece sunt legat de șablonul HTML5 adaptiv open-source Simpliste, m-am hotărât Toate oportunități existente lucrul cu navigația incearca in practica. Dar în afară de a primi propria experiență, am reușit să creez mai multe exemple ilustrative, disponibil pentru utilizare de către oricine și, de asemenea, pregătiți o descriere a procesului, cu care vă invit să vă familiarizați.

Articolul în sine, care m-a interesat și m-a împins la acțiune, se numește Responsive Navigation Patterns. Mă voi baza pe el, iar exemplele vor fi paginile șablonului Simpliste cu implementarea modelelor și descriere completă cum să obții același rezultat.

Există mai multe abordări ale navigației adaptive. Să le privim în ordine.

1. Navigare în partea de sus sau lăsați totul așa cum este Cel mai evident și cel mai comun mod. Trebuie doar să vă asigurați că totul se potrivește cu lățimea ecranului și nu iese în afară. ÎN Structura HTML nimic nu se schimbă, dar linkurile de meniu pot primi stiluri ușor modificate, sunt posibile diferite tipuri de variații cu aspectul de linkuri, care pot fi simplificate, centrate, înlocuite cu pictograme sau aspectul interfețelor poate fi modificat dispozitive mobile.

Această abordare este folosită în temele Simpliste.

Beneficii Cel mai ușor de realizat. Nu este nevoie să utilizați Javascript (sau să depindeți de el), nu sunt necesare manevre CSS de lux. Dezavantaje Problema poate începe atunci când numărul de elemente din meniu este prea mare. În primul rând, înălțimea blocului de navigare poate deveni astfel încât să acopere complet conținutul site-ului de pe prima pagină, iar utilizatorul va trebui să „defileze” în jos pe site pentru a ajunge la informațiile de care are nevoie. Și așa pe fiecare pagină a site-ului. În al doilea rând, se pune problema meniurilor cu mai multe niveluri. Dacă sunt pur și simplu aliniate unul sub celălalt, atunci revenim la problema înălțimii blocului de navigație. În al treilea rând, dacă totul nu este prevăzut în avans, atunci adăugarea de noi elemente de meniu poate provoca „mutări” și transferuri neplăcute.

2. Link către subsol, către Demo de navigare cu descriere completă.

Această metodă nu este atât de comună. Esența sa este că în antet este creată o legătură, care este ascunsă pe monitoare largi și afișată, dacă este necesar, pe dispozitivele mobile. Acest link de ancorare duce la meniu, care se află în subsolul site-ului. În acest caz, meniul în sine este fie poziționat cu folosind CSS, sau duplicat în antet și subsol, atunci meniul din antet este ascuns la rezoluții mici. Puteți folosi fie text, fie o pictogramă clară ca link.

Avantaje În antet a rămas doar o singură legătură, care ocupă foarte puțin spațiu. Nu există nicio dependență de scripturi Dezavantaje Va trebui să adăugați cod CSS suplimentar fie pentru a muta meniul de la subsol în sus computere desktop(folosind position:absolute sau position:fix) sau ascundeți meniul din antet pe dispozitivele mobile dacă dublează meniul de subsol. În plus, senzația unui „salt” ascuțit atunci când navighează printr-un astfel de link poate lua utilizatorul prin surprindere.

3. Listă drop-down() în loc de navigareDemo cu descriere completă.

Această abordare devine din ce în ce mai comună. Utilizează Javascript, care „parcurge” toate elementele de meniu, creând o listă din ele. Adică, navigarea va fi elementul de interfață suportat sistem de operare vizitator.

Procesul de scriere a unui scenariu pentru un astfel de meniu a fost descris în detaliu într-un articol din Smashing Magazine. Dar puteți folosi un plugin jQuery gata făcut, așa cum am făcut în propria mea soluție.

Avantaje Călcă compact. Recunoscut ca element de navigare și familiar utilizatorului. Pentru site-uri cu navigare complexă și meniuri imbricate, aceasta poate fi o soluție excelentă Dezavantaje Va fi dificil să faceți un element de interfață a sistemului de operare mobil să arate așa cum doriți. Pe diferite dispozitive aspectul și comportamentul vor fi ușor diferite. Dependență de Javascript. Chiar incomod de navigat dimensiuni mari, când toate punctele sunt aliniate într-un rând lung, monoton, deși se păstrează cuibărirea nivelurilor.

4. Meniu drop-downDemo cu descriere completă.

Această abordare este, de asemenea, destul de populară. Mai ales având în vedere oportunitatea de a experimenta designul. Esența sa este că în versiunea mobilă meniul este ascuns, dar rămâne un link sau un buton, făcând clic pe care poți deschide navigarea. Totul funcționează cu folosind Javascript. Puteți compara abordarea cu un link de subsol, dar în în acest caz, meniul apare in acelasi loc in care utilizatorul a dat click pe buton, adica in partea de sus a paginii. Alternativ, puteți lăsa câteva dintre cele mai importante link-uri, iar când faceți clic pe butonul, extindeți restul.

Avantaje Puteți arăta așa cum doriți. Utilizatorul nu este transferat nicăieri. Pentru meniurile imbricate, este posibil să se creeze ierarhii care se extind la clic. Dezavantaje Dependență de Javascript. Posibile probleme cu performanță dacă trebuie să animați meniul.

5. Meniu glisant cu schimbare de conținut Demo cu descriere completă.

Această opțiune a fost descrisă ca o abordare separată. Dar, în realitate, este mai mult o variantă a unui meniu derulant. Esența sa este că atunci când faceți clic pe un link sau pe un buton, meniul nu numai că se deschide, dar se mută din marginea ferestrei browserului, deplasând astfel conținutul în afara ferestrei.

Nu a fost posibil să găsim o soluție gata făcută, așa că am creat-o pe a noastră.

$(function())( $("body").addClass("js"); $(".link_nav").click(function())( $("body").toggleClass("mobile_nav"); )) ;))

De fapt, nu multe scripturi.

Lucrarea principală este realizată de CSS. La schimbarea clasei eticheta corporală poziția meniului se modifică, care este poziționat folosind position:fixed, iar conținutul devine spațiu suplimentar rămas, cedând loc meniului. În browserele Webkit a fost chiar posibil să se realizeze animație prin tranziții CSS, adică pe iPhone și Android meniul se va muta în mod eficient. Din nou, puteți căuta și prelua stilurile necesare

Mulți oameni încearcă deja să își adapteze site-ul web pentru dispozitive mobile. Ei folosesc noile caracteristici ale CSS3 atât pe site-uri simple, cât și pe cele mult mai complexe. În acest proces apar unele dificultăți, iar una dintre cele mai importante este comportamentul meniului site-ului atunci când este vizualizat pe ecrane mici. Această problemă, după cum sa dovedit, este rezolvată în mai multe moduri. Pentru mine, această sarcină a devenit recent deosebit de relevantă, așa că sunt cu ochii pe materialele de pe web legate de designul adaptiv. Și recent am dat peste o analiză bună a modelelor de navigare receptive existente.

Deoarece sunt legat de șablonul HTML5 adaptiv open-source Simpliste, m-am hotărât toate opțiunile de navigare existente incearca in practica. Dar, pe lângă faptul că am dobândit propria mea experiență, am reușit să creez mai multe exemple vizuale care sunt disponibile pentru utilizare de către oricine, precum și să pregătesc o descriere a procesului, cu care vă invit să vă familiarizați.

Articolul în sine, care m-a interesat și m-a împins la acțiune, se numește Responsive Navigation Patterns. Mă voi baza pe el, iar exemplele vor fi paginile șablonului Simpliste cu implementarea modelelor și o descriere completă a modului în care se obține același rezultat.

Există mai multe abordări ale navigației adaptive. Să le privim în ordine.

1. Navigare în partea de sus sau lăsați totul așa cum este Cel mai evident și cel mai comun mod. Trebuie doar să vă asigurați că totul se potrivește cu lățimea ecranului și nu iese în afară. Nimic nu se modifică în structura HTML, dar linkurile de meniu pot primi stiluri ușor modificate, sunt posibile diverse variații cu aspectul linkurilor, care pot fi simplificate, centrate, înlocuite cu pictograme sau imita aspectul interfețelor dispozitivelor mobile.

Această abordare este folosită în temele Simpliste.

2. Link către subsol, către Demo de navigare cu descriere completă.

Această metodă nu este atât de comună. Esența sa este că în antet este creată o legătură, care este ascunsă pe monitoare largi și afișată, dacă este necesar, pe dispozitivele mobile. Acest link de ancorare duce la meniu, care se află în subsolul site-ului. În acest caz, meniul în sine este fie poziționat folosind CSS, fie duplicat în antet și subsol, apoi meniul din antet este ascuns la rezoluții mici. Puteți folosi fie text, fie o pictogramă clară ca link.

Avantaje În antet a rămas doar o singură legătură, care ocupă foarte puțin spațiu. Nu există nicio dependență de scripturi Dezavantaje Va trebui să adăugați cod CSS suplimentar pentru a muta meniul din subsol în partea de sus pe computerele desktop (folosind poziție: absolut sau poziție: fix), fie pentru a ascunde meniul în antet. dispozitive dacă dublează meniul de subsol. În plus, senzația unui „salt” ascuțit atunci când navighează printr-un astfel de link poate lua utilizatorul prin surprindere.

3. Listă drop-down() în loc de navigareDemo cu descriere completă.

Această abordare devine din ce în ce mai comună. Utilizează Javascript, care „parcurge” toate elementele de meniu, creând o listă din ele. Adică, navigarea va fi un element de interfață susținut de sistemul de operare al vizitatorului.

Avantaje Călcă compact. Recunoscut ca element de navigare și familiar utilizatorului. Pentru site-uri cu navigare complexă și meniuri imbricate, aceasta poate fi o soluție excelentă Dezavantaje Va fi dificil să faceți un element de interfață a sistemului de operare mobil să arate așa cum doriți. Aspectul și comportamentul vor fi ușor diferite pe diferite dispozitive. Dependență de Javascript. Este incomod când navighezi pe dimensiuni foarte mari, când toate articolele sunt aliniate într-un rând lung și monoton, deși se păstrează imbricarea nivelurilor.

4. Meniu drop-downDemo cu descriere completă.

Această abordare este, de asemenea, destul de populară. Mai ales având în vedere oportunitatea de a experimenta designul. Esența sa este că în versiunea mobilă meniul este ascuns, dar rămâne un link sau un buton, făcând clic pe care poți deschide navigarea. Totul funcționează folosind Javascript. Puteți compara abordarea cu un link către subsol, dar în acest caz meniul apare în același loc în care utilizatorul a dat clic pe buton, adică în partea de sus a paginii. Alternativ, puteți lăsa câteva dintre cele mai importante link-uri, iar când faceți clic pe butonul, extindeți restul.

Avantaje Puteți arăta așa cum doriți. Utilizatorul nu este transferat nicăieri. Pentru meniurile imbricate, este posibil să se creeze ierarhii care se extind atunci când se face clic. Dezavantaje Dependență de Javascript. Posibile probleme de performanță dacă trebuie să animați meniul.

5. Meniu glisant cu schimbare de conținut Demo cu descriere completă.

De fapt, nu multe scripturi.

Lucrarea principală este realizată de CSS. La schimbarea clasei etichetei corporale poziția meniului se modifică, care este poziționat folosind position:fixed, iar conținutul devine spațiu suplimentar rămas, cedând loc meniului. În browserele Webkit a fost chiar posibil să se realizeze animație prin tranziții CSS, adică pe iPhone și Android meniul se va muta în mod eficient. Din nou, puteți căuta și prelua stilurile necesare

În timp ce lucram la unul, am avut o situație în care pagina principală orizontală conținea aproximativ două duzini de link-uri. Pe site pot fi aranjate cu ușurință sub formă de liste derulante, dar în versiunea mobilă toate acestea au fost acumulate într-un singur bloc. Acest element pare „aglomerat” și este probabil să îngreuneze navigarea anumitor utilizatori.

O cale de ieșire din situație este crearea unui meniu mobil alternativ în WordPress, care să aibă un aspect simplificat și să conțină doar link-uri către secțiunile principale. Acest lucru se poate face folosind unele module sau funcția wp_is_mobile. Să luăm în considerare toate opțiunile:

funcția wp_is_mobile

Dat operator condițional verifică dacă o persoană vă vizitează site-ul de pe un dispozitiv mobil, revine valoare Adevărat sau Fals. Sintaxa sa este următoarea:

if (wp_is_mobile()) ( /* Sunt afișate informații pentru dispozitivele mobile */ ) else ( /* Altfel - informații pentru un site obișnuit */ )

Funcția funcționează prin determinarea valorii liniei User Agent în browserul vizitatorului - $_SERVER[‘HTTP_USER_AGENT’] (de exemplu, Mobile, Kindle, Android, BlackBerry, Opera Mini etc.). Cu toate acestea, nu transmite date despre dimensiunile ecranului sau numele dispozitivului - doar Adevărat / Fals.

În Wodpress, wp_is_mobile nu este folosit pentru a selecta/seta stiluri de design receptiv. Acesta definește doar elemente ale unui proiect web care ar trebui să fie afișate exclusiv pe dispozitive mobile, indiferent de dimensiunea ecranului - clase corespunzătoare, vizualizare, scripturi ecran tactil etc.

Atenţie! Funcția are 2 nuanțe:

Dacă cineva decide să schimbe valoarea User Agent, sistemul nu o va putea recunoaște.

Când ați activat memorarea în cache, informațiile nu sunt actualizate de fiecare dată, așa că veți obține același rezultat din nou și din nou, făcând soluția inutilă (poate determinându-vă să resetați memoria cache a browserului de fiecare dată pentru a vedea versiunea mobilă prin intermediul dezvoltatorului). Instrumente).

Și dacă prima situație apare destul de rar, atunci nu funcționează foarte bine (pe site-urile vizitate nu te poți descurca fără ea).

Algoritm pentru crearea unui meniu mobil alternativ

1. În primul rând, accesați secțiunea de administrare „ Aspect" - "Meniu". Aici aveți nevoie de altele diferite pentru fiecare versiune, de exemplu:

top-mobile-menu - opțiune pentru dispozitive mobile;
top-pc-menu - pentru versiunea desktop obișnuită.

if ( wp_is_mobile() ) ( wp_nav_menu( array ( "menu" => "top-mobile-meniu" ) ) ) ) ) ) ) else ( wp_nav_menu( array ( "meniu" => "meniu-top-pc-) ) ; )

if (wp_is_mobile()) ( wp_nav_menu(array("meniu" => "meniu-top-mobile")); ) else (wp_nav_menu(array("meniu" => "meniu-top-pc-")); )

Codul din aspectul dvs. poate fi ușor diferit din cauza parametri suplimentari. Esența metodei este afișarea opțiunii ca meniu mobil WordPress top-mobile-meniu, pentru normal - top-pc-meniu(înlocuiți-vă numele dacă este necesar).

După implementare, verificați funcționarea navigației pe smartphone-uri/tablete. După cum spuneam mai sus, funcția wp_is_mobile determină User Agent, așa că este indicat să accesați site-ul de pe un telefon, opțiunea cu panoul de dezvoltare Ctrl+Shift+I poate avea erori.

Dacă nu aveți timp să vă ocupați de , există întotdeauna un modul potrivit. Există mai multe opțiuni, dar o vom lua în considerare doar pe cea care este necesară pentru sarcina curentă - afișarea WordPress diferit meniu în versiunile mobile și desktop.

Descărcați WP Responsive Menu din depozit de aici sau . Această decizie vă permite să creați cu ușurință un meniu glisant simplu și complet personalizabil pentru smartphone-uri, tablete etc. Cam așa va arăta rezultatul final (culorile sunt personalizabile, există un bloc de căutare):

Meniul WP Responsive este foarte popular - 70 de mii. descărcări și 4,5 puncte de rating. Bazat pe pluginul de meniu sidr jquery. În ciuda faptului că ultima actualizare a fost acum un an, lucrul la bug-uri (judecând după statistici) este în desfășurare activ.

Functii principale:

soluție complet adaptabilă cu suport pentru glisare;
funcționează pe toate tipurile de dispozitive mobile;
integrare ușoară cu funcțiile din meniul sistemului WP;
exercita paleta de culori, care s-ar potrivi cu tema ta;
ascunderea oricăror elemente inutile în versiunea mobilă;
determinarea locației în care va apărea meniul;
selectarea unui logo, a unei linii și a unui text afișat în acesta;

După instalarea modulului, veți găsi toate setările în secțiunea „Meniu WPR”, acestea sunt împărțite în 2 file - General (principal) și Aspect (aspect).

Creați o alternativă meniul mobilîn panoul de administrare WordPress (similar cu metoda anterioară din secțiunea „Aspect”).

Accesați elementul „Meniu WPR” și, în fila General, bifați caseta de lângă opțiunea „Activați navigarea mobilă”.

Mai jos, în setarea „Select Menu”, selectați meniul creat în al doilea pas.

În câmpul următor „Elemente de ascuns în mobil”, indicați numele clasei sau id-ul, care sunt responsabile pentru afișarea navigației standard, de exemplu: .topnav, #main-meniu(separate prin virgulă, clasele prin punct, ID-ul prin hash).

Salvare - butonul „Salvare opțiuni”.

Astfel, în primul rând, selectați un obiect pentru , și în al doilea rând, ascundeți oricare elemente inutile(în cazul nostru aceasta este navigarea principală). Ca rezultat, veți putea implementa diferite meniuri în Wordpress pentru desktop și smartphone-uri.

Examinați parametrii rămași ai pluginului și marcați-i după cum doriți: glisare, zoom, bloc de căutare, afișare a siglei, aspectul părții elementului și rezoluția ecranului la care este declanșat. De asemenea, în fila „Aspect Meniu” aveți nevoie de un fundal și eliminați cadrele dacă este necesar.

În general, lucrul cu WP Responsive Menu este destul de simplu. Deși funcția wp_is_mobile nu provoacă dificultăți excesive. Am testat ambele variante și au funcționat bine. Cu toate acestea, rețineți că instrucțiunea condiționată wp_is_mobile devine inutilă atunci când este activată stocarea în cache. Având în vedere setările pluginului cu dimensiunile ecranului, nu există nicio conexiune la User Agent, ceea ce înseamnă că nu se teme de astfel de restricții.

Daca ii cunosti pe altii solutii interesante pentru a implementa un meniu mobil pentru WordPress, scrieți în comentarii. Cred că va fi o revizuire separată pentru module.

În zilele noastre, meniurile de navigare jQuery sunt mai mult decât simple blocuri de text cu linkuri în ele. În am împărtășit cum puteți folosi JQuery și CSS3 pentru a crea un meniu de navigare care arată foarte bine.

Folosind puterea JQuery, putem transforma meniul de navigare în meniu dinamic. Deși acum pentru a crea navigare dinamică Puteți folosi doar CSS3, JQuery face meniul și mai funcțional.

Pe lângă asta funcții dinamice, designul joacă și el un rol important. Numai pentru că asta văd primii vizitatorii când vin pe site-ul tău.

Dacă meniul este neprezentabil, acesta va oferi utilizatorilor o experiență de utilizator slabă. Design bun meniul, la rândul său, va crește calitatea site-ului dvs. și va da cea mai buna experienta interacțiunile utilizatorului.

Astăzi vă prezint 30 de exemple grozave de meniu de navigare jQuery.

1. Impertinent

Pushy este un meniu de navigare receptiv, fără pânză, care utilizează transformări și tranziții CSS. Funcționează excelent pe dispozitivele mobile. Asigurați-vă că urmăriți demonstrația și cu siguranță vă va plăcea.

Demo | Descărcați

2. Slinky

Acesta este un alt meniu jQuery grozav pentru a crea liste de navigare derulabile frumoase. Lui trăsătură distinctivă este dimensiunea mică a fișierelor sursă.

Demo | Descărcați

3. Meniul pop jQuery

Acesta este un meniu pop-up simplu, receptiv, cu foarte caracteristici interesante. Când faceți clic pe pictograma de meniu, apare o fereastră de meniu cu pictograme de elemente. Consultați demonstrația.

Demo | Descărcați

4. Slidebars

Slidebars este un cadru JQuery pentru implementarea rapidă și ușoară a stilurilor de aplicație, fără a fi legat de o pânză. Slidebars gestionează, de asemenea, schimbările de orientare și redimensionarea.

Demo | Descărcați

5. Meniul jQuery Square

Meniul JQuery, care afișează un meniu pătrat animat de site folosind JQuery și CSS3. Asigurați-vă de acest lucru urmărind demonstrația.

Demo | Descărcați

6. Navigare Vizualizare pagină în perspectivă

Acest meniu de navigare jQuery transformă o pagină într-un meniu 3D. Ideea este de a crea un design aplicație mobilă, în care atunci când dați clic pe pictograma meniului, conținutul paginii este mutat în lateral, iar meniul este adus în prim-plan.

Demo | Descărcați

7. SlickNav

Plugin pentru crearea responsive jQuery mobil meniu cu mai multe niveluri și setări flexibile, dar simple. Compatibil cu browsere diferite, este posibilă navigarea folosind tastatura.

Demo | Descărcați

8. Meniu

Meniul jQuery pentru aplicații cu și fără legare la pânză cu sub-articole pop-up. Datorită numeroaselor opțiuni, suplimente și extensii, este posibil configurație flexibilă meniu.

Demo | Descărcați

9. Sidr

Plugin jQuery pentru crearea de meniuri și simplă adăugare funcții adaptative. Cu Sidr puteți crea diverse elemente ale site-ului dvs., precum și meniuri responsive.

Demo | Descărcați

10. slimMenu

slimMenu este un mic plugin jQuery care vă va ajuta să dezvoltați meniuri de navigare receptive, pe mai multe niveluri. Ce e tare la asta este că poți avea mai multe diferite meniuriși toate vor fi complet adaptabile.

Demo | Descărcați

11.Nav orizontal

Meniul de navigare jQuery care vă permite să setați meniu orizontal pe toată lățimea recipientului. Acest plugin îl face foarte ușor. În plus, suportul pentru IE7 poate fi implementat.

Demo | Descărcați

12.FlexNav

Acesta este un exemplu de utilizare a interogărilor media și JavaScript pentru a crea un meniu excelent pe mai multe niveluri cu suport ecrane tactile, efecte de hover și navigare prin tastatură.

Demo | Descărcați

13. jQuery Menu-Aim

Meniu jQuery care declanșează evenimente atunci când mouse-ul trece peste un element de meniu derulant. Ideal pentru crearea de meniuri derulante receptive, cum ar fi cele ale Amazon.

Demo | Descărcați

14. Meniuri inteligente

Un plugin de meniu jQuery care oferă o modalitate simplă și intuitivă de afișare a meniurilor. Creează liste receptive meniu. Funcționează pe toate dispozitivele!

Demo | Descărcați

15. Schimbător

Shifter este un plugin jQuery ușor de utilizat pentru mobil pentru a crea meniuri de diapozitive din care se mută partea dreaptă când apăsați butonul comutator. Există o singură opțiune maxWidth de configurat. Vă permite să reglați rezoluția/orientarea pentru dispozitivele mobile.

Demo | Descărcați

16.Hamburger

Hamburger este un plugin jQuery pentru crearea de meniuri de diapozitive în stil Aplicația Android, în care se află un meniu pop-up pe marginea dreaptă a ecranului. Când deschideți meniul în dimensiune completă, suprapune zona de conținut, dar nu bara de acțiuni.

Demo | Descărcați

17. Focusss

Focucss este un meniu de navigare jQuery care creează un meniu din bara laterală fără pânză, cu caracteristici interesante de estompare, care vă pot ajuta să atrageți atenția utilizatorilor asupra secțiunilor principale ale site-ului și să facă mai puțin vizibile secțiunile mai puțin vizibile.

Demo | Descărcați

18. Sertar

Drawer este un plugin jQuery pentru crearea unui meniu animat, receptiv, care iese din partea laterală a ecranului când se face clic. Caracteristici similare este posibil să fi văzut în aplicațiile Android.

Demo | Descărcați

19.Datmenu

Datmenu - jQuery premium meniu receptiv cu diverse caracteristici de animație CSS3. Ceea ce este grozav la acest plugin este capacitatea de a personalizare completă folosind opțiuni js.

Demo | Descărcați

20. jPanelMenu

jPanelMenu este un meniu jQuery frumos și modern care vă permite să creați un meniu de navigare în panou cu caracteristici de tranziție a animației CSS3. Stilul jPanelMenu seamănă versiuni mobile Facebook și Google. Pluginul poate fi folosit pentru o varietate de aplicații mobile.

Demo | Descărcați

21. Fly Side Menu

Fly Side Menu este un plugin grozav de meniu de navigare care folosește CSS3 pentru a crea un meniu lateral cu transformări și tranziții 3D.

Demo | Descărcați

22. PageScroll jQuery Menu Plugin

PageScroll este un meniu jQuery mobil personalizat, recomandat pentru utilizare pe orice site web, precum și pe paginile de destinație.

Demo | Descărcați

23.Meniu pictogramă DD

DD Icon Menu este un plugin jQuery care vă permite să creați meniu vertical pictograme situate pe marginea ecranului cu sub-articole din meniu care se extind atunci când treceți cu mouse-ul deasupra.

Demo | Descărcați

24. JQuery Mobile Data Navigation

Meniul jQuery care vă permite să navigați după date într-un interval selectat (săptămână, lună sau an). Ideal pentru solicitarea de informații folosind apeluri AJAX.

Demo | Descărcați

25. Navobile

Plugin pentru meniul de navigare jQuery care facilitează crearea meniurilor mobile. Utilizează tranziții CSS pentru a seta poziția meniului pe dispozitivele mobile.

Demo | Descărcați

26. Meniu Push cu mai multe niveluri

Multi-Level Push Menu este o bibliotecă Javascript creată de MARY LOU de la Codrops. Ea creează meniuri cu mai multe niveluri, care iese din partea stângă a ecranului și deplasează conținutul la dreapta.

Demo | Descărcați

Una dintre problemele comune la crearea unui design de bază pentru site-uri web telefoane mobile- Asta meniul de navigare. Dacă site-ul are multe secțiuni și pagini, atunci acest lucru ar trebui să te facă să te gândești să faci meniul compact, cel mai concis, dar în același timp funcțional și eficient. Cel mai probabil, meniul dvs. va avea fie mai multe linii, fie butoanele pot fi amplasate una peste alta. Nu pare foarte placut din punct de vedere estetic. În acest tutorial ne vom uita la cum folosind jQuery Puteți plasa rațional elementele de meniu și puteți asigura o navigare rapidă.

Problemă.

Capturile de ecran de mai jos arată probleme comune la crearea meniurilor. Dacă există doar patru elemente în meniu, atunci acestea vor fi situate la același nivel, dar dacă există cinci sau șase butoane, atunci meniul se va dovedi a fi mai multe linii, ceea ce este destul de nepractic.

http://bitfoundry.ca/

Soluţie. 1) Meniu derulant.

Aceasta este una dintre cele mai comune soluții. Dar există și ale noastre capcanele. Nu este posibil să se aplice stiluri elementelor unui astfel de meniu. Tabel CSS. Dar puteți stila meniul folosind pluginul Chosen, altfel stilul drop-down va rămâne implicit. În plus, lista drop-down pare destul de neprofesională. Deși, dacă ești mulțumit de această opțiune, atunci poți învăța cum să implementezi un astfel de meniu pe site-ul tău folosind tehnici CSS.

http://www.smashingmagazine.com/
http://informationarchitects.net/

2) Blocuri

O altă soluție rapidă este să setați fiecare element individual de meniu sub formă de blocuri care sunt aranjate vertical. Dar această metodă ocupă spațiu din titlu. Dacă există multe elemente în meniu, atunci această opțiune cu siguranță nu vă va potrivi. Este puțin probabil ca cititorii să se bucure de a derula o listă lungă de articole până când vor găsi conținutul site-ului de care au nevoie.

http://forefathersgroup.com/

http://loveandluxesf.com/

http://www.londonandpartners.com/

3) Pictograma meniu.

Acest ultima decizie este că o pictogramă/buton este folosit pentru a comuta navigarea. Este cel mai optim pentru utilizatorii site-ului. Această metodă este bună și pentru că economisește spațiu (ceea ce este foarte important pentru telefoanele mobile) și oferă, de asemenea, libertate completă pentru modelare în CSS. În plus, simbolul meniului poate fi proiectat pentru a se potrivi cu tema generală a site-ului.

http://www.sony.com

http://twitter.github.com/bootstrap/

http://zync.ca/

http://www.paulrobertlloyd.com/

Meniu mobil cu jQuery()

Acest tutorial vă va arăta cum să creați meniul de navigare a site-ului mobil descris mai sus folosind jQuery. jQuery va fi folosit pentru a adăuga simbolurile meniului și comutatorul de navigare. Această tehnică nu necesită nicio etichetă HTML suplimentară.

Mai jos este codul HTML simplu pentru meniul folosit în acest tutorial:

Buton
Buton

< nav id = "nav-wrap" >

< ul id = "nav" >

< li > < a href = "#" >Buton< / a > < / li >

< / ul >

< / nav >

Cod jQuery

Plasați o copie a jQuery și a funcției de mai jos între etichete< head >. Funcția va adăuga o etichetă< div id = "menu-icon" в тег < nav id = "#nav-wrap" >. Și când faceți clic pe elementul/pictograma „MENU”, meniul se va deschide cu un element suplimentar.

jQuery(document).ready(function($)( /* prepend meniu pictograma */ $("#nav-wrap").prepend("Meniu"); /* comuta nav */ $("#menu-pictogramă" ).on("click", function())( $("#nav").slideToggle(); $(this).toggleClass("activ"); ));

jQuery (document). gata(funcție($)(

/* adaugă pictograma meniului */

$("#nav-wrap") . prepend ("Meniu");

/* comută navigarea */

$("#meniu-pictogramă"). pe ("clic", funcția () (

$("#nav") . slideToggle();

$(acesta). toggleClass("activ");

} ) ;

Codul HTML va arăta ca mai jos (pentru a face acest lucru, faceți clic pe „Vizualizare element” sau vizualizați codul generat)

Meniu