Függőleges menü a helyszínen formájában harmonika jQuery

A menü, mint tudjuk - szerves része a helyszínen. Érdekes navigálható online forrás képes érdeklődés látogatók. Ezen kívül fontos tulajdonsága minden menü - tömörsége. Egy egyszerű függőleges menü könnyen létre a HTML és CSS. De megyünk tovább: Tanuljuk létrehozni menü- „harmonika” segítségével jQuery.

Hozzon létre egy menü- „harmonika”

Mi a függőleges menü formájában harmonika? Ez egy legördülő listából, amely létrehoz egy könnyű navigálni, és ad egy elegáns hely. Menu végzett ily módon lehetővé teszi, hogy kapcsolja be a sok altételként. Az azokhoz való hozzáférést akkor jelentkezik, ha rákattint az egérrel a kívánt elemet. Lehet, hogy valaki azt mondani, hogy lehetséges, hogy egy egyszerű menüt ily módon használata nélkül jQuery. Igen, ez az. De ez a tárgy nem lenne nagyon hasznos, hogy a tulajdonosok az okostelefonok vagy tabletta. Hozzunk létre egy függőleges menü vonzó minden. Ezután megváltoztatja a színét stílusformázásához navigáció, akkor lehet, hogy állítsa be a design minden oldalon.

HTML kód

Tehát, hogy létrehozzuk a függőleges menü, akkor először tárcsázza a HTML-kódot, amely tartalmazza a következő sorokat:

Mentse ezt a kódot nevű fájlt Accord_menu.html.

Mint látható, hoztunk létre egy rendezetlen listát. Benne 3 fő pontjai:

- fotók;

- filmek;

- könyveket.

Minden elem rendelkezik néhány bekezdést. Hol #, akkor kell hozzá linkeket. Most az a fontos, hogy leírja a stílust. Minden attól függ, a kinézetét internetes forrás. Függőleges menü a helyén kell harmonikusan illeszkedik a design.

CSS-kód

A stílus akkor nem lesz nehéz. Megjegyezzük, csak az, hogy ebben a példában egy színátmenetes kitöltés. Itt látható a CSS-kód:

szín van megadva, a CSS-fájl, markerek eltávolítják a terméket a listában a bal oldalon. Ez határozza meg, hogyan kell viselkedni az egyes elemeket, és az almenüben, ha lebeg felette. Például:

# E1fee2 - ez halványzöld színű sub.

# C4f0f7 -golubovaty árnyékban sub, ha lebeg felettük.

Kijelző tulajdonság kérni blokk érték beállításához szükséges padding és méretét. A szín, méret, betűtípus, a hely - minden, mint leírni a CSS fájlban. Nevezzük például accordionmenu_my1.css.

Csatlakozó jQuery menü fejlesztések

Mint bizonyára emlékeznek rá, a célunk -, hogy hozzon létre egy függőleges menü jQuery. Ha nem ismeri ezt a technológiát, ne aggódj. Mi használjuk a Google tárhelyet és csatlakoztassa JQuery szkriptet. Ez lehetővé teszi vonzóbbá menüben. jQuery egy JavaScript könyvtár alapuló kölcsönhatás Hypertext Markup HTML és JavaScript. jQuery lehetővé teszi a hozzáférést a tartalmat és attribútumok elemekkel.

Tehát csatlakoztatni a szükséges script a szervezetben a HTML-fájlt, és állítsa be a szabályokat tárolására 2 változó kivételével lóverseny elemekkel. Hozzájárulás kód, más lapokat bezárni a megnyitón az, ahol van egy kattintással. Itt van, hogyan néz ki:

Mentse el a változtatásokat, lásd, hogyan néz ki a böngésző menüjében. Ez egy közös eredménye: Ennek eredményeként, mi jön vonzó menüt, hogy mindig lehet átalakítani, attól függően, hogy a preferenciák. És új ismeretek megszerzése terén a jQuery, CSS, akkor jön létre az egyedi elemeket a helyszínen, javítva készségek.