Практически все, что изложено в разделах "Графика и таблицы" и "Графика и обработка событий" касается вопросов построения одноуровневых меню. Поэтому мы постараемся в данном разделе привести более или менее реальные примеры таких меню. Графическое меню привлекательно тем, что автор может всегда достаточно точно расположить его компоненты на экране. Это, в свою очередь, позволяет и другие элементы страницы достаточно точно располагать относительно элементов меню:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
В данном случае стрелочка бежит точно над тем элементом, на который указывает мышь. По большому счету, гораздо более информативным является применение атрибута alt у IMG и его дублирование в строке статуса, чем добавление нового графического элемента. Правда, отображается содержание alt с некоторой задержкой:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Английский текст в поле статуса приведен по причине существования нелокализованных браузеров или операционных систем у пользователя. В этом случае у него есть возможность так или иначе узнать назначение иконки меню, если он, конечно, обратит внимание на изменение содержания поля статуса (Вы сами обратили на это внимание без подсказки? :-). Значит нужно сделать так, чтобы оно шевелилось.)
Посмотрим теперь на реализацию вертикального меню, построенного на основе графических блоков текста, как это принято в настоящее время:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
При движении мыши у соответствующего компонента меню "отгибается уголок". В данном случае "уголок" - это самостоятельная картинка. Все уголки реализованы в правой колонке таблицы. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам(тексту и "уголку") применяются одинаковые контейнеры A, охватывающие графические образы. В этом решении есть один недостаток: при переходе от текста к "уголку" последний "подмигивает". Картинки можно разместить и в одной ячейке таблицы, но тогда нужно задать ее ширину, иначе при изменении размеров окна браузера картинки могут "съехать". Для победы над подмигиванием необходимо сделать полноценные картинки замены:
![]() |
![]() |
![]() |
![]() |
Подмигивание происходит при переходе с одного элемента разметки контейнера на другойу. При этом заново определяются свойства отображения элемента.