Интересен пример за меню JQuery

Днес ще обсъдим как да се направи първоначалната менюто на JQuery.

Реших да напиша тази бележка, защото аз се суетеше повече от един час, за да се направи менютата и всичко, което четете тук за да си върша.

Многократно се вижда на сайтове като меню, но когато ги видях, имах желание да се види как те се прилагат. Съвсем наскоро е необходимо да се направи подобно меню, но конкретно решение, аз не знаех, че да се намери и да видим как да се направи такова меню на сайтовете, които съм срещал, не можех - с търсенето на мен, както и преди, е трудно.

По-добър късмет следващия път

Първото нещо, което ми хрумна, за осъществяването на тази задача - това е със сигурност да създаде снимки, да ги поставят на заден план (CSS фона собственост) и да ги преместите с помощта на функцията одушевени () JQuery библиотека. Но както се оказа одушевени () не знае как да работи правилно с фон-позиция CSS собственост. или по-скоро не можете да посочите двата аргумента X и Y (фон-позиция: X Y), може само X.

След като го инсталирате, аз бях в състояние да се създаде меню с изображения вместо текст, но тази възможност ми се струваше изключително неудобно, защото, ако, например, ние ще трябва да промените името на елемента от менюто, ще трябва да се прехвърля изображението и преназначаване размер в CSS, но е много неудобно ,

Ето защо, от тази версия, аз отказах и реших да го направя с CSS и HTML код.

създаване на меню

За да създадете меню без използването на словесни картини, без да свързвате различни JQuery плъгини не се нуждаят от толкова много.

Нека да разгледаме всички етапи:

1. На първо място, създаване на меню в HTML:

2. Свържете JQuery библиотеката. ако тя все още не е свързан: добавете следния ред в началото на документа за HTML:

JQuery в този случай е свързан от хранилището в Google. Разбира се, можете да се свържете по някакъв друг начин.

Както можете да видите, аз съм разделена стиловете на "задължително" и тези, които са отговорни за появата на менюто и не влияят на правилното функциониране JQuery скрипт. Т.е. ако премахнете втората стил, менюто ще продължи да работи.

4. Добавете кода JQuery:

Нека разгледаме малко код. В munu.each (.) Ние добавяме вътре връзки (маркер) Разделение блок с анкерни текстови връзки, т.е. което правим като две уравнения хипервръзки, които по-късно ще се преместят. (.) В munu.hover конкретно действие, когато посочи една връзка: ние го преместете до 40 пиксела.

Важно! Значение marginTop: "- 40px" трябва задължително да съвпада с ценностите на имотите в задължителен стилове CSS височина: 40px и линия-височина: 40px (CSS стилове см.).

Това е всичко. Сега, това меню може да се редактира, без много шум.

Вече казах, че това е менюто - плод на въображението ми, така че аз бих искал да видя как да се прилагат тези менюта в други сайтове. Ако изведнъж имате примери, моля споделете!