Мы продолжаем работу над меню с контентом, реализованным на сайте художницы Марии Берсеневой. В первой части статьи была произведена вёрстка меню, а в этой части мы оживим его при помощи javascript и ajax-библиотеки jQuery.
Прежде чем говорить о функции, которая позволит нам сделать всё то, что мы хотим, прокрутим в голове, как это должно работать. При наведении на неактивный пункт меню должна происходить следующая последовательность действий:
-
На кнопке, на которую мы навели, изменяется цвет бэкграунда на светло-серый (как помните, её левой и правой части, т.е. в первом и втором столбце таблицы)
-
На кнопке, на которую мы навели, изменяется изображение с именованием кнопки (во втором столбце таблицы).
-
На кнопке, которая была активной, изменяется цвет бэкграунда на тёмно-серый (в первом и втором столбце таблицы).
-
На кнопке, которая была активной, изменяется изображение с именованием кнопки (во втором столбце таблицы).
-
Предыдущий контент исчезает и заместо него появляется новый.
Итого: нужно изменить 8 элементов (во 1, 2 и 5 пунктах по два элемента).
Cкрипт меню только на JavaScript
function menuchange(imagename,divid,number){
if (check_lmen!=number){ /*проверка*/
var colorr = '#efeff5'; /*номер активного цвета*/
var colorr2 = '#d8dadd'; /*номер неактивного цвета*/
/*Определяем префикс текущей кнопки и имя её изображения*/
if (check_lmen=='1'){
divid2 = 'lb_fanart';
imagename2 = 'lbut_fanart.png';
}
else if (check_lmen=='2'){
divid2 = 'lb_colls';
imagename2 = 'lbut_collects.png';
}
else if (check_lmen=='6'){
divid2 = 'lb_other';
imagename2 = 'lbut_other.png';
}
/*Определяем список элементов, которые нам надо изменить*/
var div_content = divid+'_cont'; /*Блок с текущим контентом*/
var div_content2= divid2+'_cont'; /*Блок с будущим конт.*/
var name_img = divid+'_img'; /*Блок с текущей картинкой*/
var name_img2 = divid2+'_img'; /*Блок с будущей картинкой*/
var div_name1_1 = divid; /*Текущая правая часть кнопки*/
var div_name1_2 = divid+'2'; /*Текущая левая часть кнопки*/
var div_name2_1 = divid2; /*Будущая правая часть кнопки*/
var div_name2_2 = divid2+'2'; /*Будущая левая часть кнопки*/
/*Производим измненения */
document.getElementById(div_name1_1).style.background=colorr;
document.getElementById(div_name1_2).style.background=colorr;
document.getElementById(div_name2_1).style.background=colorr2;
document.getElementById(div_name2_2).style.background=colorr2;
document.getElementById(name_img).style.background="url(images/"+imagename+") no-repeat";
document.getElementById(name_img2).style.background="url(images/"+imagename2+") no-repeat";
document.getElementById(div_content).style.display="block";
document.getElementById(div_content2).style.display="none";
/*Указываем номер теперь уже новой текущей кнопки*/
check_lmen=number;
}
}
Разберём скрипт попунктно.
-
Прежде всего создаём переменную, в которой будет хранится номер текущей кнопки (переменная check_lmen). [строка 1]
-
Определяем функцию menuchange, которая и будет вызываться при наведении на кнопки. Ей будет передано три аргумента, которые определяют ту кнопку, на которое будет сделано наведение мышкой: а) полное имя активного изображения с именем кнопки; б) префикс идентификаторов контейнеров (id-шки div-ов) – вы ведь помните, что для каждой кнопки они начинаются одинаково; в) номер кнопки. [строка 2]
-
Первым делом функция проверяет номер текущей кнопки и номер кнопки, на которую была наведена мышь. Если они совпадают, то ничего происходить не будет.[строка 3]
-
Создаём переменные с номерами цветов бэкграундов для активной и неактивной кнопок.[строки 4-5]
-
Для текущей кнопки определяем префикс id-шек div-ов и полное имя неактивного изображения кнопки. Если пунктов в меню будет больше трёх, то нужно будет их сюда дописать.[строки 8-19]
-
Создаём переменные, которые содержат имена всех элементов, которые надо изменить (как было сказано ранее – восемь штук). [строки 21-28]
-
Производим изменения, используя функцию getElementById. Сначала изменяем цвет кнопок [строки 30-33], затем изображения с именами кнопок [строки 34-37], а затем сменяя блок с контентом [строки 38-39]
-
Изменяем номер текущей кнопки (ведь теперь у нас новая активная кнопка).[строка 41]
Осталось последнее, в коде HTML поставить на нужные элементы обработчик событий onMouseOver и поставить ссылку на скрипт, который мы написали выше (положим его в папку js под именем js_left_menu.js).
Для начала зайдём в первую часть статьи и посмотрим html-код. Нам нужно проставить событие onMouseOver на левую и правую части кнопок. Для этого изменяем 5, 6, 7 строчки (для левой части кнопок) и 12,16 и 20 (для правой части кнопок).
<div id="lb_colls2" onMouseOver="javascript:menuchange ('lbut_collects_act.png','lb_colls','2')"> </div>
<div id="lb_other2" onMouseOver="javascript:menuchange ('lbut_other_act.png','lb_other','6')"> </div>
<div id="lb_fanart" onMouseOver="javascript:menuchange ('lbut_fanart_act.png','lb_fanart','1')">
<div id="lb_colls" onMouseOver="javascript:menuchange ('lbut_collects_act.png','lb_colls','2')">
<div id="lb_other" onMouseOver="javascript:menuchange ('lbut_other_act.png','lb_other','6')">
И прописываем в хидере html-документа строку.
Всё замечательно, всё работает. Но хотелось бы, чтобы контент появлялся не мгновенно, как сейчас, а как бы затухая и возникая. В этом нам поможет библиотека jQuery.
Cкрипт меню с помощью jQuery.
Итак, как было сказано ранее, jQuery поможет нам сделать плавное затухание. Но помимо затухания, с помощью этой библиотеки можно сделать и другие изменения. Собственно раз уж мы используем её, то почему бы и нет, плюс практика лишняя:).
Итак, смотрим код скрипта выше. Мы будем менять 21-41 строчки, изменив немного сначала значения переменных, а потом изменив участок кода, отвечающего за изменения.
var div_content = '#'+divid+'_cont';
var div_content2= '#'+divid2+'_cont';
var name_img = '#'+divid+'_img';
var name_img2 = '#'+divid2+'_img';
var div_name1_1 = '#'+divid;
var div_name1_2 = '#'+divid+'2';
var div_name2_1 = '#'+divid2;
var div_name2_2 = '#'+divid2+'2';
/*Проводим изменения*/
$(document).ready(function(){
$(div_name1_1).css('background',colorr);
$(div_name1_2).css('background',colorr);
$(div_name2_1).css('background',colorr2);
$(div_name2_2).css('background',colorr2);
$(name_img).css('background',"url(images/"+imagename+") no-repeat");
$(name_img2).css('background',"url(images/"+imagename2+") no-repeat");
$(div_content2).css('display','none');
$(div_content).fadeIn(200);
return false;
});
-
Строки 2-9 почти не отличаются, кроме того, что к каждой переменной добавляется знак идентификатора – #.
-
В строке 11 вызывается функция jQuery. Для информации - строчку можно переписать более коротко: $(function() { . Также можно $ заменить на jQuery – собственно $ является псевдонимом функции jQuery.
-
Строки 12-20 в целом похожи друг на друга. Сначала идёт вызов жкьюри и указывается имя селектора – имя-идентификатор контейнеров кнопок и контента. Затем используется команда css, принимающая два аргумента – имя CSS-свойства и его значение. Собственно в строках 12-18 изменяется CSS-свойство background, которому присваивается либо новый цвет, либо изображение. В общем всё по правилам цсс. В строке 20 отключается из видимости старый блок с контентом.
-
А вот 21 строка отвечает собственно за плавное появление нового блока контента. Время появления указано в 200 миллисекунд. Больше не рекомендую, ниже упомяну об этом.
В самом конце скрипта (после нашей функции menuchange) также необходимо добавить следующую строчку.
Она инициализирует работу jQuery. Без этой строчки скрипт работать не будет.
И да, не забудьте прописать в HTMLе путь к библиотеки jQuery.
Заключение
Итак, подведём итоги. Мы рассмотрели пример из повседневной практики, который реализует меню с блоком контента. Был рассмотрен макет, проблема его реализации, а также предложено решение его устранения. Затем была реализована вёрстка, и сделан первый скрипт только на JavaScript, после чего скрипт был изменён при помощи библиотеки jQuery. Пример с jQuery интересен и хорош, но обладает одним изъяном. Если дёргать по меню курсором мышки как параноику (в нашем случае переключения между кнопками должно быть быстрее 200 миллисекунд), то иногда можно сделать, чтобы одновременно были отображены несколько блоков контента. Дело в том, что если переключить кнопку до того как появился новый контент на наведённую до этого кнопку, то текущий контент не будет отключён, поскольку он ещё завершил операцию со своим “появлением” (ты сам хоть понял, что сказал? – прим.ред.). Адекватное решение проблемы я не нашёл, поэтому над этим вопросом можно будет подумать.
Искренне надеюсь что все остались довольны=). Что я ещё могу добавить… Stay tuned, people 8).
Ссылки по теме
Часть 1: Вёрстка
Часть 2: Программирование
Похожие записи:
- Скрипт меню с контентом “почти как флэш” своими руками. Часть 1. Вёрстка.
- Красивое раскрывающееся меню на jQuery
- "Как скрасить время ожидания пользователя" или "Предварительная загрузка страницы"
- Как выделить все чекбоксы одним кликом? JavaScript способ, и три способа на jQuery
- Свойства CSS3! Часть 1. text-shadow: 15 способов применения, кроссбраузерность
29/09/2009 at 7:30 Постоянная ссылка Цитировать
Давно хотел попробывать!!!=)))
29/09/2009 at 15:18 Постоянная ссылка Цитировать
Давай-давай, с тебя атчот о проделанной работе=)
29/09/2009 at 15:20 Постоянная ссылка Цитировать
Жди скоро покажу!=)
29/09/2009 at 15:22 Постоянная ссылка Цитировать
Договорились=)
03/10/2009 at 21:20 Постоянная ссылка Цитировать
Безумно полезно, достаточно понятно написано…Пасибо!^^
03/10/2009 at 21:23 Постоянная ссылка Цитировать
Всегда пожалуйста=)
23/02/2010 at 23:49 Постоянная ссылка Цитировать
особо заинтересовало… На этом, возможно, буду делать новый проект, может, даже зацепит и старый)))
24/02/2010 at 0:11 Постоянная ссылка Цитировать
Да, симпатичный скриптик получился =) Есть идеи по его дописанию, но как-то времени нет, замотался весь
26/05/2010 at 20:18 Постоянная ссылка Цитировать
используй $(object).stop(); для остановки анимации объекта object
//это для бага описанного в заключении
27/05/2010 at 0:13 Постоянная ссылка Цитировать
насколько помню, пробовал, но чего-то не то выходило. помню правда, что потом появилась идея как избавиться от бага, но как-то времени и возможности не было.
а так спасибо за комментарий!
13/02/2011 at 20:47 Постоянная ссылка Цитировать
Как замечательно!!! Спасибо.
Попробую сделать… когда высплюсь.
13/02/2011 at 21:48 Постоянная ссылка Цитировать
Попробуйте!
Жаль только примера на сайте уже нет – сделан редизайн
14/02/2011 at 13:49 Постоянная ссылка Цитировать
а что-то у меня не получилось, скрипт не отрабатывает:
при наведении на “Коллекция” исчезает “Фан Арт” и само слово “Коллекция” со стрелкой. НА “Другое” – тоже самое…
вроде старалась сделать все по шагам, имя папки поправила (у меня img)
Проверила все до строчки, но – не работает. ПОчему?
14/02/2011 at 14:42 Постоянная ссылка Цитировать
не глядя трудно сказать. предлагаю сохранить тот пример, который имеется в статье и работать с ним или всё проработать заново детально без замен чего либо, чтобы убедиться, что работает, а уже потом заменять на свои значения. обычно помогает =)