Създаване на свежо меню
При разработването на всеки сайт е много важно правилно да подредите и организирате съдържанието. Необходимо е да се уверите, че посетителите не се зареждат с голямо количество информация наведнъж.
За да направят това, уеб администраторите трябва да могат да използват различни техники за групиране на съдържание и да го показват само когато посетителят се интересува от него.
Днес ще създадем прост, но добре видим "акордеон", използвайки CSS, jQuery и приставката за облекчаване за страхотни ефекти.
Стъпка #1 - XHTML
Както можете да видите в демо версията, нашият "акордеон" (по-нататък съгл. :)) е разделен на 4 части. Всяка част е дефинирана с LI елемент с меню на класа. Те са позиционирани вътре в основния неподреден списък ul.container.
Всеки LI елемент съдържа UL, който образува област за заглавие (li.button) и област за съдържание (li.dropdown).
Също така е важно да се отбележи, че елементите от падащия списък са скрити по подразбиране с CSS свойството display:none.
Стъпка #2 - CSS
Стъпка #3 - jQuery
Първо свързваме всички необходими скриптове в заглавката на документа:
Както можете да видите в демото, панелът не се движи плавно, а със скокове. Това се постига с помощта на приставката за облекчаване. Плъгинът има много различни ефекти и можете да експериментирате с тях.
Първо, настройваме метод за приставката за облекчаване, която ще се използва за ефектите slideUp/slideDown. След това свързваме специална функция към бутона, която ще стартира процеса при натискане.
Също така използвам метода slideToggle на jQuery, за да проверя дали даден елемент е видим на страницата и да реша дали да го покажа или скрия. По този начин, когато щракнете върху отворена секция, тя ще се свие, вместо да остане на мястото си.
След това използваме функцията e.preventDefault(), за да предотвратим превключването на браузъра към друга страница след кликване.
Това е! Наслади се!
Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.tutorialzine.com Преведен от: Максим Шкурупий Урокът е създаден: 9 декември 2009 г. Преглеждания: 47150 Правила за препечатване
5 последни урока от рубриката "За сайта"
Блокиране на разкриващи ефекти
Днес бихме искали да споделим няколко идеи за ефект на разкриване на кутия, които можете да използвате за вашите проекти.
Ако искате значително да повишите нивото на сигурност на вашия WordPress сайт, тогава не можете да избегнете конфигурацията на файла .htaccess. Това не само ще ви предпази от редица хакерски атаки, но и ще организира пренасочвания, както и ще реши проблеми, свързани с кеша.
20 безплатни WordPress теми за материален дизайн
Материалният дизайн е нарастваща тенденция от Google. Тази колекция съдържа безплатни WordPress теми, направени в този популярен стил.
20 Creative MouseOver уебсайта
Ефектите са там, за да впечатлят нашите посетители. Тази колекция съдържа няколко десетки ресурса, чиито създатели са се постарали много да впечатлят своите посетители.
В края на месеца ви предлагаме да се запознаете с набор от безплатни материали за уеб дизайнери за изминалия месец.