Hozzon létre egy sima legördülő menü jquery
Ebben a cikkben, akkor dolgozzon ki egy egyszerű kis legördülő menü segítségével jQuery. Kezdeni, megnézzük a demo fájlt. Reméljük, hogy tudja, legalább egy kicsit az alapokat a jQuery és CSS. A fő szempontok létrehozásának a legördülő menüből alkalmazása során a CSS paraméter: pozíció, felső, bal, z-index.
Ezekkel a paraméterekkel, akkor biztos lehet benne, hogy a menü alatt jelennek meg a linket, szabtak át, és csak akkor terjed ki az összes többi elem. Azt is biztosítani fogja a menü jelenik meg, ha lebeg a kurzort, és eltűnik, ha a kurzor vesszük félre. A megvalósításához ezek az események, akkor használja jQuery funkciók: mouseenter és mouseleave. És ez minden, amit létre kell hozni egy legördülő menüből!
Kattints a linkre demo fájlt, és látni fogja, mit fogunk fejlődni.
Nézze meg a HTML-kód legördülő menüből:
Mint látható, itt fogjuk használni rendezetlen listák végrehajtására vonatkozó menüpontok. Minden kapcsolat menüben van rendelve osztály legördülő menüből, és legördülő menüt magát alá tartozó al-osztály linkeket. Osztály neveket használnak jQuery, hogy melyik menüt szeretné megjeleníteni.
Nézze meg a CSS kód:
A legtöbb CSS kód formázására használható menü (adhat egy pillantást a saját belátása szerint a menüben), de van néhány fontos pontot:
1 - eltávolítása lapon karaktereket list-style: none;
2 - Tudjuk, hogy a listák - egy blokk szintű elemeket, és mindig megjelenik egy függőleges módon. Annak érdekében, hogy helyet Fekvő, tulajdonítunk nekik paraméter inline elemet, majd állítsa a bal oldalon a kód:
3 - Az alapértelmezett hivatkozások belső elemek. Mi remake őket tömb elemei A display: block (így most már kérni őket, a szélesség).
4 - bujkál minden menü segítségével:
Képzeld el, a régi időkben, amikor a legördülő menük hajtottak végre útján durva kód j # 097; vascript, sőt volt szükség csomó felesleges kódot. De ma, minden van szükségünk jQuery:
Nagyon érdekes és könnyű dolog. Nézzük magyarázni, hogyan működik. Először is, és mint mindig, mi ölelés a kódot jQuery vezérlő:
Bizonyosodjunk meg róla, hogy már el van rejtve (hide ()) minden korábbi megnyithatja a menüt a kurzor előtt ugrik a következő linken:
Ez az, amit lesz a HTML kód:
Amikor az egeret fölé a kapcsolatot az osztály egy legördülő, haladunk vissza a szülő (), és megáll a „li”, majd a next () találjuk magunkat, a jobb oldali legördülő menüben „li” lesz egy al-osztály kapcsolatok (alcsatlakozási). Így jQuery leegyszerűsíti a megállapítás, hogy melyik milyen legördülő menü megjelenítéséhez, ha az egérmutató az adott linket.
Következő lépésként alkalmazza néhány CSS kódot a legördülő menüből úgy, hogy világosan fel kell tüntetni, amelyek alapján a kurzor:
A kód nagyon fontos, mivel ez biztosítja számunkra, hogy a legördülő menü alatt jelenik meg a meghatározott referencia. Ha a pozíció beállítása abszolút, akkor egy elemet bármely területén honlapunkon. Ezután meghatározzuk a legjobb pozíció kapcsolatokat, amelyektől kurzor segítségével $ (this) .offset (). Top (erre utal a jelenlegi menüpont alatt pointer), és add hozzá a magasság, a menük megjelennek alatt a link. Valami hasonló is végeznek a bal paramétert. Akkor használjuk a z-index annak érdekében, hogy biztos, hogy a menü jelenik meg a tetején a többi elem.
Következő, megjelenik egy legördülő menü forgatva (slideDown) sebességgel 300 milliszekundum segítségével:
Persze, akkor más lehetőség, mint az animációk fadeIn, animációk egyéni stílusokat, és így tovább.
Most kell, hogy elkerülje a koncepció térképezés legördülő menüből, és rávenni, hogy elrejtse. Szükségünk van egy kódrészlet:
Annak érdekében, hogy elrejtse a legördülő menüből, az általunk használt slideUp, ellentétes értelmű a slideDown. Tartsuk szem előtt, hogy almenü - változót hoztunk létre, hogy meghatározzák a konkrét legördülő menüből.
Így megkapjuk vonzó egyszintű legördülő menüt a jQuery.