Создание вертикального pop-up меню

Источник: softtime

Яровой Р.П.

Web-программирование относится к клиент-серверной технологии и подразумевает создания сервисов, работающих как на стороне сервера, так и на стороне клиента. Многие Web-технологии, такие как Java или ASP.NET объединяют в себе как серверную, так и клиентскую часть. PHP работает только на стороне сервера, поэтому для создания полноценных Web-приложений его необходимо использовать совместно с клиентским языком программирования. В этой статье будет рассмотрено создание меню при помощи JavaScript.

Создадим в таблице стилей 2 класса:

top - пункт меню: позиционирование - статическое, выравнивание текста - по левому краю, высота и ширина - 20 и 61 пиксель соответственно
sub - подпункт: позиционирование - абсолютное, выравнивание текста - по центру, скрытый, рамка - 1 пиксель, прямая линия, цвет текста - чётный, фон - синий.

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

function cl() { for(var i=1; i<=5; i++)//5 - число подпунктов { eval('sub'+i+'.style.visibility="hidden"') } }

Теперь создадим функцию show, открывающую подпункты:

function show(num) { cl(); eval('sub'+num+'.style.visibility="visible"'); }

Функция принимает в качестве единственного параметра num, номер пункта меню, для которого необходимо отобразить подпункты. Функция show сначала закрывает все подпункты меню используя описанную ранее функцию cl(), а затем открывает нужный подпункт.

Теперь пишем "скелет" нашего меню:

Примечание

Меню будет сделано на основе слоёв (<div>...</div>)

1) Создаём слои, содержащие пункты меню:

<div id="top" class="top"> <a href="page1.php" class="menu">Пункт 1</a> </div> … <div id="top" class="top"> <a href="page5.php" class="menu">Пункт 5</a> </div>

2) Также создаём подпункты меню, и вставляем их между слоями с пунктами:

<div id="sub1" class="sub" style="left:70px; top:10px; "> <a class="submn" href="subpage1.php" title="Подпункт 1">Подпункт 1</a><br /> <a class="submn" href="subpage2.php" title="Подпункт 2">Подпункт 2</a><br /> <a class="submn" href="subpage3.php" title="Подпункт 3">Подпункт 3</a><br /> </div>

Для оформления меню создадим два класса: первый для пункта меню, второй - для подпункта. Первый класс будет обладать синим фоном, цвет шрифта - белый, без подчёркивания, рамка шириной 2 пикселя, внизу и справа цвет тёмно синий, а вверху и слева - голубой, это создаёт эффект объемности. При наведении на ссылку (этому моменту соответствует hover) поменяем наоборот эти цвета.

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

Приступим к последней части работы, настройке и внедрению функций JavaScript, созданных ранее. Пункты меню получились высотой 20 пикселей, следовательно, и слои с подпунктами будут размещены на 20 пикселей один ниже другого. За это отвечает параметр top. Подбираем значение top для первого подпункта (у меня оно получилось равное 10) и для каждого последующего прибавляем по 20 пикселей. Думаю, значение отступа слева вы подберёте сами. Настройка закончена.

Теперь приступим к "оживлению" нашего меню. Это можно сделать следующим образом:

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

Моменту, когда курсор находится над объектом, соответствует команда onMouseOver, а когда уходит - onMouseOut. Функции для закрытия и открытия меню у нас есть, приступим к созданию!

В слоях, где находятся пункты, в теге <div> поместим строку onMouseOver="show('тут номер подпункта')". В тег <div> слоя с подпунктами поместим onMouseOut="cl();". Ссылки считаются другими объектами, поэтому при наведении курсора на ссылку подпункт закроется. К счастью эта задача легко решается добавлением в тег <a> строки onMouseOver="show('тут номер подпункта')".

Меню готово! Ниже приведён исходный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Pop-up menu</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css">  </style> <SCRIPT language="javascript">  </SCRIPT> <noscript> Ваш браузер не поддерживает JavaScript </noscript> </head> <body> <div id="top" class="top" onMouseOver="show('1')" > <a href="page1.php" class="menu">Пункт 1</a> </div> <div id="sub1" class="sub" style="left:70px; top:10px; " onMouseOut="cl();"> <a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('1')">Подпункт 1</a><br /> <a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('1')">Подпункт 2</a><br /> <a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('1')">Подпункт 3</a><br /> </div> <div id="top" class="top" onMouseOver="show('2')"> <a href="page2.php" class="menu">Пункт 2</a> </div> <div id="sub2" class="sub" style="left:70px; top:30px; " onMouseOut="cl();"> <a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('2')">Подпункт 1</a><br /> <a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('2')">Подпункт 2</a><br /> <a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('2')">Подпункт 3</a><br /> </div> <div id="top" class="top" onMouseOver="show('3')"> <a href="page3.php" class="menu">Пункт 3</a> </div> <div id="sub3" class="sub" style="left:70px; top:50px; " onMouseOut="cl();"> <a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('3')">Подпункт 1</a><br /> <a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('3')">Подпункт 2</a><br /> <a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('3')">Подпункт 3</a><br /> </div> <div id="top" class="top" onMouseOver="show('4')"> <a href="page4.php" class="menu">Пункт 4</a> </div> <div id="sub4" class="sub" style="left:70px; top:70px; " onMouseOut="cl();"> <a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('4')">Подпункт 1</a><br /> <a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('4')">Подпункт 2</a><br /> <a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('4')">Подпункт 3</a><br /> </div> <div id="top" class="top" onMouseOver="show('5')"> <a href="page5.php" class="menu">Пункт 5</a> </div> <div id="sub5" class="sub" style="left:70px; top:90px; " onMouseOut="cl();"> <a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('5')">Подпункт 1</a><br /> <a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('5')">Подпункт 2</a><br /> <a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('5')">Подпункт 3</a><br /> </div> </body> </html>

Ссылки по теме