Utazott menü css
Ismét demo. kezdeni.
Talán kezdjük a HTML-struktúra:
input meg kell határoznunk a menü láthatósága: azaz, ha be van jelölve, a menü látható, és fordítva.
címke - ez a kulcs-burger, ami kötődik a bemenet.
ul - saját menü blokk.
Most CSS (írta csak WebKit mobil böngésző: Opera 16+, Safari, Chrome).
Van egy csomó kreatív szabadságot biztosít az emberek, de a fő beállítások - a szélessége, és távozott. Meg kell ugyanazt az értéket, de maradt, amikor az negatív. Így elrejteni a bal oldali menüben a képernyő. Még hozzá egy átmeneti animáció: balra .2s Beauty kilépési folyamat kívülről a képernyőn.
Ez csak azért láthatatlan.
Azt is, hogy valahogy. Csináltam egy egyszerű szürke gomb fehér csíkok a bal felső sarokban. Itt is hozzá animációt a gomb magát, és a szalag (csak a szépség).
Most, az úgynevezett „mágikus”:
CSS3-szelektor lehetővé teszi számunkra, hogy meghatározza az állam a négyzetet, és alkalmazni, attól függően, hogy bizonyos tulajdonságait szomszédos elem: ellenőrzött
Ebben a példában, ha a "cheknutom" INPUT menü váltógombot .hidden-menu-ticker: ellenőrzött
BTN-menü a bal 160 pixel, a menü a bal szélén .hidden-menu-ticker: ellenőrzött
rejtett menü. Más stílusok vannak írva, hogy a szalag a menü gombot, ha lenyomja a befordultak egy kereszt, és fordítva.