Létrehozása a húzott oldali menü honlapján

Létrehozása a húzott oldali menü honlapján

Megjegyzés: ez a bemutató, akkor kell jQuery könyvtár, így biztos, hogy a legújabb jQuery könyvtár csatlakozik az oldalhoz.

1. Szerkezet

A kezdéshez fogunk létrehozni, a szerkezet a bal oldali menüben, elrejtjük eredményeként a bal oldalon. Már hozzá néhány alapvető stílusok példaként, ezért ne habozzon változtatni a kinézetét az oldalsávon. Azt is hozzá egy üres blokk nevezett fő-tartalomra. Ez a doboz tartalmaz minden olyan elemet, amely meg akarja mutatni ezen az oldalon. Mi töltse ki a következő lépésben.

2. Hozzon létre egy egyszerű oldalsáv

Most elrejteni a csúszkát balra a helyzet: a relatív és balra: -240px ez az érték megegyezik a szélessége az oldalsáv. Már hozzá egy gombot, és jQuery script, amely lehetővé teszi számunkra, hogy az oldalsáv megnyomásával, kapcsoló nyitott oldalsáv osztály a tartályt, amely tartalmazza az oldalsáv és a fő-tartalom blokk.

Most már van egy egyszerű oldalsáv, amelynek oka megnyomásával az egér gombját.

3. Készíts egy menü van húzva

Mivel ez nem elfogadható, van hozzá egy üres blokk osztály ellop-területen, hogy meghatározza az érzékelési területen húzódó gesztus. A tartomány a rajz bal oldalán található a lap szélére, így a felhasználó is okozhat a csúszkát jobbra húzva a bal szélén a képernyőn. Ez megoldja a problémát a véletlenül megnyitja a menüt görgetés közben.

A script, mi határozza meg a JS akció rajzban, ellop function () végezzük bővítmény TouchSwipe. Találunk két nyújtási lépéseket: mozgás és irányát. Egyszerűen add nyílt oldalsáv osztály egy menüt, ahol az egérmutató vagy a felhasználó ujja jobbra mozdul. Eltávolítjuk az osztály, ha az egeret vagy ujját a felhasználó mozgatja az ellenkező irányba.

következtetés

Translation - Dezhurko

Kapcsolódó cikkek