Выпадающие меню в HTML 4.0

Выпадающие меню в HTML 4.0

Как web-мастера, меня 646d316g часто просят «предложить способ навигации на сайте». Таких способов известно немало: карты ссылок, списки, навигационные панели и т.д. Но сегодня давайте поговорим о выпадающих меню (таких, как, например, на microsoft.com - хотя делать точную имитацию, конечно, не будем).
Возможность создания «выпадающих меню» появляется в HTML 4.0, благодаря использованию слоев (layers). Разбиение на слои - удобный способ структурирования сложных изображений, который используется практически во всех графических редакторах. Проще всего представить себе слой как прозрачный лист, на котором что-то рисуют. Затем множество таких листов складывается в стопку, и зритель рассматривает получившееся «составное» изображение (при этом картинки, которые находятся на ближних к нему листах, перекрывают собой изображения на дальних листах).
Использование слоев дает возможность создавать довольно впечатляющие произведения - посмотрите, например, на печатные рекламные объявления или брошюры... Но если создатели графики могут применя 646d316g ть представление в виде слоев без всякого труда (это позволяют делать даже самые простые графические редакторы и издательские программы), то дизайнеры HTML до сих пор были лишены такой возможности. В HTML элементы отображаются «в порядке очередности»; в нем никогда не предусматривалось наложение элементов, а уж тем более их перекрытие. 
Но вот наконец-то HTML 4.0 дает возможность позиционирования, изменения раз-мера, перекрытия элементов - и использования сценариев для их отображения (show) и скрытия (hide).

Размещение элемента HTML

Расположение элемента можно определить с помощью стиля. 
Внутри правила CSS (Cascade Style Sheet) вы присваиваете свойству POSITION значение RELATIVE или ABSOLUTE. RELATIVE означает «обычное» размещение элемента; а вот если присвоено значение ABSOLUTE - браузер устанавливает элемент относительно родительского контейнера, вне зависимости от того, является ли им документ или какой-то другой элемент. 
Позицию элемента можно установить, используя свойства стиля TOP и LEFT, как показано в примере:

style=" left:120; top:33; width:65; height:85"

При применении этого стиля браузер установит элемент на 33 пикселя ниже и на 120 пикселей правее верхнего левого угла документа.

Значения TOP и LEFT задаются в относительно верхнего левого угла области контейнера в HTML-документе. Можно задать их и в процентах от ширины и высоты родительского контейнера.

Высота и ширина прямоугольной области, занятой элементом, определяется WIDTH и HEIGHT. Подобно TOP и LEFT, их можно задавать в или процентах.

Для примера создадим меню из трех пунктов, у каждого из которых будет по два подпункта; сверху разместим пункты (заголовки) меню, под ними - текст страницы, а поверх этого текста - три отдельных слоя с подпунктами.

<!-- ... ... -->
<!-- ... -->
<p align="left"> 
<a href="#"> 1</a> 
<a href="#"> 2</a>
<a href="#"> 3</a> 
</p>

<div id="Item1" style=" left:10; top:33; width:65; height:85"> 
<p> <a href="#"> 1.1</a></p> 
<p><a href="#"> 1.2</a></p> </div>
<!-- ... остальные подпункты аналогично ... -->
<!-- ... остальной текст ... -->

В листинге 1 показано позиционирование пунктов и подпунктов меню (я немного «порулил» CSS-ами, чтобы улучшить внешний вид - в принципе, этого можно и не делать).

Вы можете накладывать элементы друг на друга, устанавливая атрибуты TOP и LEFT для каждого элемента так, чтобы один располагался поверх другого. По умолчанию браузер выводит перекрывающиеся элементы в порядке перечисления - т.е. выводит первый встретившийся в тексте элемент, перекрывает его следующим, и так далее. 
Если вы хотите изменить порядок вывода (наложения) элементов - проще всего использовать свойство Z-INDEX, которое, собственно, этот порядок и определяет: style="position:absolute; left:120; top:33; z-index:1"
Этому атрибуту можно присвоить любое целое положительное значение. Чем это значение больше, тем «ближе» элемент к зрителю.

Для того чтобы «показывать» и «прятать» слои с подпунктами меню, воспользуемся сценарием JavaScript (хотя можно использовать и другой язык сценариев). Создадим сценарий, который при наведении мыши на пункт меню отображает все связанные с ним подпункты и прячет все остальные. Для этого нам понадобится свойство VISIBILITY элемента, которое указывает, виден элемент или нет. Например, чтобы показать первый слой и спрятать остальные два, установите в обработчике события onMouseOver первого пункта меню свойство видимости первого слоя равным "", а для остальных двух - равным "hidden":

<!-- устанавливаем обработчик -->
<a href="#" onMouseOver="ShowHideLayers()"> Пункт 1</a>

<!-- показываем первый слой и прячем остальных два -->
function ShowHideLayers()

пункт все остальные подменю исчезают.

Надеюсь, описанный здесь (и совсем несложный) метод создания выпадающих меню поможет вам улучшить свой Web-сайт.