В последнее время, меню из выпадающих списков приобретают популярность в русском Интернете, и в этом нет ничего удивительного, так как они позволяют разместить большое количество ссылок на малом участке экрана. Все эти меню построены на основе одного шаблона, лежащего, может быть, на сайте www.woscripts.com. И все они могут не работать в некоторых браузерах. Меня, конечно, такие меню не интересовали. Меня интересовали меню, которые работали бы во всех браузерах и имели бы минимум кода, в отличие от громоздких меню по шаблонам.
Самое простое выпадающее меню
Простейшим способом создания меню является использование выпадающего списка:
Которое выгляти так:
Выберите место на карте или из списка:
Такое меню я применил в дополнение к навигационной карте и двум другим способам навигации на сайте praktika.net.ua. При желании можно собрать несколько элементов Select в столбец или строку, но выглядит это не очень эффектно.
Небольшое выпадающее меню слева
Более эффектным было бы классическое меню слева от текста, но чтобы оно исчезало, когда не требуется, освобождая пространство для основного содержания.
Не скрою, идея такого меню появилась у меня, когда я увидел его на одном из сайтов. Просмотрев тогда его код, я изрядно запутался: куча функций, назначение которых оставалось непонятным. Тогда я попросил у автора сайта разъяснить, для чего используются некоторые вещи, но вразумительного ответа он не дал, объяснив что, использовал чей-то шаблон. Из принципа, я сделал аналогичное меню, с тем же дизайном, но без шаблона и с компактным кодом. Кроме того, добился, чтобы это меню работало в любом браузере, в отличие от оригинала, не работающего, в частности, в нетскейпе.
</div> <!-- Перемещаемый объект. Фон лучше менять за счет различия активных и неактивных ссылок -->
Вроде самое обычное меню. Бросается в глаза только реакция на события onmouseover и onmouseout, да и абсолютное позиционирование с Z-индексом применяется в меню не часто. Но именно это и позволяет убирать меню или показывать, поверх текста. Не менее важным является назначение идентификатора всему блоку, содержащему меню (id="obj") и крайней правой ячейке с вертикальным текстом (id=rightKol).
Теперь, нужно выделить меню цветом:
И создать функции отображения и скрытия. Начинать стоит со скрытия, так как пункты меню изначально должны быть отображены, чтобы нормально проиндексироваться поисковиками, игнорирующими скрытые слои и отобразится браузерами, не поддерживающими используемые в скриптах функции (эти аспекты не учитываются используемыми в Интернете шаблонами):
Вот и весь код. Нужен ли для этого громоздкий шаблон? Код учитывает обедненную модель объектов нетскейпа, не позволяющую обращаться к объектам напрямую. Поэтому, обращение установлено по переменным-ссылкам, получающим в первых двух строках объекты «obj» и «rightKol». В третьей строке через назначенную ему переменную, объекту «obj» определяется отступ от левого края, равный ширине основных ячеек таблицы (когда я сочинял код, вместо ширины основной ячейки использовал положение ячейки, ограничивающей таблицу справа, но это ничего не меняет). Поскольку отступ отрицательный и равен по модулю ширине основных ячеек, при запуске функции все меню смещается влево на ширину основных ячеек, так, чтобы виделась только правая ограничивающая ячейка, отображение которой необходимо, чтобы меню не исчезло совсем.
Для отображения меню, требуется навести мышь на оставшуюся видимой правую часть. Как только мышь окажется над меню (произойдет событие onmouseover), запустится функция show, еще более простая, чем hide:
function show() {
mymenu=eval("document.getElementById('obj')");
mymenu.style.left='0px';
}
Достаточно лишь определить что, отступ «obj» за левый край равен нолю.
Фактически, меню готово. Но для большего удобства, стоит сделать так, чтобы оно не уходило вверх, по мере чтения текста, а всегда оставалось на месте (не люблю я, дочитав страницу до конца, искать клавишу HOME, чтобы вновь увидеть меню). Для этого делаем функцию «Move»:
В этой функции мы переопределяем отступ меню от верхнего края документа (более подробные пояснения в Оглавления для сайтов) и, на всякий случай, переустанавливаем левый отступ. Вызывать функцию следует по событию onload, и назначив ей обработчики (если не использовать move, по событию onload следует вызвать функцию hide):
Собираем все в кучу, добавляем на страницу текст, на фоне которого должно появляться меню и получаем:
Аналогично можно создать горизонтальное меню, как у какой-нибудь программы, например, у Internet Explorer.
Для начала изобразим панель меню:
Наиболее очевидным отличием от предыдущего меню, является то, что функции скрытия и отображения теперь вызываются с парамертами. Это необходимо, так как теперь придется скрывать и отображать различные выпадающие списки, а не один, как раньше. И скрипту требуется сообщать их имя.
Затем опишем сами списки (я упрощаю их содержание, чтобы быстрее написать):
Поскольку все эти меню по умолчанию отображены, чтобы индексироваться поисковыми системами, при загрузке документа, их следует скрыть. Для этого создаем функцию initMenu:
И встраеваем ее вызов в объявление тела документа:
И функцию открытия:
Теперь создадим функцию перемещения, если хотим, чтобы меню не уезжало вверх, при перемещении по странице:
И определим ее обработчиком скролинга и изменения размеров:
Строку «myObj.style.top» следует убрать, из функции move, если меню не планируется перемещать. Остальные строки определяют положение выпадающих списков, меняющееся при изменении пользователем размеров окна.
Собираем все в кучу, добавляем оформление:
и текст, на фоне которого должно появляться меню.
Смотрим (в примере для большей наглядности пункт «Правка» сделан активным).
Подстановочные символы и регулярные выражения
Анализ WEB-конъюнктуры. Создание лучшего сайта и его раскрутка.
«Оглавления для сайтов»