Вертикальные и горизонтальные меню
Практически все, что изложено в разделах "Графика и таблицы" и "Графика и обработка событий" касается вопросов построения одноуровневых меню. Поэтому в данном разделе мы постараемся привести более или менее реальные примеры таких меню. Графическое меню удобно тем, что автор может всегда достаточно точно расположить его компоненты на экране. Это, в свою очередь, позволяет и другие элементы страницы точнее располагать относительно элементов меню: (открыть)
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR ALIGN="center">
<TD><IMG NAME="e0" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
<TD><IMG NAME="e1" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
<TD><IMG NAME="e2" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
<TD><IMG NAME="e3" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
</TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="document.e0.src='arrowdw.gif';return true;" onMouseout="document.e0.src='empty.gif';return true;"><IMG SRC="image1.gif" BORDER="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.e1.src='arrowdw.gif';return true;" onMouseout="document.e1.src='empty.gif';return true;"><IMG SRC="image2.gif" BORDER="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.e2.src='arrowdw.gif';return true;" onMouseout="document.e2.src='empty.gif';return true;"><IMG SRC="image3.gif" BORDER="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.e3.src='arrowdw.gif';return true;" onMouseout="document.e3.src='empty.gif';return true;"><IMG SRC="image4.gif" BORDER="0"></A></TD>
</TR>
</TABLE>

В данном случае стрелочка бежит точно над тем элементом, на который указывает мышь. По большому счету, применение атрибута ALT у IMG и его дублирование в строке статуса является гораздо более информативным, чем добавление нового графического элемента. Правда, отображается содержание ALT с некоторой задержкой: (открыть)

Посмотрим теперь на реализацию вертикального меню, построенного на основе графических блоков текста, как сейчас это принято делать: (открыть)
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente1.src='corner.gif';" onMouseout="document.evente1.src='clear.gif';"><IMG SRC="image1.gif" border="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente1.src='corner.gif';" onMouseout="document.evente1.src='clear.gif';"><IMG NAME="evente1" SRC="empty.gif" border="0"></A></TD>
</TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente2.src='corner.gif';" onMouseout="document.evente2.src='clear.gif';"><IMG SRC="image2.gif" border="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente2.src='corner.gif';" onMouseout="document.evente2.src='clear.gif';"><IMG NAME="evente2" SRC="clear.gif" border="0"></A></TD>
</TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente3.src='corner.gif';" onMouseout="document.evente3.src='clear.gif';"><IMG SRC="image3.gif" border="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente3.src='corner.gif';" onMouseout="document.evente3.src='clear.gif';"><IMG NAME="evente3" SRC="clear.gif" border="0"></A></TD>
</TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente4.src='corner.gif';" onMouseout="document.evente4.src='clear.gif';"><IMG SRC="image4.gif" border="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.evente4.src='corner.gif';" onMouseout="document.evente4.src='clear.gif';"><IMG NAME="evente4" SRC="clear.gif" border="0"></A></TD>
</TR>
</TABLE>

При движении мыши у соответствующего компонента, попавшего в фокус мыши, "отгибается уголок". В данном случае "уголок" — это самостоятельная картинка. Все уголки реализованы в правой колонке таблицы. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам (тексту и "уголку"), применяются одинаковые контейнеры A, охватывающие графические образы. В этом решении есть один недостаток: при переходе от текста к "уголку" последний "подмигивает". Картинки можно разместить и в одной ячейке таблицы, но тогда нужно задать ее ширину, иначе при изменении размеров окна браузера картинки могут "съехать". Чтобы убрать "подмигивание", необходимо сделать полноценные картинки замены.
"Подмигивание" происходит при переходе с одного элемента разметки контейнера на другой. При этом заново определяются свойства отображения элемента.
Вложенные меню
При обсуждении программирования форм отмечено, что в HTML нет стандартного способа реализации вложенных меню. Тем не менее за счет графики можно создать их подобие. При этом следует понимать, что место, на которое ложится графика, нельзя заполнить текстом:
<SCRIPT>
function submenu(a)
{
if(a==1)
{
document.menu00.src="image1.gif"; // 1 (активна)
document.menu10.src="image2.gif"; // 2
document.menu01.src="image3.gif"; // 1 пункт вложенного меню 1
document.menu02.src="image4.gif"; // 2 пункт вложенного меню 1
}
if(a==2)
{
document.menu00.src="image1.gif"; // 2
document.menu10.src="image2.gif"; // 1 (активна)
document.menu01.src="image3.gif"; // 1 пункт вложенного меню 2
document.menu02.src="image4.gif"; // 2 пункт вложенного меню 2
}
}
</SCRIPT>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="submenu(1);return true;"><IMG NAME=menu00 SRC=image1.gif BORDER=0></a></td>
<TD><IMG NAME=menu01 SRC=image3.gif BORDER=0></TD>
</TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="submenu(2);return true;"><IMG NAME=menu10 SRC=image2.gif BORDER=0></td>
<TD><IMG NAME=menu02 SRC=image4.gif BORDER=0></TD>
</TR>
</TABLE>

В этом примере вложенное меню расположено справа от основного. Эффект вложенности достигается за счет изменения цвета. Подчиненность меню можно подчеркнуть изменением его положения относительно основного меню: (открыть)

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