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

Have a question? Ask in chat with AI!

jQuery логоПродолжу сегодня мини-курс по 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) и позиционирования.

tooltips jQuery

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

$(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");
	});


});

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

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


3 комментария для “0

  1. Уведомление: Мини-курс по jQuery для дизайнеров. | RusDigi.org Блог Гилязетдинова Руслана
  2. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 4. Аккордеон и подсказки. | Grabr
  3. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 5. Подсказки и списки. | RusDigi.org Блог Гилязетдинова Руслана

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Copiny — форма обратной связи для сайта
Следующая запись Плагин для WordPress LightBox Plus — показ картинок без переходов