Реализация меню

Итак, с меню связаны два сценария. Первый находится в файле create_menu.js и записывает в HTML‑документ строки, создающие таблицы – раскрывающиеся меню и таблицу строки меню. Рассмотрим содержимое этого файла (пример 2).

Пример 2. Содержимое файла create_menu.Js

/*

Сценарий в этом файле вставляет в документ определение пунктов меню,

а также определение строки главного меню (выполняется при загрузке)

*/

//Определение меню "Информация"

document.write("<TABLE id = \"general\" class = \"hidden\">");

document.write("<TR id = \"general_history\" class = \"item\"");

document.write("onMouseOver = \"general_history.className = 'selected'\"");

document.write("onMouseOut = \"general_history.className = 'item'\">");

document.write("<TD><A href = \"history.html\">История</A></TD>");

document.write("</TR>");

document.write("<TR id = \"general_values\" class = \"item\"");

document.write("onMouseOver = \"general_values.className = 'selected'\"");

document.write("onMouseOut = \"general_values.className = 'item'\">");

document.write("<TD><A href = \"values.html\">Пищевая ценность яблок</A></TD>");

document.write("</TR>");

document.write("<TR id = \"general_collectsave\" class = \"item\"");

document.write("onMouseOver = \"general_collectsave.className = 'selected'\"");

document.write("onMouseOut = \"general_collectsave.className = 'item'\">");

document.write("<TD><A href = \"collectsave.html\">Сбор и хранение яблок</A></TD>");

document.write("</TR>");

document.write("</TABLE>");

//Определение меню «Сорта яблок»

document.write("<TABLE id = \"types\" class = \"hidden\">");

document.write("<TR id = \"types_summer\" class = \"item\"");

document.write("onMouseOver = \"types_summer.className = 'selected'\"");

document.write("onMouseOut = \"types_summer.className = 'item'\">");

document.write("<TD><A href = \"summer.html\">Летние</A></TD>");

document.write("</TR>");

document.write("<TR id = \"types_autumn\" class = \"item\"");

document.write("onMouseOver = \"types_autumn.className = 'selected'\"");

document.write("onMouseOut = \"types_autumn.className = 'item'\">");

document.write("<TD><A href = \"autumn.html\">Осенние</A></TD>");

document.write("</TR>");

document.write("<TR id = \"types_winter\" class = \"item\"");

document.write("onMouseOver = \"types_winter.className = 'selected'\"");

document.write("onMouseOut = \"types_winter.className = 'item'\">");

document.write("<TD><A href = \"winter.html\">Зимние</A></TD>");

document.write("</TR>");

document.write("<TR id = \"types_deepwinter\" class = \"item\"");

document.write("onMouseOver = \"types_deepwinter.className = 'selected'\"");

document.write("onMouseOut = \"types_deepwinter.className = 'item'\">");

document.write("<TD><A href = \"deepwinter.html\">Позднезимние</A></TD>");

document.write("</TR>");

document.write("</TABLE>");

//Определение меню «Рецепты»

document.write("<TABLE id = \"recepts\" class = \"hidden\">");

document.write("<TR id = \"recepts_salat\" class = \"item\"");

document.write("onMouseOver = \"recepts_salat.className = 'selected'\"");

document.write("onMouseOut = \"recepts_salat.className = 'item'\">");

document.write("<TD><A href = \"salat.html\">Салаты с яблоками</A></TD>");

document.write("</TR>");

document.write("<TR id = \"recepts_soup\" class = \"item\"");

document.write("onMouseOver = \"recepts_soup.className = 'selected'\"");

document.write("onMouseOut = \"recepts_soup.className = 'item'\">");

document.write("<TD><A href = \"soup.html\">Супы с яблоками</A></TD>");

document.write("</TR>");

document.write("<TR id = \"recepts_meat\" class = \"item\"");

document.write("onMouseOver = \"recepts_meat.className = 'selected'\"");

document.write("onMouseOut = \"recepts_meat.className = 'item'\">");

document.write("<TD><A href = \"meat.html\">Мясные блюда с яблоками</A></TD>");

document.write("</TR>");

document.write("<TR id = \"recepts_fish\" class = \"item\"");

document.write("onMouseOver = \"recepts_fish.className = 'selected'\"");

document.write("onMouseOut = \"recepts_fish.className = 'item'\">");

document.write("<TD><A href = \"fish.html\">Рыбные блюда с яблоками</A></TD>");

document.write("</TR>");

document.write("</TABLE>");

//Определение строки меню

document.write("<TABLE id = \"main_menu1\" class = \"menu_line\">");

document.write("<COL width = \"70\">");

document.write("<COL width = \"100\">");

document.write("<COL width = \"100\">");

document.write("<COL width = \"80\">");

document.write("<COL width = \"*\">");

document.write("<COL width = \"100\">");

document.write("<TR>");

document.write("<TD class = \"main_item\" id = \"main_index\"");

document.write("onMouseOver = \"main_index.className = 'main_selected'\"");

document.write("onMouseOut = \"main_index.className = 'main_item'\">");

document.write("<A href = \"index.html\" class = \"main_href\">Главная</A>");

document.write("</TD>");

document.write("<TD class = \"main_item\" id = \"main_general\"");

document.write("onClick = \"show_menu(general, main_menu1, main_general)\"");

document.write("onMouseOver = \"main_general.className = 'main_selected'\"");

document.write("onMouseOut = \"main_general.className = 'main_item'\">");

document.write("<A href = \"general\" class = \"main_href\" ");

document.write("onClick = \"event.returnValue = false\">");

document.write("Информация</A>");

document.write("</TD>");

document.write("<TD class = \"main_item\" id = \"main_types\"");

document.write("onClick = \"show_menu(types, main_menu1, main_types)\"");

document.write("onMouseOver = \"main_types.className = 'main_selected'\"");

document.write("onMouseOut = \"main_types.className = 'main_item'\">");

document.write("<A href = \"types\" class = \"main_href\" onClick = \"");

document.write("event.returnValue = false\">");

document.write("Сорта яблок</A>");

document.write("</TD>");

document.write("<TD class = \"main_item\" id = \"main_recepts\"");

document.write("onClick = \"show_menu(recepts, main_menu1, main_recepts)\"");

document.write("onMouseOver = \"main_recepts.className = 'main_selected'\"");

document.write("onMouseOut = \"main_recepts.className = 'main_item'\">");

document.write("<A href = \"recepts\" class = \"main_href\" onClick = \"");

document.write("event.returnValue = false\">");

document.write("Рецепты</A>");

document.write("</TD>");

document.write("<TD></TD>");

document.write("<TD class = \"main_item\" id = \"main_about\"");

document.write("onMouseOver = \"main_about.className = 'main_selected'\"");

document.write("onMouseOut = \"main_about.className = 'main_item'\">");

document.write("<A href = \"about.html\" class = \"main_href\"> О проекте</A>");

document.write("</TD>");

document.write("</TR>");

document.write("</TABLE>");

Приведенный пример является самым объемным в этой книге, однако его суть довольно проста. Вначале в документ записывается HTML‑код создания трех таблиц, соответствующих раскрывающимся меню (идентификаторы таблиц: general, types, recepts). Четвертая таблица, добавляемая в документ сценарием, является строкой меню. Начнем рассмотрение именно с нее.

Для начала перепишем HTML‑код, описывающий строку меню, в более наглядной форме (то есть рассмотрим создаваемую сценарием таблицу) (пример 3).