Vertikálne menu pre miesta vo forme harmoniky s jQuery

Menu, ako viete - je neoddeliteľnou súčasťou areálu. Zaujímavý prechádzať online zdroj je schopný úrokových návštevníkov. Okrem toho je dôležitá vlastnosť akéhokoľvek menu - jeho kompaktnosť. Jednoduchá zvislá navigácie ľahko vytvoriť pomocou HTML a CSS. Ale ideme ďalej: Naučme vytvoriť Menu- "akordeón" pomocou jQuery.

Vytvorenie Menu- "akordeón"

Čo je zvislá navigácia vo forme harmoniky? Jedná sa o drop-down list, ktorý vytvára ľahko ovládateľné a poskytuje štýlové miesto. Menu, vykonaná týmto spôsobom umožňuje, aby sa veľké množstvo čiastkových položiek. Prístup k nim dochádza, keď kliknete myšou na požadovanú položku. Niekto môže povedať, že je možné vykonať jednoduché menu v tomto móde bez použitia jQuery. Áno, to je. Ale tento objekt by nemal byť veľmi užitočné pre majiteľov chytrých telefónoch a tabletoch. Poďme vytvoriť vertikálne menu, apelovať na všetky. Potom zmena farebnom prevedení navigáciu, bude možné prispôsobiť dizajn na každom mieste.

HTML kód

Tak, aby sme vytvorili vertikálne menu, musíte najprv vytočiť HTML kód, ktorý bude obsahovať nasledujúce riadky:

Uložte tento kód do súboru s názvom Accord_menu.html.

Ako vidíte, sme vytvorili zoznamu. Skladá sa z 3 hlavných bodoch:

- fotografie;

- filmy;

- knihy.

Každá položka má niekoľko odsekov. Kde sú #, budete musieť pridať odkazy. Teraz je dôležité popísať štýl. To všetko záleží na vzhľade vášho internetového zdroja. Vertikálne menu pre stavenisko musí integrovať harmonicky do jeho dizajnu.

CSS kód

S štýlov, ktoré by nemalo byť ťažké. Berieme na vedomie len to, že v tomto príklade používa výplň prechodom. Tu je CSS kód:

Farba je uvedené v CSS-súboru markery veľkosti sú odstránené z položky v zozname na ľavej strane. Je určený ako sa správať v každej položke a sub-menu, keď podržíte nad ním. napríklad:

# E1fee2 - to bledo zelenú farbu sub.

# C4f0f7 -golubovaty odtieň sub keď najazdíte nad nimi.

Displej nehnuteľnosť opýtať blokové hodnoty nastavte potrebné polstrovanie a veľkosť. Farba, veľkosť, typ písma, umiestnenie - všetko je, ako je popísané v súbore CSS. Nazvime to napríklad accordionmenu_my1.css.

Pripojenie vylepšenia ponuky jQuery

Ako si možno spomínate, naším cieľom - vytvoriť vertikálne ponuky jQuery. Ak nie ste oboznámení s touto technológiou, nezúfajte. Používame úložiska Google a pripojiť JQuery skript. To bude robiť to viac atraktívne ponuku. jQuery je knižnica JavaScript založený na interakciu HTML HTML a JavaScript. jQuery vám umožní prístup k obsahu a atribúty prvkov.

Takže pripojiť potrebnú skriptu v tele HTML súbor a nastaviť pravidlá pre ukladanie 2 premenných, s výnimkou dostihových prvkami. Prispieť kódom, zavrieť ostatné karty v otvore na ktorom dochádza k myši. Tu je návod, ako to vyzerá:

Uloží všetky zmeny, vidieť, ako to vyzerá v menu prehliadača. To je obyčajný výsledok: V dôsledku toho sme dospeli atraktívnu ponuku, ktorú môžete vždy meniť v závislosti na ich preferencie. A získavanie nových poznatkov v oblasti jQuery, CSS, budete vytvárať jedinečné prvky v mieste, zvyšovanie ich kvalifikácie.