DHTML-меню навигации

DHTML-меню навигации

Вопрос выбора технологии, реализующей навигационное меню на веб-сайте, по-прежнему остается очень актуальным. Ведь меню должно быть не просто красивым, но и удобным для пользователя, не портящим компоновку страницы, не занимающим много места в документе и пр. Поэтому многие останавливают свой выбор на меню, реализованных посредством 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>

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Наши контакты

⚑ г. Москва Пресненская наб.
стр.12 (Башня Федерация).


☏ +7(495) 908-63-63
✉️ mail@vebpro.ru
Яндекс.Метрика

Дизайн-студия и агенство интернет рекламы vebpro.ru © 2019 – Все права защищены