Orei de timp din zi 🙂
Astăzi vă voi împărtăși unul dintre modurile de a crea un meniu adaptabil pe site. Acest meniu poate fi organizat pentru un site de adaptare. De exemplu, că apare la o anumită rezoluție a ecranului. În acest articol va fi un exemplu simplu al unui astfel de meniu.
Am aplicat acest meniu pe site-ul meu și apare pe dispozitivele mobile, în loc de meniul obișnuit care se află în antet. Acest meniu este convenabil pentru utilizarea pe dispozitive mobile, adică nu trebuie să vă deplasați pentru a ajunge la puncte. Totul funcționează la clic, deoarece nu există mouseover pe dispozitivele mobile.
În exemplu, vă voi arăta cum va arăta meniul, va fi afișat permanent, dar apoi voi arăta cum să îl afișați numai pe dispozitivele mobile. Ei bine, nu vom întârzia, vom continua cu instrucțiunile.
Meniul nostru va folosi jQuery astfel încât, la început, trebuie să vă asigurați că această bibliotecă este conectată pe site. Cel mai probabil, dacă utilizați orice sistem, este deja făcut, dar în continuare deschiderea codului sursă al paginii, vedeți dacă există o linie care arată astfel:
Dacă nu există o astfel de linie, puteți trece peste acest pas, dar dacă nu lucrați la sfârșitul meniului, adăugați acest antet sau pivniță înaintea scriptului de meniu.
Pentru lucrările viitorului nostru meniu, veți avea nevoie de un mic script care poate fi conectat fie ca fișier separat, fie pur și simplu ca un cod. Dacă conectați un fișier separat, creați-l, de exemplu script.js și adăugați codul în el. După conectare, specificați calea corectă. De exemplu, dacă se află în directorul js, care se află lângă fișierele antetului și subsolului, calea va fi js / script.js
Dacă doriți să inserați codul pur și simplu în corpul site-ului, îl includeți în următoarele etichete:
În cele din urmă, codul în sine:
Această funcție simplă afectează 2 blocuri. Titlul meniului și corpul meniului însuși. Dacă doriți să schimbați numele claselor, ar trebui să le schimbați în scenariu.
Acum adăugați codul HTML pentru meniu. Va arăta așa;
Să analizăm codul în ordine. Toate meniurile sunt închise într-un container comun cu ID-adapt. Apoi, afișăm un bloc cu titlul meniului nostru, care are un titlu - meniu de clasă. Acest bloc este întotdeauna vizibil, bine sau la o anumită rezoluție, atunci cum specificați. Afișează pictograma și numele meniului. La noi este simplu - MENU.
Apoi vine blocul cu meniul însuși și are un clasă - meniu - corp. În interiorul acestui bloc puteți plasa orice meniu, oricare doriți. În cazurile noastre, de exemplu, am emis doar o listă regulată ul.
După cum sa menționat mai sus, dacă doriți să redenumiți clase, faceți-o în scriptul de mai sus.
Atingerea finală în lansarea meniului este adăugarea de stiluri. Puteți să le adăugați oriunde în fișierul dvs. de stil, care poate fi apelat, de exemplu - stil.css.
Sub forma unei pictograme din trei benzi, este utilizată doar o imagine, numele său fiind menu.png. Specificați calea corectă dacă imaginea este într-un dosar sau separată de fișierul de stil. Puteți să o descărcați salvând-o pe computer. Puteți face acest lucru făcând clic dreapta pe el și selectând "Salvați imaginea". De asemenea, puteți să adăugați imaginea apelând meniul.png sau mai degrabă utilizând o pictogramă din font în locul imaginii. Cum puteți face acest lucru, puteți citi în articol - Icoane din fontul Font Awesome
Meniul trebuie să funcționeze și să fie afișat în mod constant. Dacă asta ești tu și ai nevoie de asta atunci e tot. Pentru a configura aspectul său numai pentru dispozitivele mobile, trebuie să faceți unele modificări în stilurile CSS.
Un bloc cu aidi - adaptați, trebuie să adăugați o proprietate - display: none; După aceasta, meniul va dispărea, astfel încât să apară la o dimensiune mică ce trebuie să adăugați astfel de linii la stilurile noastre.
Aceste stiluri indică faptul că, dacă rezoluția este de 480 de pixeli sau mai puțin, afișați meniul nostru. Permisiunea se poate schimba pentru tine și indica ce vrei. Dacă afișați acest meniu în loc de altul care apare în dimensiunea obișnuită a site-ului, așa cum fac în site-ul meu, atunci trebuie să adăugați stiluri similare la meniul dvs., dar invers.
Se pare că, inițial din meniul obișnuit, proprietatea - display: block; și deja la 480 (sau după cum specificați), pixelii, dimpotrivă, specifică - display: none; De exemplu, atunci când apare meniul adaptiv, obișnuitul va dispărea.
De exemplu, în meniul obișnuit, accesați #menu. Apoi stilurile aproximative vor fi:
Cred că totul este clar. După ce ați făcut totul corect, veți obține rezultatul dorit. Puteți ajusta totul la nevoile dvs. și puteți configura meniul perfect adaptat pentru site-ul dvs. Folosesc adesea această metodă și nu mă dezamăgește niciodată.
Asta e tot, vă mulțumesc pentru atenția acordată. 🙂
Dacă ai putea folosi munca mea, poți susține site-ul :)
Bună dragă prietenă
Aveți extensia AdBlock sau altele asemenea. Adăugați site-ul meu pe lista albă, contribuind astfel la dezvoltarea sa. Instrucțiunea cum să dezactivați AdBlock Vreau aceeași fereastră
Trimiteți-le prietenilor: