Hozzon létre egy dia effektet (lavalamp) a menüben
Nem is olyan régen úgy döntöttem, hogy hangszórókat adok hozzá a webhelyem legfelső menüjéhez. Valószínűleg észrevette, hogy az elem kiválasztott területe hogyan csúszik a webhely felső menüjében.
Annak érdekében, hogy ne tárja fel újra a kereket, először úgy döntöttem, hogy kész megoldásokat keresek az interneten és nem hiába. Van egy speciális plugin a jQuery számára. amelyet LavaLampnak hívnak.
Ebben a cikkben részletesen ismertetjük a dinamikus menü létrehozását a LavaLamp plug-in segítségével.
Szóval, mielőtt folytatná, nézze meg a mintamenüket, amelyeket ezzel a bővítménnyel hozhat létre.
Alsó Stílus
Szép, nem igaz?
Az ilyen menük elemiek! Először létrehozzuk a menü html kódját:
Ez a menüelem aktív menüstílusokat ír le (aktív kiválasztás) és a menüben teljesen el van helyezve. Így, amikor az egérmutatót a menüpont fölé mozgatjuk, megváltoztatjuk a bal CSS tulajdonságot, és mozgatjuk a kívánt irányba. Ahhoz, hogy a menüpontok szövege a Z-index kiválasztott területének tetején legyen, akkor a menüelemeknél kisebbre van beállítva
A plug-in algoritmusa kidolgozásával most nézze meg a stílusokat:
Először is, az "ul" listához tartozó stílust narancsszínű narancssárga háttérrel állítottuk be, és beállítottunk néhány alapvető tulajdonságot, például a magasságot, szélességet, margókat, margókat stb. Viszont viszonylagos pozícionálást használunk, mert így teljesen "i" pozíciót tehetünk az "ul" -hez viszonyítva. Ez lehetővé teszi, hogy szabadon mozgassa a "li" -t a szülő belsejében "ul"
Ezután a "li" CSS tulajdonságot "float: left" -re állítjuk, így minden menüelem vízszintes elrendezését állítjuk be.
Végül olyan stílusok, amelyek az egyes menüelemek gyakorlatilag interaktív részét képviselik. Ezek a stílusok többnyire kozmetikai jellegűek.
Továbbra is a jQuuery könyvtár és a lavalamp plug-in parancsfájljának az oldalra való kapcsolódása. Ehhez a címkék között
tegye a következő kódot:A jquery.easing.js plugin szükséges ahhoz, hogy gyönyörű effekteket adjon animáció közben. Nem kötelező! Itt töltheti le. és a lavaLamp plugin maga itt van
lavaLamp plugin támogatja az alábbi lehetőségek közül: mérséklése «fx», animáció sebessége «sebesség» és a harmadik paraméter egy visszahívási funkció akkor jelenik meg, ha rákattint egy menüpontot. Mindezek a paraméterek opcionálisak, és alapértelmezés szerint az alábbi értékeket veszi figyelembe: "fx" - "lineáris", "sebesség" - 500 ms.
Ahhoz, hogy a kiválasztott terület visszaállhasson a helyre, meg kell adnia a szükséges menüpontot az "aktuális"
Itt letöltheti a menük forrását
Erre talán minden! Remélem, ez az anyag hasznos volt számodra?
Ahhoz, hogy a linkek működjenek, csak törölje ezt a kódot a plugin meghívásakor!
Értékeld ezt a cikket: