ВЕБ-ШКОЛА: Иерархическое (многоуровневое) меню навигации на JavaScript (часть 1)

РЕКЛАМА

Разное

Иерархическое (многоуровневое)
меню навигации на JavaScript

Содержание.

Предисловие. Что? Как? Зачем?
Первая глава посвящена созданию и вставке меню в Веб-страницу и предназначена для конечных пользователей.
Вторая глава (сейчас идет ее подготовка) подробно опишет механизм создания меню на JavaScript[?] и предполагает достаточную подготовленность читателей.

Предисловие.

Что предлагается? (идея - сайта www.microsoft.com). Предлагается многоуровневое меню типа меню Windows-приложений, работающее от мышки, написанное на JavaScript под MS Internet Explorer (4.0 и выше). Включение меню в страницу представляет собой 7-8 строк. Описание меню и подпрограммы для его обработки представляют собой код на JavaScript и выделены в отдельные файлы; это приводит к увеличению скорости загрузки при переходе от одной страницы сайта к другой за счет кэширования[?] неизменяемой информации. Поправки в систему меню касаются одного файла, не затрагивая другие файлы сайта. Работу меню в действии можно увидеть здесь.

Как это работает? Меню в неактивном состоянии представляет собой полосу определенного в файле стилей[?] цвета в верхней части документа, разделенную на области именами подменю нулевого уровня. При перемещении курсора мышки над полосой меню активируется соответствующий пункт меню, отображая соответствующее подменю. При переходе мышки на появившееся подменю активизируются соответствующие позиции курсора пункты подменю. При клике (щелчке) левой кнопкой мышки на выбранном пункте осуществляется переход по ссылке или вызывается подпрограмма на JavaScript в зависимости от описания пункта. Если подменю имеет подменю высшего уровня, при перемещении мышки на этот пункт подменю оно автоматически отображается. Таким образом можно построить довольно разветвленное иерархическое меню. Его сложность ничем не ограничена, кроме мощности Вашего компьютера; для больших и разветвленных меню возможны ощутимые задержки при отображении подменю. Фрагмент работы меню приведен на рис.1.

Рис.1

Что нужно знать? Для использования меню на своих страницах необходимо знать HTML[?] и иметь незначительный опыт программирования (как мне кажется) для составления содержания меню.

Если Вы хотите разобраться в "кухне" необходимо:

знать HTML 4.0
знать JavaScript (JScript[?] версии MS Internet Explorer);
знать формат каскадных таблиц стилей[?] (Cascading Style Sheets, CSS) и, собственно, сами стили

ВАКАНСИИ (Компьютеры, Интернет). Подробнее >>

Что мне не нравится в домашней странице Microsoft?

Если Вы посмотрите код (или текст, кому как угодно) страницы, Вы можете напугаться от обилия "писанины", которая генерируется автоматически ASP[?]-скриптами[?] MS Internet Information Server'а. Для пользователя не доступен первоначальный код ASP-скриптов, он видит лишь их работу. Результат их работы, между прочим, показывает, что навигационные ссылки описываются непосредственно в теле страницы. Это приводит к увеличению и дублированию передаваемой информации.
Если Вы все-таки хотите использовать многоуровневое меню навигации (иногда это очень удобно), то идея Microsoft не годится, у них оно одноуровневое.

Если второе "но" не так критично, т.к. всегда можно переупорядочить представляемую на сайте информацию. То включение описания меню в каждый HTML-файл (предполагается, что меню должно присутствовать на всех страницах сайта, а многие серверы[?] не поддерживают ASP) не только не практично с точки зрения объема передаваемой информации, но и трудно для поддержания. Никому бы не хотелось править десятка два файлов ради смены одного пункта меню.

Глава 1. Создание меню и вставка его в страницу

Для вставки меню в верхнюю часть страницы добавьте следующие строки между тегами[?] <head>и </head>:

<head>
<link rel="stylesheet" TYPE="text/css" HREF="path_to_css/menu.css">
</head>

и строки после тега <body>

<body>
<script language="JavaScript" src="path_to_scripts/kcmmenu.js"></script>
<script language="JavaScript" src="path_to_scripts/menucont.js"></script>
<script language="JavaScript" src="path_to_scripts/handles.js"></script>

<script language="JavaScript">ConstructMenu(menu);</script>

<script for=submenu event=onmouseover>doEventMenu();</script>
<script for=submenu event=onmouseout>doEventMenu();</script>
<script for=menupunkt event=onmouseover>doEventSubMenu();</script>
<script for=menupunkt event=onmouseout>doEventSubMenu();</script>
<script for=menupunkt event=onclick>doEventSubMenu();</script>
...

Поместите файлы kcmmenu.js, menucont.js и handles.js в каталоге скриптов, а файл menu.css в каталоге стилей (при необходимости файлы можно переименовать, заменив имена в соответствующих строках HTML-документа). Замените слово path_to_script на реальный путь к скриптам на Ваше сайте, а path_to_css на реальный путь к файлу menu.css. Например, если JavaScript'ы находятся в каталоге js корневого каталога Вашего сайта, то path_to_script=/js, а файл стилей css в каталоге css, то path_to_css=/css. [> далее >]

Каждому сайту - механизм организации собственной ленты новостей бесплатно! Подробнее >>

ПОИСК по сайту: