Készítsen kilépő rejtett menü css3
Ma a fejlesztésére összpontosít az utazás csúszó menü segítségével CSS3-átmenetek. Menü kezdetben rejtve, és az átmenet csak akkor kerül sor, miután megnyomta a megfelelő gombot.
Nézzük először kideríteni a különbség a kétfajta menü:
* Slide menü fogja hagyni a képernyő szélén az oldal tartalmát, ha a gomb megnyomása után.
* Push-menü fogja hagyni a képernyő szélén, és ugyanabban az időben eltolja a tartalmát az oldal.
Mielőtt folytatnánk, hadd rámutatni néhány fontos szempontot:
* Ez az útmutató épül CSS-átmenetek simább működését. A régebbi böngészők azonban a tartalom „ugrás” a kívánt helyzetbe.
* Az általunk használt classie.js egyszerű és gyors eltávolítása és hozzáadása osztályok.
* Az általunk használt j # 097; vascript-funkció querySelector és querySelectorAll, amelyek alátámasztják a IE8 és a fenti.
Végül nézzük meg a 8 menü variációk, amelynek fejlesztése fogunk foglalkozni:
* Menü dia balra, ami elhagyja a bal oldalon a képernyő, a tartalom felett
* Menü dia jog, amely elhagyja a jobb oldalon a képernyő, a tartalom felett
* Menü csúszda tetején, ami elhagyja a képernyő tetején tetején tartalom
* Menü csúszda alján, ami elhagyja a képernyő alján tetején tartalom
* A push bal oldali menüből, amely elhagyja a bal oldalon a képernyő, és jobbra mozog tartalom
* Nyomja jobb oldali menüben, amely elhagyja a jobb oldalon a képernyő, és balra mozog tartalom
* A push felső menüben, amely elhagyja a képernyő tetején, és mozgatja a tartalom le
* Menü tolja lefelé, amely elhagyja a képernyő alján, és áthelyezi a tartalmat fel
Amikor a menü megnyitásakor, akkor megjeleníti a „maszk” tetején az alapvető shell. Ez lesz egy félig átlátszó overlay, amely elrejti a fő tartalomra. Amikor a felhasználó rákattint az overlay menü rejtve a szem elől újra. Minden menü is jellemző bezár gombot, ami hasznos lesz abban az esetben, a készülékek kis menü, a készülék felveszi az egész képernyőt. Nézzük először megnézzük az alap jelölő és CSS-kódot.
Mi paraméter test túlfolyó-x fel a rejtett, mert nem kell görgetés, amikor a shell eltolódik balra vagy jobbra. Amikor függőlegesen mozog, ez nem számít. Van még fontosabb, hogy helyezze a navigációs menü meghaladja a borítékot, hiszen nyilvánvaló, hogy ha egy elemre átalakulás kell alkalmazni, akkor átmenetileg a relatív helymeghatározás. Mivel a navigációs menü kell rögzíteni kapcsolatban kívül a böngésző ablakot, akkor nem kell, hogy az elem belsejében a relatív helymeghatározás. Az egyes menü listáját menüpontok és a záró gombot.
A fejlesztők már nem jutottak konszenzusra a munka abszolút pozicionálás / balra / fel szemben transzformáció / fordítás. Paul Irish részletesebben tovább ezt a témát, és olvasni róla, akkor itt. Ebben az esetben használjuk elhelyezése, valamint biztosítja a visszakapcsolási régebbi böngészők átmenet nélkül, használata nélkül feltételes stíluslapok. Emellett, miután kipróbáltuk mindkét változatban, a különbség szinte láthatatlan az emberi szem számára. Vessünk egy pillantást a változata a menüben.
Slide Menu Bal
Ez a művelet a menü bal oldalán a tartalom felett. És CSS-kódot hozzá:
Slide Menu Right
Ez a művelet a menü jobb oldalán a tartalom felett. És CSS-kódot hozzá:
Ez a menü elhagyja a felső oldalon a tartalom felett. És CSS-kódot hozzá:
Slide Menu Bottom
Ez a menü levelek alsó oldalán a tartalom felett. És CSS-kódot hozzá:
Ez a művelet a menü bal oldalán, és jobbra tolódott tartalmat. A legtöbb kód, mint a kód a menü, majd a bal oldalon, kivéve azt a tényt, hogy ez is mozog, és a héj. Nézzük meg a CSS-kód:
Nyomja meg a Menü Jobb
Ez elhagyja a menüt a jobb oldalon, és balra mozog tartalmat. A legtöbb kód, mint a kód a menü, majd a jobb oldalon, kivéve azt a tényt, hogy ez is mozog, és a héj. Nézzük meg a CSS-kód:
Ez a művelet a menüben a felső oldalon, és eltolja a tartalom le. A legtöbb kód, mint a kód a menü, majd a felső, kivéve azt a tényt, hogy ez is mozog, és a héj. Nézzük meg a CSS-kód:
Nyomja meg a Menü Bottom
Ez a menü levelek alsó oldalán, és mozgatja a tartalmat fel. A legtöbb kód, mint a kód a menüben, majd az alsó, kivéve azt a tényt, hogy ez is mozog, és a héj. Nézzük meg a CSS-kód:
Most nézzük meg a j # 097; vascript-kódot, kapcsolók mi osztályok, ha rákattint egy másik menü gombot. Vele, akkor is megjelenik a maszk tetején a többi tartalom, és végrehajtja a funkcionális gombbal záródik, ha a felhasználó rákattint egy gombra vagy maszk. Ne feledje, hogy az általunk használt classie.js hozzáadni vagy eltávolítani osztályok. A j # 097; vascript-kód természetesen magában foglalja az összes 8 menüt. Érdemes lehet minimalizálni a j # 097; vascript-kódot, majd távolítsa el a nem kívánt részeket. Vessünk egy pillantást a j # 097; vascript-kód:
És ez az! Most a nagy hatások menük használatra kész a projekt! Azt is végre itt médialekérdezések, így kétségtelenül letölteni ezeket a kódokat, vagy megismerkedhetnek a funkcionalitást a jelen vizsgálatban.
Get forráskód | Részletek demo