Mobil menü létrehozása css3 és javascript segítségével
Lépés 1. Hozzon létre HTML jelölést
Ebben a szakaszban két tartályt kell létrehoznunk - az egyiket a menü (cool-menü) és a második az egész oldaltartalomhoz (oldal-csomagoló). Az oldal tartalmában adjon meg egy címet és szöveget, valamint egy gombot a menü aktiválásához / kikapcsolásához:
2. lépés: CSS stílusok hozzáadása
Adja hozzá ezt a kódot az oldalhoz. A menü nem lesz látható, hiszen a kijelzőn nincs tulajdonság.
A fejlett menü 4 pozícióval rendelkezik:
- Nincs animáció, a menü rejtve van
- Az oldal balra mozog, megnyílik a menü
- Nincs animáció, a menü nyitva van
- Az oldal jobbra mozog, a menü bezárul
Hozzáadunk egy adott osztályt a testelemhez. a menü helyzetétől függően:
Mit csinál ez a kód?
- Nincs animáció, a menü rejtve van - a test nem rendelkezik osztályokkal
- Az oldal balra mozog, a menü megnyílik - a test az animációkat és az elmaradt osztályokat adja hozzá
- Animáció nincs jelen, a menü megnyílik - test az osztály menü-látható hozzá
- Az oldal jobbra mozog, a menü zárt - a test az animációhoz és a jobbhoz tartozó osztályokhoz kerül
A következő lépésben hozzáadja ezeket a css osztályokat az animáció végrehajtásához.
4. lépés: Animáció hozzáadása
Adjon hozzá néhány új szabályt a stílusfájl végéhez, amely a transition3d css tulajdonságát használja:
Könnyen szerkesztheti ezeket a stílusokat, hogy megváltoztassa az animációs időt vagy a szélességet, amelyre a menüt el kívánja mozdítani. Továbbra is csak szabályt kell hozzáadni a mobileszközök menük megjelenítéséhez (nem kötelező):
Mobil menü létrehozása - egyszerű!
Ezen a menünk készen áll! A menü így néz ki:
