Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 152


Информационный Канал Subscribe.Ru
htmlbook.ru Для тех, кто делает сайты Помощь по сайту
СтатьиКнигиФорум

Добрый день.

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

Адрес статьи на сайте — htmlbook.ru/content/247.html

Горизонтальное меню с аннотацией

Статусная строка недаром существует в браузере, она помогает получать дополнительную информацию о ссылках и других объектах веб-страницы. Нечто подобное можно создать и для горизонтального меню, чтобы при наведении на ссылку выводилось ее расширенное описание. Конечно, существуют всплывающие подсказки, которые устанавливаются с помощью параметра title тега A, но они отображаются с задержкой, к тому же видом таких подсказок нельзя управлять.

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

Подобное меню имеет ряд преимуществ:

  • названия ссылок можно сокращать, зато более подробно давать их описание;
  • текст описания может занимать как одну, так и несколько строк;
  • видом аннотации можно управлять с помощью стилей.

Для создания горизонтального меню с аннотацией воспользуемся методом innerHTML, который позволяет динамически изменять текст определенных элементов. Вначале потребуется создать структуру тегов DIV, как показано в примере 1.

Пример 1. Создание меню
<html>
<head>
<style type="text/css">
#menu {
background: #fc0; /* Цвет фона меню */
padding: 5px; /* Поля вокруг текста */
border: 1px solid black /* Параметры рамки вокруг меню */
}

#description {
font-size: 90%; /* Размер шрифта */
height: 30px; /* Высота слоя с описанием */
padding: 5px /* Поля вокруг текста описания */
}

</style>
</head>
<body>

<div id=menu>
<a href=link1.html>Чебурашка</a> |
<a href=link2.html>Крокодил Гена</a> |
<a href=link3.html>Шапокляк</a>
</div>
<div id=description>&nbsp;</div>
</body>
</html>

Указывать высоту слоя description через параметр height нужно только в том случае, когда описание для разного меню различается числом строк. Дело в том, что изменение числа строк может привести к сдвигу содержимого, находящегося ниже меню. Чтобы этого не произошло и требуется устанавливать высоту.

Создаем теперь функцию, которая будет менять содержимое слоя description (пример 2).

Пример 2. Использование метода innerHTML
<script type="text/javascript">
function statMenu(text) {
document.getElementById('description').innerHTML = text;
}
</script>

В качестве аргумента функции statMenu используется текстовая строка, которая служит описанием к текущему пункту меню. Допускается в тексте использовать любые теги HTML, например, для выделения отдельных слов или создания переносов строк.

Теперь остается к каждому тегу A находящемуся в меню добавить события onMouseOver и onMouseOut и «навесить» на них нашу функцию statMenu (пример 3).

Пример 3. Окончательный код для создания меню с аннотацией
<html>
<head>
<style type="text/css">
#menu {
background: #fc0;
padding: 5px;
border: 1px solid black
}

#description {
font-size: 90%;
height: 30px;
padding: 5px
}

</style>

<script type="text/javascript">
function statMenu(text) {

document.getElementById('description').innerHTML = text;

}
</script>
</head>
<body>

<div id=menu>
<a href=link1.html onMouseOver="statMenu('Пушистый зверек с большими ушами')" onMouseOut="statMenu('')">Чебурашка</a> |
<a href=link2.html onMouseOver="statMenu('Зеленый крокодил, ходит на задних лапах')" onMouseOut="statMenu('')">Крокодил Гена</a> |
<a href=link3.html onMouseOver="statMenu('Вредная злокозненная бабка')" onMouseOut="statMenu('')">Шапокляк</a>
</div>
<div id=description>&nbsp;</div>

</body>
</html>

Для добавления аннотации применяется событие onMouseOver, оно отвечает за наведение курсора мыши на пункт меню. Чтобы убрать текст используется событие onMouseOver, которое вызывает функцию statMenu с пустой строкой в качестве аргумента.


Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.

http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: inet.webbuild.htmlbook		 Отписаться
В избранное