FRNET.NAROD.RU » Статьи » Создание меню при помощи JavaScript

Автор: Алексей Голубев

Сайт: http://www.frnet.narod.ru/

Как создать меню на web-странице? Данный вопрос, как мне кажется, интересует достаточно большую часть начинающих web-дизайнеров. Во-первых, использование такой формы навигации достаточно удобно посетителям вашего сайта. С помощью меню можно сгруппировать огромное количество материала по темам, например:

На рисунке показана структура меню | статья с рисунком на странице http://www.frnet.narod.ru/article/0013.htm

На рисунке показана структура меню | статья с рисунком на странице http://www.frnet.narod.ru/article/0013.htm

Согласитесь, это гораздо удобнее, чем создание отдельных тематических страничек (их можно использовать как альтернативу), которые будут ссылаться на подразделы сайта. Во-вторых, это выглядит достаточно красиво и оригинально. В-третьих, не каждый это умеет делать, но каждый хочет научиться. Приступим к созданию такой навигации.

1. Группировка элементов.

Прежде чем создавать меню, вы обязательно должны мысленно или на листке бумаги изобразить его. Определить какие элементы, в какой раздел поместить. Вы должны разгруппировать их так, чтобы не было повторений элементов в разных разделах. Главное на добавить лишнего. Посмотрите на рисунок, который представлен выше (рис.1). Все элементы стоят в своих тематических разделах.

2. Использование визуальных средств создания.

Некоторые редакторы web-страниц (существуют еще и специализированные см. далее) предлагают создать меню при помощи уже готовых скриптов. Они зачастую бывают не очень просты в разборе и использовании, используют большое количество ненужных функций, адаптирую меню для какого-либо конкретного браузера. Кроме этого, редакторы типа «Pop-up Creator», вставляют в меню свой логотип или надпись подобно этой: «Created with …»

3. Мое решение проблемы.

Итак, решая данную проблему, я разработал собственный скрипт для создания меню. Он состоит из четырех функций. Разберем их по порядку:

А) Отображение элементов меню.

function show_menu(elem, leftp) {
document.all.webdm.style.display="none";
document.all.webpm.style.display="none";
document.all.startm.style.display="none";
document.all[elem].style.left=leftp;
document.all[elem].style.display="block";
window.event.cancelBubble=true; }

Первые три строчки прячут от ваших глаз слои (они заданы тегом

), которые содержат в себе элементы меню, чтобы не было наложений. Атрибуты id этих слоев соответственно равны: webdm, webpm, startm. Четвертая строка устанавливает абсолютное значение левого края слоя. Пятая строка отображает меню на экране. И наконец, последняя шестая – запрещает всплывание события. Данную функцию надо добавить в событие OnMouseOver главных элементов. Не забудьте указать атрибуты функции (которые в скобочках).

Б) Прячем все…

function hide_all_menu() {
document.all.webdm.style.display="none";
document.all.webpm.style.display="none";
document.all.startm.style.display="none"; }

Эта функция написана для того случая, когда курсор мыши не находится над главными элементами меню. Как видите, она делает то же самое, что и три первых строчки в предыдущей функции.

В) Выделение пунктов меню.

Как только мышь появляется в зоне одного из пунктов меню, он (пункт) должен получить какую-нибудь отличительную черту:

function menu_item_over(elem, stext) {
document.all[elem].style.backgroundColor="#00b0ee";
document.all[elem].style.textDecoration="underline";
window.status=stext; }

В данном случае мы выделяем его особым фоном и подчеркиванием. Кроме выделения в строке состояния будет выводиться текст, содержащийся в переменной stext. Снять это выделение можно следующей функцией:

function menu_item_over(elem, stext) {
document.all[elem].style.backgroundColor="#00b0ee";
document.all[elem].style.textDecoration="underline";
window.status=stext; }

Она возвращает в исходное состояние стилевые свойства, измененные при наведении мыши на пункт. Вообще, вы можете выделять пункты как хотите, например, рамкой, изменением цвета текста, добавить какой-нибудь фильтр (стилевое свойство: filter) и так далее.

Г) Настройка скрипта.

Во-первых, функции показа меню надо добавить в событие наведение мыши (onMouseOver) заголовков меню.

Во-вторых, дать название каждому пункту и группе пунктов, которые в последующем придется использовать как параметры вызываемых функций (параметр elem).

В-третьих, добавить функцию сокрытия меню к событию onMouseOver тега body.

Вроде бы все, но если чего-то не дописал, пишите вопросы на e-mail.

P.S. использования данного скрипта можно посмотреть по адресу: http://www.frnet.narod.ru/new/.