Не будем отступать от правил, заявленных при рассмотрении меню древовидной
структуры. А именно - файл, содержащий информационную часть меню должен быть
простым и наглядным, и второе - попытаемся использовать хотя-бы часть уже
написанного ранее кода сценариев (переносимость кода).
Возможно, кто-то не согласится со мной, но мне кажется, что вариант формата
занесения данных в меню, предложенный в предыдущем примере (с древовидным меню),
наиболее удачный. Данные меню записываются отдельными строками с использованием
символов табуляции для обозначения подчиненности уровней меню. Кроме текста,
отображаемого в меню, через разделители "вертикальная линия" последовательно
записываются адрес гиперссылки и текст подсказки, всплывающей при наведении
курсора. Не будем "избретать велосипед", и воспользуемся описанной структурой.
Тем более, что у нас уже практически есть готовый код для ее считывания.
Структура интерфейса
Проанализировав возможности различных броузеров, мы придем к выводу, что
единственно приемлемым вариантом позиционирования такого меню является прямое
указание его координат на странице. То-есть для такого меню надо явно задавать
начальные координаты для правильного расположения на странице. Это связано с
тем, что для всех подчиненных (невидимых в исходном состоянии) блоков меню,
появляющихся при наведении курсора на родительский элемент, необходимо
явно задавать позицию координатами X и Y (top и
left), так как они "всплывают" над основным текстом страницы и в любом
случае являются элементами с абсолютным позиционированием. А для расчета этих
самых X и Y необходимо задать начальную точку. Потому что если,
к примеру, Opera возвращает числовые координаты элемента, у которого они
не заданы явно, то, к сожалению, MS Internet Explorer дает только то
значение, которое указано явно. Если значение не задано в атрибуте стиля -
получаем константу "неопределено", если указать "auto" - то и получим
строковую константу "auto" вместо числового значения. Если кто-нибудь
знает, как обойти эту проблему, обязательно напишите.
Конечно, можно создать слой-контейнер с абсолютным позиционированием, и в
нем разместить все элементы меню с атрибутом "relative".
Это даст возможность не указывать положение первого элемента, так как оно
известно - top=0, left=0. Но броузер
определит высоту этого контейнера как сумму всех высот элементов меню, и
если их достаточно много, то может оказаться, что высота отображаемой страницы
(из-за высоты контейнера меню) будет больше,чем надо для отображения какой-нибудь
короткой странички. А это будет выглядеть несколько неряшливо.
Так как я лично противник прямого позиционирования элементов на странице, и
всегда считал, что для максимальной совместимости содержимое страницы должно
строится автоматически, то нахожу такую необходимость (указывать координаты
элемента) как основной (и надеюсь единственный) недостаток данного меню.
Поведение элементов
Как должны вести себя элементы меню? Предполагается, что меню должно состоять
из ряда прямоугольных элементов, меняющих фон текста при прохождении над ним
курсора, и включащих отображение подчиненных уровней, если они есть. При уходе
курсора за пределы элемента фон должен восстанавливаться, и отображение подчиненных
элементов выключатся. Вы можете спросить: "Зачем я перечисляю прописные истины?".
Дело в том что существует один нъюанс в поведении подчиненных уровней.
Дело в том, что для удобства пользователя нельзя выключать подчиненные элементы
немедленно после ухода курсора мыши. Человек интуитивно направляет
движение курсора кратчайшим путем к элементу, который он выбрал. Представьте
ситуацию: в меню имеется починенный уровень из семи пунктов. Из них пусть у второго
пункта есть еще один уровень из шести элементов. Попав на этот второй пункт из
первого уровня, мы увидим открывшийся список следующего уровня. Допустим, нас
заинтересовал последний элемент в новом списке. Куда мы двинем курсор? Не
горизонтально вдоль активного элемента до перехода на подчиненный уровень, а по
кратчайшему пути - сразу к заинтересовавшему нас пункту. При этом курсор неминуемо
окажется сначала над третьим элементом, а уже только потом в зоне подчиненного уровня.
При этом, если не принять специальных мер, интересующая нас часть меню немедленно
спрячется. И мы будем вынуждены тренироваться двигать курсор строго
перендикулярно-паралельно пунктам меню, что не очень удобно.
Надеюсь, я Вас не сильно утомил своими теориями. Разбор непосредственно кода
сценария меню я опишу в следующих выпусках. А для тех, кто хочет все сразу и
без промедления, я хочу сказать, что на сайте
script.net.ru доступен для скачивания работающий код меню.
Правда это пока "черновой" вариант, так сказать бета-версия. Но он уже вполне
уверенно работает с NN и с MS-IE.
Eсли Вы ищете качественный и недорогой web-хостинг, лично я рекомендую
PeterHost.Ru.
Российский, прекрасные каналы, сервис "на уровне".