HTML: Популярный самоучитель

ОглавлениеДобавить в закладки К обложке

<!–Пятый пункт меню–>

<TR id = "menu1_item5" class = "item" onClick = "menu1_item5_click()"

onMouseOver = "menu1_item5.className = 'selected'"

onMouseOut = "menu1_item5.className = 'item'">

<TD><IMG src = "icons/5.jpg"><TD>Пятый пункт меню

</TABLE>

<!–Создаем второе меню (изначально оно также скрывается)–>

<TABLE id = "menu2" class = "hidden">

<!–Первый пункт меню–>

<TR id = "menu2_item1" class = "item" onClick = "menu2_item1_click()"

onMouseOver = "menu2_item1.className = 'selected'"

onMouseOut = "menu2_item1.className = 'item'">

<TD><IMG src = "balls/ball1.bmp"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "menu2_item2" class = "item" onClick = "menu2_item2_click()"

onMouseOver = "menu2_item2.className = 'selected'"

onMouseOut = "menu2_item2.className = 'item'">

<TD><IMG src = "balls/ball2.bmp"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "menu2_item3" class = "item" onClick = "menu2_item3_click()"

onMouseOver = "menu2_item3.className = 'selected'"

onMouseOut = "menu2_item3.className = 'item'">

<TD><IMG src = "balls/ball3.bmp"><TD>Третий пункт меню

</TABLE>

<!–Вверху страницы организуется строка меню–>

<TABLE id = "main_menu1" class = "menu_line">

<COL span = "2" width = "150">

<COL width = "*">

<TR>

<TD class = "item" id = "main_item1"

onClick = "show_menu(menu1, main_menu1, main_item1)"

onMouseOver = "main_item1.className = 'selected'"

onMouseOut = "main_item1.className = 'item'">Показать меню1

<TD class = "item" id = "main_item2"

onClick = "show_menu(menu2, main_menu1, main_item2)"

onMouseOver = "main_item2.className = 'selected'"

onMouseOut = "main_item2.className = 'item'">Показать меню2

<TD><!-Пустая ячейка, просто занимает место–>

</TABLE> <!–Далее идет остальное содержимое страницы–>

<P>Текст страницы...

</BODY>

</HTML>

Хотя документ практически не содержит текста, являющегося обычным содержимым страницы (ведь мы рассматриваем не наполнение страницы текстов, а меню), он все равно получился довольно объемным. Больше всего места в документе примера 13.5 занимают описания двух меню. Описание первого меню практически не отличается от рассмотренного ранее в примере 13.6. Второе же меню, обозначенное как menu2, создано по такому же шаблону.

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

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

Ниже приводится текст сценария из файла popup_menu.js (пример 13.16).

Пример 13.16. Содержимое файла popup_menu.js

/*

Функция показывает заданное всплывающее меню под заданным главным пунктом заданного меню

*/

var lastMenu = null; //Предыдущее показанное меню function show_menu(menu, main_menu, item){

if (menu.className == "menu"){

//Закрываем открытое меню hide_menu();

return;

}

if (lastMenu != null)

//Скрываем прошлое меню hide_menu();

//Определяем положение меню menu.className = "menu";

menu.style.top = main_menu.offsetTop + main_menu.clientHeight;

menu.style.left = main_menu.offsetLeft + item.offsetLeft;

lastMenu = menu;
-= 170 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня