Vertikální menu pro místa ve formě harmoniky s jQuery

Menu, jak víte - je nedílnou součástí areálu. Zajímavý procházet online zdroj je schopen úrokových návštěvníků. Kromě toho je důležitá vlastnost jakéhokoliv menu - jeho kompaktnost. Jednoduchá svislá navigace snadno vytvořit pomocí HTML a CSS. Ale jdeme dál: Naučme vytvořit MENU- „akordeon“ pomocí jQuery.

Vytvoření Menu- „akordeon“

Co je svislá navigace ve formě harmoniky? Jedná se o drop-down list, který vytváří snadno ovladatelné a poskytuje stylové místo. Menu, provedena tímto způsobem umožňuje, aby se velké množství dílčích položek. Přístup k nim dochází, když klepnete myší na požadovanou položku. Někdo může říci, že je možné provést jednoduché menu v tomto módu bez použití jQuery. Ano, to je. Ale tento objekt by neměl být velmi užitečné pro majitele chytrých telefonech a tabletech. Pojďme vytvořit vertikální menu, apelovat na všechny. Poté změna barevném provedení navigaci, bude možné přizpůsobit design na každém místě.

HTML kód

Tak, abychom vytvořili vertikální menu, musíte nejprve vytočit HTML kód, který bude obsahovat následující řádky:

Uložte tento kód do souboru s názvem Accord_menu.html.

Jak vidíte, jsme vytvořili výčtu. Skládá se ze 3 hlavních bodech:

- fotografie;

- filmy;

- knihy.

Každá položka má několik odstavců. Kde jsou #, budete muset přidat odkazy. Nyní je důležité popsat styl. To vše záleží na vzhledu vašeho internetového zdroje. Vertikální menu pro staveniště musí integrovat harmonicky do jeho designu.

CSS kód

S stylů, které by nemělo být obtížné. Bereme na vědomí jen to, že v tomto příkladu používá výplň přechodem. Zde je CSS kód:

Barva je uvedeno v CSS-souboru markery velikosti jsou odstraněny z položky v seznamu na levé straně. Je určen jak se chovat v každé položce a sub-menu, když podržíte nad ním. Například:

# E1fee2 - to bledě zelenou barvu sub.

# C4f0f7 -golubovaty odstín sub když najedete nad nimi.

Displej nemovitost zeptat blokové hodnoty nastavte potřebné polstrování a velikost. Barva, velikost, typ písma, umístění - vše je, jak je popsáno v souboru CSS. Nazvěme to například accordionmenu_my1.css.

Připojení vylepšení nabídky jQuery

Jak si možná vzpomínáte, naším cílem - vytvořit vertikální nabídky jQuery. Pokud nejste obeznámeni s touto technologií, nezoufejte. Používáme úložiště Google a připojit JQuery skript. To bude dělat to více atraktivní nabídku. jQuery je knihovna JavaScript založený na interakci HTML HTML a JavaScript. jQuery vám umožní přístup k obsahu a atributy prvků.

Takže připojit potřebnou skriptu v těle HTML soubor a nastavit pravidla pro ukládání 2 proměnných, s výjimkou dostihových prvky. Přispět kódem, zavřít ostatní karty v otvoru na kterém dochází k myši. Zde je návod, jak to vypadá:

Uloží všechny změny, vidět, jak to vypadá v menu prohlížeče. To je obyčejný výsledek: V důsledku toho jsme dospěli atraktivní nabídku, kterou můžete vždy měnit v závislosti na jejich preference. A získávání nových poznatků v oblasti jQuery, CSS, budete vytvářet jedinečné prvky v místě, zvyšování jejich kvalifikace.