Cum să faci un meniu pentru dispozitivele mobile. Versiunea mobilă a meniului

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 dispozitive mobile Oh. 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 dreapta ecran, puteți specifica un meniu separat pentru fiecare meniu. Poate fi personalizat aspect meniu, culori, dimensiune, umplutură 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:

Optiuni 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 propriul dvs 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.

- Antet Marimea fontului, puteți selecta dimensiunea textului titlului.

– Salvează 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 Marginea stângă, indentare din partea stângă la pictogramă.

– Salvează 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.

Alegerea culorilor pentru meniurile din stânga și din dreapta (aceleași setări).

- Culoarea pictogramei meniului din stânga, culoarea pictogramei.

– 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.

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 este la fel aceasta sarcina 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 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 completa 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 linkurilor, care pot fi simplificate, centrate, înlocuite cu pictograme sau imita aspectul interfețelor dispozitivelor mobile.

Această abordare este folosită în temele Simpliste.

Avantaje

Cel mai ușor de realizat. Nu este nevoie să utilizați Javascript (și nicio dependență de el), nu sunt necesare manevre CSS luxoase.

Defecte

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ă 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 navigare

Demo 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

Singurul link rămas este în antet, care ocupă foarte puțin spațiu. Fără dependență de scripturi.

Defecte

Va trebui să adăugați cod CSS suplimentar 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.