Интернет технологии -> JavaScript -> "Живые меню" при помощи CSS и JavaScript

"Живые меню" или "Как сделать красиво с помощью CSS и JavaScript"

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей. Но привлечь мало - надо еще сделать все для того, чтобы посетителям наш сайт понравился, чтобы им захотелось остаться, а потом приходить снова и снова. Для этого недостаточно наполнить страницу интересным содержанием, нужно еще сделать ее красивой и, самое главное, удобной в использовании. На Западе для предоставления потребителям максимума удобств существует даже специальная профессия - специалист по usability. Если вас заинтересовало, что это значит, узнать подробности вы можете на страничке Артемия Лебедева http://www.design.ru/kovodstvo. А в нашей статье речь пойдет несколько о другом - о том, как превратить навигацию по вашему сайту в сплошное удовольствие для посетителя.

Хочу заранее предупредить, что все примеры, приведенные в данной статье, предназначены только для браузеров Internet Explorer версии 4.0 и выше, т.к. цель этой статьи - не научить вас кроссбраузерному DHTML, а лишь показать, каких интересных эффектов можно достичь, манипулируя свойствами CSS при помощи JavaScript. Что касается аналогичных эффектов для браузеров Netscape, которые намного меньше распространены в России, упомяну лишь, что для совместимости с ними нужно будет проделать небольшую дополнительную работу - написать скрипт, определяющий версию браузера при загрузке страницы, и несколько изменить функции, управляющие свойствами CSS.

Также напомню, что некоторые пользователи отключают в своих браузерах графику для ускорения загрузки страниц. Поэтому, если вы делаете меню для навигации по вашему сайту с помощью графических элементов, не забывайте снабдить рисунки подробными описаниями в атрибуте alt. Желательно также создать альтернативное текстовое меню - обычно его делают внизу страницы в виде строчки, содержащей ссылки на основные разделы сайта.

Графическое меню с подразделами, реагирующее на действия пользователя

<style>
...
.hidden {position: absolute; visibility: hidden;}

...
</style>

Кроме того, нам понадобится класс .visible для "видимого" состояния этих списков:

<style>
...
.visible {position: absolute; visibility: visible; z-index: 3;}

...
</style>

Обратите внимание: слои с нашими картинками должны быть абсолютно позиционированы. Свойство z-index со значением, большим единицы, задано для того, чтобы выпадающие меню оказывались поверх других элементов страницы. Советую разместить навигационное меню на странице так, чтобы списки подразделов, выпадая, оказывались поверх баннера или какого-нибудь другого малозначительного графического элемента. Если посетитель, читая что-то интересное, случайно наведет мышку на название раздела (многие любят, читая, "возить" мышкой по странице) и поверх текста вдруг вывалится список подразделов, ему это вряд ли понравится.

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

<div style="position: absolute; top: 20px; left: 20px;">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>
<div id="Nav1" class="hidden" style="position: absolute; top: 40px; left: 20px;">
<img src="images/1.gif" width="110" height="20">
<br>
<img src="images/2.gif" width="110" height="20">
<br>
<img src="images/3.gif" width="110" height="20">
<br>
<img src="images/4.gif" width="110" height="20">
</div>

Обратите внимание - для спрятанного слоя обязательно должен быть задан уникальный идентификатор, в нашем случае это - id="Nav1". Идентификатор нужен для того, чтобы программа JavaScript, которую мы напишем чуть позже, могла обратиться к конкретному элементу страницы.

Когда мышка посетителя нашей странички окажется над видимым слоем, для этого слоя произойдет событие MouseOver, а когда курсор вновь уйдет за пределы слоя - произойдет событие MouseOut. Все, что нам осталось теперь сделать, - это создать обработчики для этих событий мышки.

Конечно же, можно записать значения обработчиков событий непосредственно в тэгах слоя, но, во-первых, это удобно лишь до той поры, пока слоев один-два, а если мы собираемся создать полноценную навигационную панель, у нас их будет значительно больше. Во-вторых, правила "хорошего тона" в DHTML предписывают задать программу JavaScript, называемую функцией, в разделе <head> в тэге-контейнере <script>, а в дальнейшем просто вызывать ее из обработчиков событий в теле страницы. Такой подход ускоряет как загрузку страницы в целом, так и обработку конкретных событий, в частности.

Итак, нам понадобится написать две функции - одну для того, чтобы показывать спрятанный список подразделов, и вторую - для того, чтобы вновь его прятать. Так как мы заранее подготовили два класса - .visible и .hidden, то наши функции будут управлять всего лишь сменой одного класса на другой, и, следовательно, состоять всего из одной строчки каждая. При этом раздел <head> нашей страницы будет выглядеть так:

<head>
<title>Пример выпадающего меню</title>

<style>
.hidden {position: absolute; visibility: hidden;}

.visible {position: absolute; visibility: visible; z-index: 2;}

</style>
<script language="JavaScript">

function showObject(obj) 
{
    obj.className = "visible"
}

function hideObject(obj) 
{
    obj.className = "hidden"
}

</script>
</head>

Атрибут, описывающий язык скрипта, необязателен лишь в том случае, если мы используем язык JavaScript, но те же правила хорошего тона требуют указывать этот атрибут.

Обратите внимание, что при задании функций мы не использовали явных ссылок на уникальный идентификатор слоя, а воспользовались заданием переменной obj. В языке JavaScript можно присваивать значение и тип переменных автоматически, и для каждого нового подменю мы можем использовать новое значение переменной, что позволит нам использовать одни и те же функции для обработки событий в разных слоях.

Добавим теперь атрибуты onmouseover (курсор находится над слоем) и onmouseout (курсор находится вне слоя) в тэг <div>, описывающий видимую часть меню. С помощью onmouseover вызовем функцию showObject для объекта Nav1 (невидимого слоя), а с помощью onmouseout - функцию hideObject для него же. В целом описание видимого слоя теперь будет выглядеть так:

<div style="position: absolute; top: 20px; left: 20px;"
onmouseover="javascript:showObject(Nav1)"
onmouseout="javascript:hideObject(Nav1)">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>

Но этого недостаточно. Нам нужно еще, чтобы список подразделов оставался видимым, когда наш посетитель захочет нажать на нем одну из ссылок. Для этого нужно прописать невидимому слою абсолютно аналогичные обработчики событий. Вам с первого взгляда может показаться, что при такой постановке вопроса список подразделов может вдруг "возникнуть из ничего", если наш гость случайно заедет курсором в область его расположения, но на самом деле это не так. Логика браузера Internet Explorer такова, что скрытые объекты нечувствительны к событиям мыши, поэтому обработчики событий будут действовать лишь тогда, когда слой станет видимым после наведения курсора на область названия раздела. Окончательная запись кода нашей странички будет выглядеть так:

<HTML>
<HEAD>
<TITLE>Пример выпадающего меню</TITLE>

<style>
.hidden {position: absolute; visibility: hidden;}

.visible {position: absolute; visibility: visible; z-index: 2;}

</style>
<script language="JavaScript">

function showObject(obj) {
    obj.className = "visible"
}

function hideObject(obj) {
    obj.className = "hidden"
}

</script>
</HEAD>

<body topmargin=0 leftmargin=0>
<div style="position: absolute; top: 20px; left: 20px;"
onmouseover="javascript:showObject(Nav1)" 
onmouseout="javascript:hideObject(Nav1)">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>
<div id="Nav1" class="hidden" 
style="position: absolute; top: 40px; left: 20px;"
onmouseover="javascript:showObject(Nav1)"
onmouseout="javascript:hideObject(Nav1)">
<img src="images/1.gif" width="110" height="20">
<br>
<img src="images/2.gif" width="110" height="20">
<br>
<img src="images/3.gif" width="110" height="20">
<br>
<img src="images/4.gif" width="110" height="20">
</div>
</body>
</HTML>

Осталось только прописать ссылки к картинкам, да еще неплохо было бы для видимого слоя, если он по вашему замыслу не будет являться самостоятельной ссылкой, задать свойство cursor: hand; чтобы посетителю стало ясно, что это не просто картинка, а область управления.

Если теперь добавить абсолютно позиционированный баннер в область невидимого слоя и задать ему z-index равным единице, то наше меню будет выпадать поверх баннера.

Вот и все, теперь для создания полноценной навигационной панели вам осталось только добавить нужное количество видимых и невидимых слоев, не забывая прописывать каждому невидимому слою свой уникальный идентификатор и обращаться именно к нему в соответствующих обработчиках событий. Если вам лень высчитывать значения top и left для абсолютного позиционирования элементов страницы, вы можете с успехом поместить слои внутрь ячеек таблицы, но свойство position: absolute; (без значений top и left) должно остаться, иначе ваша табличка расползется!

Автор: Бандурина Людмила
Источник: www.dweb.com