Создадим в таблице стилей 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) Также создаём подпункты меню, и вставляем их между слоями с пунктами:
Для оформления меню создадим два класса: первый для пункта меню, второй — для
подпункта. Первый класс будет обладать синим фоном, цвет шрифта – белый, без
подчёркивания, рамка шириной 2 пикселя, внизу и справа цвет тёмно синий, а
вверху и слева – голубой, это создаёт эффект объемности. При наведении на ссылку
(этому моменту соответствует hover) поменяем наоборот эти цвета.
Второй класс будет иметь синий задний фон, при наведении голубой. Дизайн готов,
вы можете поменять цвета как захотите.
Приступим к последней части работы, настройке и внедрению функций JavaScript,
созданных ранее. Пункты меню получились высотой 20 пикселей, следовательно, и
слои с подпунктами будут размещены на 20 пикселей один ниже другого. За это
отвечает параметр top. Подбираем значение top для первого подпункта (у меня оно
получилось равное 10) и для каждого последующего прибавляем по 20 пикселей.
Думаю, значение отступа слева вы подберёте сами. Настройка закончена.
Теперь приступим к "оживлению" нашего меню. Это можно сделать следующим образом:
При наведении на пункт меню, закрываются все подпункты, и открывается нужный.
Когда курсор уходит с подпункта, подпункт исчезает
Моменту, когда курсор находится над объектом, соответствует команда onMouseOver,
а когда уходит – onMouseOut. Функции для закрытия и открытия меню у нас есть,
приступим к созданию!
В слоях, где находятся пункты, в теге <div> поместим строку
onMouseOver="show('тут номер подпункта')". В тег <div> слоя с подпунктами
поместим onMouseOut="cl();". Ссылки считаются другими объектами, поэтому при
наведении курсора на ссылку подпункт закроется. К счастью эта задача легко
решается добавлением в тег <a> строки onMouseOver="show('тут номер подпункта')".
Главная
Каталог файлов
