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

/* meniu */ .nav ( margine: 20px 0; ) .nav ul ( margine: 0; padding: 0; ) .nav li ( margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; *display:inline; /* ie7 */ ) .nav a ( padding: 3px 12px; text-decoration: none; culoare: #999; line-height: 100%; ) .nav a:hover (color : #000; ) .nav .current a ( fundal: #999; culoare: #fff; raza-chenar: 3px; )

Secțiunile .nav a:hover și .nav .current a sunt responsabile pentru schimbarea culorii linkurilor și, respectiv, a fundalului elementelor de meniu active/actuale. Nu am încercat să fiu prea deștept în acest exemplu, am făcut totul în spiritul minimalismului, când treci cu mouse-ul peste link culoarea se schimbă, textul devine culoare neagră: #000; și pentru elementele active adăugate fundal de fundal: #999; , a înlocuit culoarea fontului cu culoarea albă: #fff; și a rotunjit marginile puțin chenar-rază: 3px; la butonul rezultat. Poți să fantezi și să experimentezi în această privință, după conținutul inimii tale.

După cum am menționat mai sus, putem modifica alinierea elementelor de navigare folosind proprietatea text-align adăugând câteva rânduri de cod CSS:

/* meniu din dreapta */ .nav.right ul ( text-align: right; ) /* meniu în centru */ .nav.center ul ( text-align: center; )

Începe distracția. Meniul nostru este activat în această etapă Are un format de cauciuc (lățimea este determinată în procente) și nu este încă deloc adaptabilă. Începeți să redimensionați ecranul și veți vedea că meniul este încorporat într-un amestec haotic de butoane.

Vom corecta situația folosind interogări media. La punctul de aplicare al interogării media la 600px, setați poziționare relativă poziție: relativă; pentru elementul nav, astfel încât să putem plasa ulterior lista de meniu

în vârf în poziție absolută: absolut; . Folosind proprietatea display: none, vom ascunde toate elementele de meniu li, lăsând doar legăturile active în prezent cu clasa curentă, atribuindu-le proprietate de afișare: bloc
Când treceți cu mouse-ul peste o bară de navigare grupată, toate elementele de meniu ar trebui să fie afișate ca o listă derulantă, definim regula .nav ul:hover li cu codul funcției>display: block . Pentru elementele active/actuale adăugăm o pictogramă pentru a le evidenția din restul.
Dacă trebuie să mutați meniul la dreapta sau să-l centrați, utilizați proprietățile de poziționare din stânga și din dreapta pentru lista ul a meniului nostru.


@media ecran și (max-width: 600px) (.nav (poziție: relativă; min-height: 40px;).nav ul (lățime: 180px; padding: 5px 0; poziție: absolut; sus: 0; stânga: 0) ; border : solid 1px #aaa ; #FAFAFA url (images/icon-menu.png ) no-repeat 10px 11px border-radius : 0 1px rgba ; ; .nav li ( afișează: niciunul ; /* ascunde tot puncte */ marja : 0 ; ) .nav .current (afișare: bloc; /* arată numai activ în prezent elemente */ ) .nav a ( afișare : bloc ; umplutură : 5px 5px 5px 32px ; text-align : stânga ; ) .nav .current a ( fundal : niciuna ; culoare : #666 ; ) /* când treceți cu mouse-ul peste elementele de meniu * / .nav ul: hover ( background-image : niciuna ; ) .nav ul: hover li ( display : block ; margin : 0 0 5px ; ) .nav ul : hover current ( fundal : url ( imagini/icoană-verificare. png ) fără repetare 10px 7px ) /* meniu receptiv

dreapta */ .nav .right ul ( stânga : automat ; dreapta : 0 ; ) /* meniu receptiv în centru */ .nav .center ul ( stânga : 50 % ; margine-stânga : -90px ; ) )

• puncte */ marja: 0;
• ) .nav .current (afișare: bloc; /* arată numai activ în prezent

  articole */ ) .nav a ( afișare: bloc; umplutură: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( fundal: niciunul; culoare: #666; ) /* când treceți cu mouse-ul peste elementele din meniu * / .nav ul:hover ( imagine de fundal: niciuna; ) .nav ul:hover li ( afișare: bloc; margine: 0 0 5px; ) .nav ul:hover .current ( fundal: url(imagini/icoană-verificare. png) no-repeat 10px 7px ) /* meniu receptiv în dreapta */ .nav.right ul ( stânga: auto; dreapta: 0; ) /* meniu receptiv în centru */ .nav.center ul ( stânga: 50% margine-stânga: -90px;

  Probabil asta e tot! Meniul nostru minunat, 100% adaptabil, este gata, după cum puteți vedea privind din nou exemplul. Pentru un studiu mai detaliat al materialului, puteți descărca sursele și, cu calm, fără agitație inutilă, puteți aprofunda subiectul.
  Lecția a fost pregătită folosind materiale

  Traducere și adaptare gratuită: Andrey /driver/ Lucrul cu elemente imbricate nu este ușor pentru că, să zicem, atunci când mutați un element părinte împreună cu acesta, se mută și toți copiii acestuia. Prin urmare, vom folosi mai multe tehnici care vor sprijini traducerile 3D dorite ale submeniurilor și ale copiilor lor. Ideea principală este să creștem valoarea pentru difuzare pentru a ne asigura că substraturile nu sunt afișate atunci când mișcăm totul puțin pentru a arăta marginile elementele părinte

  . Desigur, acest lucru nu este necesar în cazul în care submeniul acoperă elementul părinte. Vă rugăm să rețineți că folosim Proprietăți CSS (transformare, tranziție), care funcționează numai în browsere moderne . Exemplu varianta alternativa

  pentru browserele care nu acceptă îl veți găsi la sfârșitul fișierului component.css, care arată pur și simplu meniul de prim nivel. Facem același lucru dacă nu există JS.

  Pentru meniu avem nevoie de următoarea structură imbricată:

  • Toate categoriile
    • Dispozitive Dispozitive Telefoane mobile

  Telefoane mobile Aici, fiecare nivel este împachetat într-o etichetă div cu o clasă de mp-level . Nu vom putea aplica acest tip de poziționare fixă ​​unui meniu deoarece transformările îl vor face să se comporte ca un element poziționat absolut, așa că va trebui să folosim poziționare absolută

  , ceea ce va duce la problema comportamentului nedorit al site-ului (defilarea meniului și dependența de înălțimea documentului). un mic truc, luând următoarea structură a paginii:

  Acum atribuim elementelor următoarele elemente: 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 vă va permite să defilați conținutul când meniu închis versiunea mobilă site și va deveni, de asemenea egală cu înălțimea fereastra browserului. Astfel, imităm ceea ce am realiza cu 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ă închidă nivelurile anterioare:

  Nou mlPushMenu(document.getElementById("mp-meniu"), document.getElementById("declanșator"), (tip: "copertă"));

  jucător nou 16 ianuarie 2017 la 01:28 Meniul mobil pentru site. Pluginul de meniu JQuery
  • jQuery

  În acest articol vom vorbi despre cum să creați un meniu pentru versiunea mobilă a site-ului care s-ar potrivi în designul adaptiv. Vreau să vă spun despre un plugin pentru JQuery numit mmenu (puteți urma linkul pentru a descărca pluginul și imediat să vedeți cum va arăta meniul pe care îl vom crea). Vom folosi pluginul deoarece construirea propriei biciclete de fiecare dată nu este cea mai bună practică. Modul nostru este să folosim cele mai bune practici. Să începem.

  Conexiune. Autorul sfătuiește să folosiți html 5 doctype, ei bine, aici cred că nu avem nevoie de alternative, îl folosim. În zona de cap a documentului nostru, trebuie să conectăm JQuery în sine și două fișiere plugin, conectăm:

  
  Dacă avem nevoie de un meniu pe pânză, atunci trebuie să includem fișierele jquery.mmenu.oncanvas.min.js și jquery.mmenu.oncanvas.css. On-canvas este o versiune a meniului care are position:absolute; latime:100%; înălțime: 100%, care îl întinde pentru a umple întregul ecran.

  Crearea unui meniu Meniul este creat foarte simplu - ca o listă html neordonată, pluginul acceptă imbricarea listelor. Toate acestea ar trebui să fie împachetate într-o etichetă nav, care are un id.
  • Acasă
  • Despre noi
    • Istorie
    • Echipa
    • Adresa noastră
  • Contact
  Stiluri de meniu 1. Dacă pluginul întâlnește o listă imbricată, atunci în interiorul etichetei părinte li se adaugă un link către cea care există deja în interiorul acestui li. Când faceți clic pe linkul adăugat, se deschide un submeniu. Pentru a face dintr-un element de meniu un link către un submeniu complet și nu doar două link-uri, trebuie să utilizați o etichetă span.
  • Acasă
  • Despre noi
    • Istorie
    • Echipa
    • Adresa noastră
  • Contact
  
  2. Pentru a face submeniul întotdeauna vizibil, trebuie să adăugați clasa „Inset”.
  3. Adăugați clasa „Selectat” la elementul de meniu pentru a-l evidenția.
  4. Puteți crea separatori după cum urmează
  • Site-ul web
  • Acasă
  • Despre noi
  • Contact
  Javascript Veți avea nevoie de un buton care, atunci când faceți clic, deschide un meniu. Recomand folosirea acestor hamburgeri. Acolo poți citi cum să le folosești. Pe scurt, va trebui să descărcați stilurile de hamburger, să le conectați la pagină și să adăugați aproximativ următorul cod html

  
  Am folosit clasa Fixed pentru a seta position:fixed

  Pentru ca meniul nostru mobil să funcționeze, tot ce trebuie să facem este să conectăm următoarele cod javascript la pagina:

  $(document).ready(function() ( var $meniu = $("#meniul-meu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("menu"); $icon.on("click", function() ( API.open(); )); ("este-activ"); 100; $icon.on("click", function() ( API.close(); )); ; , 100 ;

  Probleme Folosind mmenu am întâlnit două probleme. La început am încercat să învelesc tot conținutul corpului etichetă div, deoarece acest lucru este necesar pentru ca pluginul să funcționeze. Dar, în acest caz, din anumite motive, a ascuns tot conținutul pe care l-am împachetat. Așa că am renunțat la el. Dacă nu înfășurați totul în corpul dvs. într-un div, atunci pluginul o va face pentru dvs. Dar vor exista probleme cu rularea dublă a scripturilor js și altele. După aceea, m-am lovit imediat de a doua problemă: pluginul nu include nimic altceva decât un div. Adică, dacă aveți h1 direct în interiorul corpului (corp > h1), așa cum am avut de exemplu, atunci mmenu le va omite și va încheia div-urile care sunt în spatele lui. astfel încât direct în interiorul corpului să rămână doar div-uri.

  Acest lucru a făcut ca totul să funcționeze pentru mine. Sper că acest articol ți-a fost de folos.

  Etichete: design responsive, aspect, pluginuri jquery

  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 tipare existente navigație adaptivă.

  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 în afară de a primi propria 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 descriere completă cum să obții același rezultat.

  Există mai multe abordări ale navigației receptive. 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 întrebarea meniuri cu mai multe niveluri. Dacă pur și simplu sunt 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 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 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ă dropdown() î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 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 la 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ă.

  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

  Buna ziua! Continuăm să analizăm cele mai interesante și cele mai multe pluginuri utile pentru un site WordPress! Astăzi veți învăța cum să adăugați un meniu mobil pe site-ul dvs. web. Puteți personaliza un meniu care va apărea numai pe dispozitivele mobile. Veți putea specifica dimensiunea maximă a ecranului la care va fi afișat meniul mobil. Puteți face două meniuri, cu stânga și cu partea dreaptă ecran, puteți specifica un meniu separat pentru fiecare meniu. Puteți personaliza aspectul meniului, culorile, dimensiunea, umplutura etc.

  

  Puteți instala pluginul direct de la Panouri de administrare WordPress. Accesați pagina: Plugins – Add New, introduceți numele pluginului în formularul de căutare, apăsați Enter, instalați și activați pluginul.

  

  

  

  Să ne uităm la setări:

  Opțiuni generale.

  – Activați meniul mobil, puteți activa sau dezactiva meniul mobil.

  – Activați meniul antet stânga, activați sau dezactivați meniul din stânga.

  – Activați meniul antet din dreapta, activați sau dezactivați meniul din dreapta.

  – Width Trigger, specificați la ce dimensiune maximă Va fi afișat meniul mobil.

  – Ascunde elemente, ascunde orice element de pe site la afișarea meniului mobil. Puteți specifica Clasa CSS sau ID-ul elementului.

  – CSS personalizat, puteți specifica propriile stiluri CSS pentru meniu.

  – Salvați modificările, salvați modificările.

  Opțiuni antet.

  – Logo site, puteți alege ce va fi afișat pe site-ul mobil. Logo sau text.

  – Logo, faceți clic pe câmp pentru a încărca sigla.

  – Adresă URL alternativă a siglei, puteți specifica o adresă URL alternativă a siglei.

  – Înălțimea antetului, puteți specifica înălțimea meniului.

  – Marja de sus a siglei, dimensiunea indentării, de la partea de sus a site-ului până la logo.

  – Textul antetului, puteți specifica textul care va fi afișat în antet dacă ați selectat afișarea textului la început.

  – Textul antetului Dimensiunea fontului, puteți selecta dimensiunea textului titlului.

  – Salvați modificările.

  Opțiuni din meniul din stânga.

  – Meniul din stânga, selectați meniul site-ului pentru meniul din stânga.

  – Pictogramă Meniu, puteți selecta o pictogramă sau o imagine pentru meniu.

  – Meniu Pictogramă Imagine, faceți clic pe câmp pentru a încărca o pictogramă sau o imagine.

  – Lățimea panoului de meniu din stânga, puteți specifica dimensiunea lățimii panoului de meniu din stânga.

  – Pictogramă Marja de sus, marginea superioară din icoană.

  – Icoana Marja din stânga, indentare din partea stângă la pictogramă.

  – Salvați modificările.

  Opțiuni din meniul din dreapta. Setările de aici sunt aceleași ca pentru meniul din stânga. Iată setările pentru meniul din dreapta.

  Opțiuni de culoare.

  – Antet Culoare de fundal, puteți alege o culoare pentru titlul meniului.

  – Culoare text antet, puteți selecta o culoare pentru textul titlului meniului.

  Selectați culoarea pentru meniul din stânga și din dreapta (aceleași setări).

  – Culoare pictogramă din meniu din stânga, culoare pictogramă.

  – Culoare de fundal, culoare de fundal meniu.

  – Culoarea textului, culoarea textului meniului.

  – Culoare de fundal Hover, culoare de fundal atunci când treceți cu mouse-ul.