Вопрос выбора технологии, реализующей навигационное меню на веб-сайте, по-прежнему остается очень актуальным. Ведь меню должно быть не просто красивым, но и удобным для пользователя, не портящим компоновку страницы, не занимающим много места в документе и пр. Поэтому многие останавливают свой выбор на меню, реализованных посредством Dynamic HTML (правда, с точки зрения usability, такой подход не соответствует правилам «хорошего тона» в веб-дизайне: такие меню как правило не функционируют в Netscape Navigator; дурному я вас учить не буду, просто приведу пример навигации по сайту с помощью DHTML:).
Сперва надо обозначить стилевые шаблоны для будущего меню:
<style type=»text/css»>
<!—
TD { font-family: Tahoma, Verdana, Arial, sans-serif; font-weight: bold; }
.pop { visibility: hidden; }
.go { visibility: visible; }
A:Hover { color: red; text-decoration: none; }
A { color: black; text-decoration: none; }
—>
</style>
где:
TD { font-family: Tahoma… — стиль, задаваемый для табличных ячеек;
.pop { visibility: hidden; } — класс скрытых блоков;
.go { visibility: visible; } — класс видимых блоков;
Далее (все еще в разделе HEAD) вписываем код сценария, управляющего навигационным меню:
<script language=»JavaScript»>
function showObject() {
document.all.div1.className = ‘go’;
}
function hideObject() {
document.all.div1.className = ‘pop’;
}
function showObject2() {
document.all.div2.className = ‘go’;
}
function hideObject2() {
document.all.div2.className = ‘pop’;
}
</script>
Количество функций зависит от числа видимых и скрытых блоков, используемых в качестве разделов меню. Функции указываются попарно: показ и сокрытие блока, соответственно. Дальше нужно построить таблицу, которая послужит основой меню, писать туда названия разделов, задать ссылки с указанием событий JavaScript с привязкой к вышеобозначенным функциям скрипта, например:
<table border=0 cellpadding=2 cellspacing=2>
<tr><td width=150>
<div onmouseover=»showObject()» onmouseout=»hideObject()»>
<a href=»#» onmouseover=»showObject()» onmouseout=»hideObject()»>Книги</a>
</div>
<div id=»div1″ onmouseover=»showObject()» onmouseout=»hideObject()» class=»pop»>
<a href=»fantasy.html» onmouseover=»showObject()» onmouseout=»hideObject()»>Фэнтази</a><br>
<a href=»detective.html» onmouseover=»showObject()» onmouseout=»hideObject()»>Детектив</a><br>
<a href=»novels.html» onmouseover=»showObject()» onmouseout=»hideObject()»>Романы</a>
</div></td></tr></table>
Обращаю ваше внимание на то, что и к ячейке, содержащей название раздела (в данном случае — «Книги»), и к ссылке на него, тоже применены события показа/сокрытия пунктов меню. Ссылка для названия раздела указана «нулевая», но при желании может быть изменена и содержать абсолютный или относительный путь (так же, как адреса подразделов).
Информация об ошибке на SSI
Наверняка каждый из вас хоть раз имел возможность наблюдать ошибку исполнения той или иной SSI-директивы на каком-нибудь сайте. В стандартном виде это выглядит в виде надписи — «An error occured during this directive». Для человека знающего такая надпись будет вполне понятна, а что делать начинающему пользователю в таком случае? Надо настроить вывод информации об ошибке таким образом, чтобы факт возникновения этой ошибки был понятен любому посетителю. Для этого параллельно с прочими SSI-директивами используйте следующую конструкцию:
<!—#config errmsg=»[Произошла ошибка. Пожалуйста, попробуйте перезагрузить документ. Если ошибка повторится, сообщите об этом координатору сайта.]»—>
Переход по дню недели
Если содержание вашего сайта зависит от дня недели, следующий JavaScript-сценарий поможет автоматически перенаправить посетителя на нужную страницу (использоваться такое средство может практически везде: в электронных магазинах, на новостных серверах, при проведения опросов и пр.). Просто вставьте этот код в раздел HEAD главной страницы своего сайта (или его определенного раздела):
<script language=»JavaScript»>
function initArray()
{
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i];
}
var DOWArray = new
initArray(«Monday»,»Tuesday»,»Wednesday»,»Thursday»,»Friday»,
«Saturday»,»Sunday»); var today = new Date();
var day = DOWArray[today.getDay()];
if (day == «Monday») window.location = «monday.html»
if (day == «Tuesday») window.location = «tuesday.html»
if (day == «Wednesday») window.location = «wednesday.html»
if (day == «Thursday») window.location = «thursday.html»
if (day == «Friday») window.location = «friday.html»
if (day == «Saturday») window.location = «saturday.html»
if (day == «Sunday») window.location = «sunday.html»
</script>
