Реализация меню / HTML: Популярный самоучитель / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

Обложка
Аннотация

Александр Чиртик i

Книги автора: Excel. Трюки и эффекты HTML: Популярный самоучитель

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

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

Разделы на этой странице:

Пример 14.2. Содержимое файла create_menu.js
Пример 14.3. Таблица строки меню
Пример 14.4. Сценарий, показывающий и скрывающий всплывающее меню
Пример 14.5. Таблица, соответствующая меню Информация

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

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

Пример 14.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 = "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?код, описывающий строку меню, в более наглядной форме (то есть рассмотрим создаваемую сценарием таблицу) (пример 14.3).

Пример 14.3. Таблица строки меню

<TR>

<TD class = "main_item" id = "main_index"

onMouseOver = "main_index.className = 'main_selected'"

onMouseOut = "main_index.className = 'main_item'">

<A href = "index.html" class = "main_href">Главная</A>

</TD>

<TD class = "main_item" id = "main_general"

onClick = "show_menu(general, main_menu1, main_general)"

onMouseOver = "main_general.className = 'main_selected'"

onMouseOut = "main_general.className = 'main_item'">

<A href = "general" class = "main_href"

onClick = "event.returnValue = false">

Информация

</A>

</TD>

<TD class = "main_item" id = "main_types"

onClick = "show_menu(types, main_menu1, main_types)"

onMouseOver = "main_types.className = 'main_selected'"

onMouseOut = "main_types.className = 'main_item'">

<A href = "types" class = "main_href" onClick = "

event.returnValue = false">

Сорта яблок

</A>

</TD>

<TD class = "main_item" id = "main_recepts"

onClick = "show_menu(recepts, main_menu1, main_recepts)"

onMouseOver = "main_recepts.className = 'main_selected'"

onMouseOut = "main_recepts.className = 'main_item'">

<A href = "recepts" class = "main_href" onClick = "

event.returnValue = false">

Рецепты

</A>

</TD>

<TD class = "main_item" id = "main_about"

onMouseOver = "main_about.className = 'main_selected'"

onMouseOut = "main_about.className = 'main_item'">

<A href = "about.html" class = "main_href"> О проекте</A>

</TD>

</TR>

</TABLE>

Как можно увидеть, строка меню во многом аналогична той, что была создана в предыдущей главе. Исключением является использование гиперссылок вместо обработки событий onClick для пунктов Главная и О проекте. Конечно, можно было бы осуществлять переход к страницам для этих пунктов при обработке события onClick с использованием объекта location, но зачем? Ведь для простого перехода к другой странице проще использовать стандартную обработку выбора пользователем гиперссылки. Да и к тому же не нужно заботиться о форме указателя, когда он находится над текстом пункта меню.

Обратите также внимание, что для остальных гиперссылок (пункты меню Информация, Сорта, Рецепты) выполнение действия по умолчанию не используется.

Подсветка выделенных пунктов меню осуществляется за счет назначения ячейкам таблицы соответствующего стилевого класса при обработке событий onMouseOver (ячейка выделяется, включается подсветка) и onMouseOut (подсветка убирается).

При выборе одного из пунктов Информация, Сорта, Рецепты обработчиком события onClick вызывается функция show_menu(), показывающая меню возле выбранного пункта. Эта функция вместе с функцией hide_menu() находится в файле popup_menu.js. Они приводятся в примере 14.4.

Пример 14.4. Сценарий, показывающий и скрывающий всплывающее меню

var lastMenu = null; //Прошлое показанное меню

//Функция показывает меню function show_menu(menu, main_menu, item){

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

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

return;

}

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

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

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

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

lastMenu = menu;

//Сделаем так, чтобы до BODY событие onClick не дошло event.cancelBubble = true;

}

//Функция скрывает меню, открытое ранее

function hide_menu(){

if (lastMenu != null){

lastMenu.className = "hidden";

lastMenu = null;

}

Скрытие всплывающего меню, кроме случая, когда пользователь выбрал один из его пунктов, происходит также при повторном щелчке кнопкой мыши на пункте меню, а также при щелчке кнопкой мыши в любом месте документа за пределами меню. Для реализации последнего элемент BODY каждой страницы настроен следующим образом:

Теперь рассмотрим, как реализованы раскрывающиеся меню. Они реализуются даже проще, чем сама строка меню. Как и в примерах предыдущей главы, раскрывающиеся меню основаны на использовании свободно позиционируемых таблиц (хотя это можно сделать на основе любого свободно позиционируемого элемента, например DIV, причем внешний вид такого меню будет ничуть не хуже). Каждая строка таблицы представляет собой отдельный пункт меню. Ниже приводится HTML?код, добавляемый сценарием для создания раскрывающегося меню Информация (это меню самое маленькое и поэтому его реализацию удобнее изучать) (пример 14.5).

Пример 14.5. Таблица, соответствующая меню Информация

<TR id = "general_history" class = "item"

onMouseOver = "general_history.className = 'selected'"

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

<TD><A href = "history.html">История</A></TD>

</TR>

<TR id = "general_values" class = "item"

onMouseOver = "general_values.className = 'selected'"

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

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

</TR>

<TR id = "general_collectsave" class = "item"

onMouseOver = "general_collectsave.className = 'selected'"

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

<TD><A href = "collectsave.html">Сбор и хранение яблок</A></TD>

</TR>

</TABLE>

При просмотре текста примера 14.5 можно увидеть, что текст пунктов меню, как и текст пунктов строки меню, заключен в теги <A> и </A>. Это сделано для упрощения, ведь, кроме навигации (основная функция гиперссылок), других функций на меню не возлагается.

Подсветка выделенных пунктов меню осуществляется за счет изменения их стилевого класса при обработке событий onMouseOver и onMouseOut.

Следует отметить один недостаток использованной реализации меню: хотя и подсвечивается вся ячейка таблицы, «срабатывает» пункт меню только при щелчке кнопкой мыши на тексте гиперссылки. Это потому, что внутрь тегов <A> и </A> заключен только текст, а не вся ячейка таблицы. Это сделано лишь для того, чтобы не усложнять еще больше сценарий, создающий меню. Вы можете устранить этот недостаток самостоятельно, изменив фрагменты типа

<TD><A href = «history.html»>История</A></TD>

на

<A href = «history.html»><TD><A href = «history.html»>История</A></TD></A>

Если же просто поместить внутрь элемента A ячейку (не помещая еще и текст), то меню тоже будет работать, но форма указателя над текстом будет уже не та (текстовый I?указатель).

Оглавление книги

Оглавление статьи/книги

Похожие страницы