Скрипт меню с контентом “почти как флэш” своими руками. Часть 2. Программирование.

Мы продолжаем работу над меню с контентом, реализованным на сайте художницы Марии Берсеневой. В первой части статьи была произведена вёрстка меню, а в этой части мы оживим его при помощи javascript и ajax-библиотеки jQuery.

Прежде чем говорить о функции, которая позволит нам сделать всё то, что мы хотим, прокрутим в голове, как это должно работать. При наведении на неактивный пункт меню должна происходить следующая последовательность действий:

1. На кнопке, на которую мы навели, изменяется цвет бэкграунда на светло-серый (как помните, её левой и правой части, т.е. в первом и втором столбце таблицы)
2. На кнопке, на которую мы навели, изменяется изображение с именованием кнопки (во втором столбце таблицы).
3. На кнопке, которая была активной, изменяется цвет бэкграунда на тёмно-серый (в первом и втором столбце таблицы).
4. На кнопке, которая была активной, изменяется изображение с именованием кнопки (во втором столбце таблицы).
5. Предыдущий контент исчезает и заместо него появляется новый.

Итого: нужно изменить 8 элементов (во 1, 2 и 5 пунктах по два элемента).

Cкрипт меню только на JavaScript

Разберём скрипт попунктно.

1. Прежде всего создаём переменную, в которой будет хранится номер текущей кнопки (переменная check_lmen). [строка 1]
2. Определяем функцию menuchange, которая и будет вызываться при наведении на кнопки. Ей будет передано три аргумента, которые определяют ту кнопку, на которое будет сделано наведение мышкой: а) полное имя активного изображения с именем кнопки; б) префикс идентификаторов контейнеров (id-шки div-ов) – вы ведь помните, что для каждой кнопки они начинаются одинаково; в) номер кнопки. [строка 2]
3. Первым делом функция проверяет номер текущей кнопки и номер кнопки, на которую была наведена мышь. Если они совпадают, то ничего происходить не будет.[строка 3]
4. Создаём переменные с номерами цветов бэкграундов для активной и неактивной кнопок.[строки 4-5]
5. Для текущей кнопки определяем префикс id-шек div-ов и полное имя неактивного изображения кнопки. Если пунктов в меню будет больше трёх, то нужно будет их сюда дописать.[строки 8-19]
6. Создаём переменные, которые содержат имена всех элементов, которые надо изменить (как было сказано ранее – восемь штук). [строки 21-28]
7. Производим изменения, используя функцию getElementById. Сначала изменяем цвет кнопок [строки 30-33], затем изображения с именами кнопок [строки 34-37], а затем сменяя блок с контентом [строки 38-39]
8. Изменяем номер текущей кнопки (ведь теперь у нас новая активная кнопка).[строка 41]

Осталось последнее, в коде HTML поставить на нужные элементы обработчик событий onMouseOver и поставить ссылку на скрипт, который мы написали выше (положим его в папку js под именем js_left_menu.js).

Для начала зайдём в первую часть статьи и посмотрим html-код. Нам нужно проставить событие onMouseOver на левую и правую части кнопок. Для этого изменяем 5, 6, 7 строчки (для левой части кнопок) и 12,16 и 20 (для правой части кнопок).

И прописываем в хидере html-документа строку.

Cкрипт меню с помощью jQuery.

Итак, как было сказано ранее, jQuery поможет нам сделать плавное затухание. Но помимо затухания, с помощью этой библиотеки можно сделать и другие изменения. Собственно раз уж мы используем её, то почему бы и нет, плюс практика лишняя:).

Итак, смотрим код скрипта выше. Мы будем менять 21-41 строчки, изменив немного сначала значения переменных, а потом изменив участок кода, отвечающего за изменения.

1. Строки 2-9 почти не отличаются, кроме того, что к каждой переменной добавляется знак идентификатора – #.
2. В строке 11 вызывается функция jQuery. Для информации - строчку можно переписать более коротко: $(function() { . Также можно $ заменить на jQuery – собственно $ является псевдонимом функции jQuery.
3. Строки 12-20 в целом похожи друг на друга. Сначала идёт вызов жкьюри и указывается имя селектора – имя-идентификатор контейнеров кнопок и контента. Затем используется команда css, принимающая два аргумента – имя CSS-свойства и его значение. Собственно в строках 12-18 изменяется CSS-свойство background, которому присваивается либо новый цвет, либо изображение. В общем всё по правилам цсс. В строке 20 отключается из видимости старый блок с контентом.
4. А вот 21 строка отвечает собственно за плавное появление нового блока контента. Время появления указано в 200 миллисекунд. Больше не рекомендую, ниже упомяну об этом.

В самом конце скрипта (после нашей функции menuchange) также необходимо добавить следующую строчку.

Она инициализирует работу jQuery. Без этой строчки скрипт работать не будет.

И да, не забудьте прописать в HTMLе путь к библиотеки jQuery.

Заключение

Итак, подведём итоги. Мы рассмотрели пример из повседневной практики, который реализует меню с блоком контента. Был рассмотрен макет, проблема его реализации, а также предложено решение его устранения. Затем была реализована вёрстка, и сделан первый скрипт только на JavaScript, после чего скрипт был изменён при помощи библиотеки jQuery. Пример с jQuery интересен и хорош, но обладает одним изъяном. Если дёргать по меню курсором мышки как параноику (в нашем случае переключения между кнопками должно быть быстрее 200 миллисекунд), то иногда можно сделать, чтобы одновременно были отображены несколько блоков контента. Дело в том, что если переключить кнопку до того как появился новый контент на наведённую до этого кнопку, то текущий контент не будет отключён, поскольку он ещё завершил операцию со своим “появлением” (ты сам хоть понял, что сказал? – прим.ред.). Адекватное решение проблемы я не нашёл, поэтому над этим вопросом можно будет подумать.

Искренне надеюсь что все остались довольны=). Что я ещё могу добавить… Stay tuned, people 8).

Ссылки по теме

Часть 1: Вёрстка
Часть 2: Программирование
 

AJAX, html, JavaScript, jQuery, как флэш, красивости, меню

(ещё не оценили)