Cum se face un meniu adaptiv? exemple

Meniul adaptabil pentru un site modern nu este doar un lux, ci o necesitate. Abundența de dispozitive moderne necesită webmasteri de astfel de aspect, care ar fi afișate logic pe ecrane cu rezoluții diferite. În unele cazuri, crearea unui meniu adaptabil este mult mai dificilă decât designul în sine, deci este necesar să luați în considerare această problemă.

Meniu pentru ecran mare

Pentru a înțelege schema generală impunerea adaptivității , va trebui mai întâi să creați o structură de meniu în HTML și să o stilizați utilizând CSS. Apoi, pe baza materialului primit, puteți îmbunătăți șablonul adaptiv. Deci, structura HTML va arăta astfel.

Meniul rezultat va trebui să adauge stilurile CSS. Acestea ar trebui să specifice dimensiunea fontului și culoarea, fundalul, poziționarea blocurilor.

Procesul de adaptare

Crearea unui ecran simplu funcțional pentru un ecran obișnuit al computerului este o chestiune simplă, iar acest lucru poate fi văzut în exemplu. Meniul adaptiv pentru site este creat numai atunci când există ceva de lucru, adică când au fost deja adăugate puncte de navigare. Varianta cea mai optimă a meniului pentru dispozitive mobile și tablete va fi pictograma hamburger - o cutie pătrată în care trei caracteristici verticale. Când este apăsat, toate elementele de meniu sunt deschise. Pentru a crea o astfel de navigare, trebuie să adăugați etichete în documentul HTML.

Apoi, va trebui să adăugați stilurile corespunzătoare acestor etichete pentru a obține un meniu atrăgător și ușor de citit. Pe lângă vizualizarea pictogramelor de navigare și meniu, trebuie să aranjați poziția imaginii în consecință. Deci, introduceți condiția menu_icon span: nth-child (1) {top: 0 px} -. Aceasta înseamnă că indentarea imaginii de sus va fi zero pixeli. În mod similar, trebuie să specificați valori pentru celelalte părți.

Acum, meniul adaptiv este aproape gata. Merită acordată atenție condiției afișare: niciuna. În mod prestabilit, pictograma meniului nu va fi vizibilă pe site, deci în documentul CSS trebuie să adăugați o clasă suplimentară cu următoarea condiție: .menu__icon {display: inline-block-}. Aceasta va face navigarea vizibilă.

În plus, trebuie să adăugați o sarcină la foaia de stil cascadă, care va ascunde elementele și sub-paragrafele după cum este necesar. Pentru a face acest lucru, în CSS, trebuie să setați un element de meniu fix, să aranjați afișarea și alinierea. Elementele sunt ascunse folosind condițiile de supracurent: auto-opacitate: 0-z-index: 1000. De asemenea, puteți adăuga o clasă menu__links-item care specifică stilul pentru elementele de meniu, dar aceasta este la alegerea dezvoltatorului.

Atingerea finală

Astfel, meniul adaptiv pe CSS este aproape complet. Pentru a fi afișat când faceți clic pe pictogramă, trebuie să adăugați funcții. Pentru simplificare, este mai bine să utilizați jQuery, dar dacă doriți, puteți crea jаvascript pur. Ambele condiții vor fi folosite acolo și acolo:

• (Funcția ($) {$ (funcție () $ ( `menu__icon.`) On ( `clic`, funcția () $ ((aceasta) .closest) ToggleClass ( `menu_state_open`) `meniu.` - ..}) -}) -}) (jQuery).

Aceasta completează aspectul navigației adaptive. Dar aceasta este doar una dintre mai multe opțiuni pentru crearea acestui tip de funcționalitate, deci merită să luăm în considerare restul. Cel puțin câteva dintre ele.

Fără a schimba standardele

Majoritatea utilizatorilor de Internet se așteaptă să vadă bara de navigare în partea de sus a site-ului. Acest lucru a devenit deja un tip de standard, astfel încât meniul orizontal adaptabil ar trebui să aibă un aspect decent. Se poate face folosind CSS, ca în exemplele de mai sus și prin conectarea scriptului handler. În general, crearea unui meniu adaptiv constă în trei etape:

1. Scrierea etichetelor HTML
2. Stilul lor cu o foaie de stil cascadă (CSS).
3. Adaptarea unui meniu deja existent.

Bineînțeles, toate site-urile au propriile lor bara de meniu, dar în cazul în care resursa a fost creat pe CMS, este mult mai ușor de a crea un nou meniu de adaptare.

bootstrap

Crearea unei funcționalități adaptive nu este o problemă atât de gravă dacă utilizați instrumentele Bootstrap. Există șabloane predefinite pentru crearea unui meniu orizontal. Trebuie doar să vă conectați la fișierul de resurse bootstrap.js. În acest cadru, webmasterul poate crea navigație de orice complexitate. Un meniu adaptabil cu Bootstrap este creat folosind un cod specific.

Caracteristicile metodei

Lăsați acest cod și greoi, dar de înțeles. Este demn de remarcat faptul că rolul principal este jucat de etichetă nav, care este responsabilă de crearea navigației și de aspectul acesteia. De asemenea, aici sunt containerele container-fluid și recipient, care specifică lățimea articolelor. Cu ajutorul lor, puteți face ca meniul să se extindă pe ecrane cu diferite rezoluții sau să lăsați-l fixat.

Un rol important în crearea unei funcționalități adaptive este jucat aici de clase colaps și navbar-colaps, care sunt responsabile de stil. Meniul în sine este creat prin scriere lista bulletată elemente care sunt plasate orizontal.

Dacă aplicați acest cod pentru a crea navigație, atunci pe ecrane largi va arăta ca un banner orizontal. La început va exista un nume al resurselor și apoi elementele într-o secvență strict specificată. În ecranele înguste, numai numele site-ului și pictograma hamburger vor fi afișate când faceți clic pe elementele de meniu afișate ca listă verticală.

Meniu derulant

Resursa Bootstrap va fi un excelent ajutor pentru crearea unui meniu drop-down adaptiv. Pentru a face acest lucru, pur și simplu înlocuiți linia de tag

Acest lucru se poate face pentru un singur punct și pentru mai multe. Lângă poziția cu sub-elementele drop-down va fi o săgeată îndreptată în jos. Când faceți clic, apare lista creată. Dacă navigarea va fi afișat pe ecran mic, apoi faceți clic pe lista drop-down va fi, de asemenea, notat cu o săgeată, dar cu direcția spre partea dreapta. Când apăsați, apare o altă listă verticală de sub-elemente.

Meniul pe mai multe niveluri

Cu toate acestea, pentru a crea drop-down liste nu numai cu ajutorul lui Bootstrap. Dacă această bibliotecă nu este conectat, puteți crea o adaptive meniuri multi-nivel cu HTML si CSS, urmate de conectarea funcției PHP.

În primul rând, trebuie să creați o listă neimprimată în fișierul HTML care include și alte liste. Pentru aceasta, utilizați etichete standard

și
• . Nu uitați de formarea claselor, care ulterior vor fi prelucrate de o foaie de stil CSS cascadă. Pentru a face mai clară, merită oferit un mic exemplu de scriere a listelor și de creare de clase.

Animația meniului drop-down adaptiv este specificată utilizând o foaie de stil cascadă. Aici trebuie să specificați parametrii pentru meniu atunci când ecranul este redus cu 50, 75 și 25%. Această abordare a creării unei funcționalități adaptive oferă un aspect competent, în care meniul nu se "deplasează".

În cele din urmă, trebuie să introduceți funcția de mai jos în document.

Dacă site-ul nu este considerat a utiliza oricare dintre funcțiile, în plus față de aceasta, încă trebuie să creați pentru ea un document separat script-ul. Dacă scrie în HTML simplu, ea apare pur și simplu în fereastra browser-ului ca parte a textului și nu va funcționa.

JQuery

De asemenea, o soluție excelentă este crearea unei bare de navigare pe pluginul JQuery. Meniul adaptiv pentru acest serviciu este la doar câteva minute. Pluginul poate fi descărcat pe Internet, are o interfață simplă și intuitivă, ușor și simplu de utilizat. Deci, nu ar trebui să existe probleme cu conectarea unei foi de stil.

După ce foaia de stil este conectată, trebuie să scrieți un script pentru a crea navigația adaptivă.

Apoi, este necesar să se facă navigație, dacă nu este deja acolo. Aici totul funcționează în conformitate cu principiul: "Toate ingenioase sunt simple". În documentul HTML, trebuie să creați o listă cu marcatori în etichetă nav. Puteți utiliza exemplul de mai sus sau versiunea simplificată a acestuia, care arată ca cea prezentată mai jos.

În această etapă de lucru, numai logo-ul va fi afișat în browser, iar meniul însuși va fi ascuns. Pentru a face acest lucru, trebuie să adăugați o funcție care provoacă modificarea pluginului - okayNav.

Acum puteți privi rezultatele lucrării. Cu lățimea normală a ferestrei browserului, acest meniu arată destul de normal, dar dacă micșorați ecranul, ultimele elemente dispar. În schimb, apar trei puncte mari, situate pe verticală. Când se apasă, acestea par să se întoarcă, ținând o poziție orizontală, iar elementele ascunse din meniu sunt dezvăluite de lista verticală din colțul din dreapta sus al ecranului.

Această soluție arată foarte modernă, iar efectul animat expune resursele într-o lumină favorabilă vizitatorilor.

Joomla

Ultima opțiune este crearea unui meniu adaptiv utilizând sistemul Jumla. Acesta este un serviciu gratuit pentru crearea de site-uri web, care este un sistem de management al conținutului pentru CMS. Și, după cum sa menționat deja la început, în cazul în care site-ul este creat prin utilizarea CMS, precum și necesitatea de a modifica meniul adaptiv existent, cel mai bine este să înceapă a face un site funcțional cu prima etichetă. În același mod ca și în exemplele anterioare, trebuie să creați o listă cu meniuri în HTML. Numai pentru fiecare element trebuie să vă scrieți clasa. În general, totul arată după cum se arată mai jos.

Apoi trebuie să adăugați stiluri. Cel mai bine este să puneți toate liniuțele pe 0 px și să aplicați cutie de dimensiune: caseta de margine. Acest lucru va face posibilă păstrarea lățimii specificate a elementelor, indiferent de câte indenturi există. Apoi, pentru elementul din meniul părinte (div), setați lățimea la 90% și apoi începeți să stylizați fiecare articol separat.

Puteți să eliminați margini, să modificați culoarea și să umpleți, să faceți designul care va apărea atunci când plasați cursorul peste cursor. Într-un cuvânt, faceți tot ceea ce corespunde designului resursei. Ultimul pas în crearea meniului adaptiv Joomla este de ao transforma. Mai des, pe Joomla, creați un astfel de meniu care, la schimbarea dimensiunii ecranului, este reconstruit automat, împărțind unele linii. Acest lucru se face și în CSS, singura funcție care ar trebui să fie conectată este compatibilitatea cu browserul încrucișat. Permite meniului să arate la fel în diferite browsere.

Crearea unui meniu adaptabil este într-adevăr dificilă, aceasta necesită cunoștințe și experiență. Toate exemplele descrise sunt doar o mică parte a variațiilor posibile, dar chiar ele pot fi utile dacă o persoană are cunoștințe de bază despre HTML și CSS.