Din nou DEMO. pentru a începe.
Poate voi începe cu HTML-structura:
intrare avem nevoie pentru a determina vizibilitatea meniu: adică, în cazul în care este selectat, meniul poate fi văzut și vice-versa.
eticheta - acest lucru este nostru cheie-Burger, care este legat de intrare.
ul - bloc de meniu propriu.
Acum CSS (scris doar pentru browser-ul mobil WebKit: Opera 16+, Safari, Chrome).
Există o mulțime de libertate de creație pentru oameni, dar setările principale - este lățimea și stânga. El trebuie să aibă aceeași valoare, dar a lăsat când este negativ. Astfel, ne ascundem meniul nostru din partea stângă a ecranului. a adăugat, de asemenea, o animație de tranziție: stânga .2s proces de ieșire de frumusețe din afara ecranului.
Pur și simplu le face invizibile.
Puteți face, de asemenea, într-un fel. Am făcut un simplu buton gri, cu dungi albe în colțul din stânga sus. Aici, de asemenea, pentru a adăuga animație butonul în sine și pentru banda (doar pentru frumusete).
Acum, așa-numita „magic“:
CSS3-selectori ne permit să se determine starea caseta și se aplică, în funcție de faptul că anumite proprietăți ale elementelor învecinate: verificate
În acest exemplu, atunci când butonul "cheknutom" shift meniul INPUT .hidden-meniu-Ticker: verificat
BTN-meniu la stânga de 160 de pixeli, meniul de la marginea din stânga .hidden-meniu-Ticker: verificat
ascuns-meniu. Alte stiluri sunt scrise pentru striparea butonul de meniu, atunci când este apăsat că au transformat într-o cruce, și vice-versa.