Книга: Веб-дизайн

ДИНАМИЧЕСКАЯ НАВИГАЦИЯ

ДИНАМИЧЕСКАЯ НАВИГАЦИЯ

Восприятие навигационной панели можно сделать более комфортным, применив простейший анимационный эффект, изменяющий изображение каждой кнопки, когда над ней проходит курсор мыши. Встроенный в страницу JavaScript–сценарий (стр. 65) может заменять при приближении мыши одно изображение кнопки на другое, — переключая, скажем, ее цвет и яркость, добавляя тень или подсветку, заставляя ее выступать или, наоборот, утапливаться в плоскость страницы (по–английски этот эффект называется rollover, т. е. перекатывание»). Возможность самому поуправлять превращениями графики на странице, хоть и не дает никакой практической выгоды, как правило, повышает субъективную оценку дизайна пользователем: когда страница, затаив дыхание, следит за малейшими движениями вашей мыши, соблазн щелкнуть–таки в конце концов по ссылке значительно возрастает. Даже если нигде больше на странице анимация не применяется, для особой по своей интерактивной роли области — панели навигации — вполне уместно применить и несколько особые методы оформления.

Рис. 51 Выпадающие меню на первой странице сайтаwww.ibm.com реализованы с помощью динамического HTML

Кроме классической навигационной панели с графическими кнопками, иногда применяется простейшая разновидность HTML-бланка (стр. 30), состоящая из выпадающего списка с перечислением ссылок и расположенной рядом кнопкой «Go» (или «Перейти»). Такой прием хорош своей компактностью: в сложенном виде список занимает гораздо меньше места, чем панель с кнопками. Однако для основных, критических по важности или же неоднородных по охвату ссылок сайта пользоваться им не стоит. Разумнее всего вынеси в такого рода меню достаточно длинный и притом часта меняющийся список одноуровневых и близких по тематике разделов (например, список «зеркал» или версий сайта на разных языках). Пара выпадающих списков в комбинации с JavaScript–сценарием позволяет компактно представить двухуровневую иерархию, сделав так, чтобы набор пунктов во втором меню зависел от того, какой пункт выбрав в первом (пример см. наwww.webreference.com).

Динамический HTML делает возможным еще более эффективное представление двухуровневых иерархий — раскрываемые оглавления (expandable outlines). Сразу после загрузки страницы такое оглавление представляет собой список разделов верхнего уровня, каждый пункт в котором в ответ на щелчок мыши раскрывается, выводя список относящим к нему подразделов и сдвигая вниз расположенные них разделы. Раскрытие другого раздела, как правило, возвращает в исходное состояние предыдущий; иногда предусматривают также ссылку, позволяющую раскрыть одновременно все разделы. Этот прием, обеспечивающий компактное и обозримое представление большого количества информации на ограниченной площади страницы, незаменим для контент–сайтов. (В броузерах, не поддерживающих динамический HTML, все списки подразделов будут видны сразу же в раскрытом виде.)

Еще более сложный программистский трюк позволяет реализовать на веб–странице навигационную панель с настоящими выпадающими меню (рис. 51). Кроме, опять–таки преимущества упаковки большого количества информации на небольшой площади, этот апофеоз динамического HTML обладает также всеми прелестями эффекта перекатывания — как правило, меню выскакивают сами при поднесении курсора мыши к чувствительной области, а подсветка в раскрытом меню послушно перемещается вверх–вниз вслед за курсором. Пока что эта технология требует неимоверных усилий для обеспечения совместимости с обоими «динамическими» броузерами (NC 4 и MSIE 4), но по мере устаканивания стандартов выпадающие меню на веб–страницах обещают стать столь же повсеместными, как сейчас — обычное перекатывание.

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