Мини-курс по jQuery для дизайнеров. Урок 4. Аккордеон и подсказки.

Продолжу сегодня мини-курс по jQuery для дизайнеров. В предыдущем уроке мы разбирали создание меню с эффектом аккордеон. Сегодня мы его немного доработаем и научимся делать всплывающие подсказки. Как сделать всплывающие окна с подсказками с помощью CSS3 мы разбирали в этой статье. Напоминаю, что все примеры по CSS3 и JavaScript распологаются на специальных демо-сайтах: http://www.css3demos.rusdigi.org и http://www.jsdemos.rusdigi.org.

[adsense]

Доработка меню с эффектом аккордеон

Доработка предыдущего примера будет заключаться в том, что мы сможем выбирать какой из пунктов меню показывать раскрытым по умолчанию. Напомню, что в предыдущем варианте у нас по умолчанию раскрывался первый пункт.
В таблице стилей CSS установим .accordion p в значение display:none. Теперь к примеру мы хотим раскрыть по умолчанию третий пункт меню. Подойдет такой код: $(".accordion2 p").eq(2).show();, где eq = equal (равно). Учитывайте только, что нумерация начинается с нуля. Привожу полный код:

$(document).ready(function(){

	$(".accordion2 h3").eq(2).addClass("active");
	$(".accordion2 p").eq(2).show();

	$(".accordion2 h3").click(function(){
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	});

});

Посмотреть демо

Всплывающие окна с подсказками.

В этом примере мы создадим красивые всплывающие подсказки с эффектом. Эффект проявляется при наведении курсора мыши на элемент <em>. При этом изменятся значения прозрачности(opacity) и позиционирования.

А вот собственно и код:

$(document).ready(function(){

	$(".menu_tooltips a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});


});

Посмотреть демо

Выбрать зимнюю одежду для детей иногда бывает сложно и затруднительно. Статья Зимняя одежда для детей поможет вам сделать выбор.