В тази статия, ние ще разработи прост малко падащо меню с помощта на JQuery. За да започнете, да погледнем в демо файла. Надяваме се, че знаете поне малко на основите на JQuery и CSS. Ключови аспекти на създаването на падащото меню в прилагането на CSS са параметри: положение, отгоре, отляво, Z-индекс.
С помощта на тези параметри, можем да бъдем сигурни, че нашето меню ще се появи точно под линка, който беше наложен отново и просто ще покрие всички други елементи. Ние също ще се уверете, че показаното меню, когато задържите курсора и изчезва, когато курсорът е взето настрана. За реализацията на тези събития, ние ще използваме JQuery функции: mouseenter и mouseleave. И това е всичко, което трябва да се създаде от падащото меню!
Кликнете върху линка демо файл и ще видите какво ще се развива.
Запознайте се с HTML код падащото меню:
Както можете да видите, тук ние ще използваме неподредените списъци за изпълнение на елементите от менюто. Всяко меню връзка се определя на падащото меню клас, както и от падащото меню се е обхванат от под-клас връзки. имената на класовете се използват JQuery да се определи кои от менюто, което искате да покажете.
Запознайте се с CSS код:
Повечето от кода на CSS се използва за форматиране на меню (можете да давам да погледне по свое усмотрение менюто), но има и някои важни точки:
1 - Премахване на раздела символи от списъка за стил: няма;
2 - Ние знаем, че в списъците - елементи блоков и винаги се показват във вертикален начин. За да се направи място да ги хоризонтално, което отдаваме на тях параметри вградени елементи и да ги приведе към лявата страна с помощта на кода:
3 - подразбиране връзки са вградени елементи. Ние ги преобрази в блокови елементи, с помощта на дисплея: блок (по този начин, ние можем сега да ги помолите ширината).
4 - Скриване Всички меню чрез:
Представете си, старите дни, когато падащите менюта са били осъществени с помощта на груби код й # 097; vascript, освен това, има нужда куп ненужни код. Но днес, ние всички се нуждаем, е JQuery:
Много интересно и лесно нещо. Нека да ви обясня как работи. Да започнем с това, и както обикновено, ние прегърне нашия код в JQuery контролер:
Нека да сме сигурни, че са скрили (скрий ()) всички предишни отворите менюто преди курсора скача на следния линк:
Това е, което ще бъде в HTML кода:
Когато мишката витае над връзката с класа на падащ, ние ще се върне назад с родител () и да се спре на "ли", а след това използвайте следваща (), в което се намираме в правилната падащото меню "Ли" ще има подклас връзки (sublinks). По този начин, JQuery опростява процеса на намиране на нас какъв падащото меню, за да се покаже, когато показалеца на мишката витае конкретна връзка.
След това, ние се прилагат някои CSS код в падащото меню, така че да се покаже ясно въз основа на която е курсора:
Кодът е много важно, тъй като ни гарантира, че падащото меню се показва точно под определено препратката. Ако позицията е настроен на абсолютна, ние можем да позиционирате елемент във всяка област на нашия уебсайт. На следващо място, ние определяме връзките най-горната позиция, на която курсора да се правят чрез $ (това) .offset (). Най-високо (това се отнася за текущата позиция в менюто под показалеца) и добавете към него е височината, за менюта, за да се появяват точно под връзка. Нещо подобно се извършва и в левия параметър. След това ние използваме Z-индекса, за да бъдете сигурни, че нашето меню ще се появи на върха на други елементи.
След това, ние се покаже падащо меню, като го завъртите (slideDown) при скорост от 300 милисекунди, използвайки:
Разбира се, можете да използвате и други опции като анимации fadeIn, анимации с потребителски стилове, и така нататък.
Сега трябва да избяга от падащото меню концепция картографиране, и да го накара да се скрие. Ние се нуждаем тук е фрагмент от код:
За да се скрие от падащото меню, ние използваме slideUp, антоним на slideDown. Имайте предвид, че подменю - променлива, която сме създали за да се определи конкретна падащото меню.
По този начин, ние се атрактивен падащото меню едно ниво на JQuery.
Свързани статии