Notă: Pentru acest tutorial, veți avea nevoie de bibliotecă jQuery, astfel încât să fie sigur că cea mai recentă bibliotecă jQuery este conectat la pagina ta.
1. Structura
Pentru a începe, vom crea structura pentru meniul din partea stanga, ne ascundem ca urmare a stânga. Am adăugat câteva stiluri de bază ca un exemplu, asa ca nu ezita pentru a schimba aspectul barei laterale. Am adăugat, de asemenea, un bloc gol numit principal conținut. Această casetă va conține toate elementele pe care doriți să le afișați pe această pagină. Am completați în etapa următoare.
2. Creați o bară laterală simplă
Acum ne ascundem bara laterală spre stânga, folosind poziția: relativă și stânga: -240px, această valoare este egală cu lățimea barei laterale. Am adăugat un buton și script jQuery, care ne va permite să aducă bara laterală prin apăsarea, schimbarea clasei bara laterală deschisă pentru container, care conține bara laterală și principalul conținut bloc.
Avem acum o bara laterală simplă, care este cauzată de apăsarea butonului mouse-ului.
3. Asigurați-un meniu este tras
Deoarece acest lucru nu este acceptabil, am adăugat o clasă bloc swipe zonă goală, pentru a determina zona de detecție întindere gest. Domeniul desenului situat la marginea din stânga a paginii, astfel încât utilizatorul poate provoca bara laterală spre dreapta trăgând de marginea din stânga a ecranului. Aceasta rezolvă problema deschiderii accidental meniul în derulare.
În scenariul nostru, definim JS acțiune de desen, funcția de utilizare glisează () efectuat plugin-ul TouchSwipe. Vom găsi două etape de întindere: mișcarea și direcția. Pur și simplu adăugați clasa bara laterală deschisă pentru a aduce un meniu de unde cursorul mouse-ului sau degetul utilizatorului se deplasează spre dreapta. Scoatem clasa atunci când mouse-ul sau degetul utilizatorului se deplasează în direcția opusă.
concluzie
Traducerea - Dezhurko