| |
|
|
| | Горизонтальное выпадающее меню
Это ответ на вопрос, прозвучавший в теме
http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=4617&page=1
Приведен код из недавно вышедшей книги "PHP5 в примерах".
------------------------
Все меню, помещено в тег <div>, которому назначается абсолютное позиционирование помощью таблиц стилей <div id=menu>. Благодаря абсолютному позиционированию меню можно разместить в любом место страницы, для этого необходимо отредактировать параметры top и left в стиле #menu. Класс стилей .rootmenu предназначен для оформления пунктов меню верхнего уровня, а класс стилей .submenu описывает оформление блоков выпадающего меню. Установка в классе .submenu правила display: none скрывает блоки выпадающих меню при начальной загрузке страницы. В листинге ниже приведен HTML-код страницы с выпадающим меню.
<head>
<style type="text/css">
/* Контейнер меню */
#menu{position: absolute; top: 50px; left: 20px}
// Оформление пунктов меню верхнего уровня
.rootmenu {border-style: solid; border-width: 1px; padding: 5px;
background-color: #EEEEEE}
// Стиль контейнеров выпадающего меню
.submenu {display: none; padding: 0px 0px 0px 5px}
</style>
<div id=menu>
<table border=0><tr valign=top>
<td width="150px">
<div class=rootmenu>
<a href="#" onmouseover="showmenu('m1')"
onmouseout="hidemenu()"><b>О компании</b></a></div>
<div id="m1" class="submenu" onmouseover="showmenu('m1')"
onmouseout="hidemenu()">
<a href="http://">О компании</a><br>
<a href="http://">Руководство</a><br>
<a href="http://">Контакты</a><br>
<a href="http://">Схема проезда</a> </td>
</div>
</td>
<td width="150px">
<div class=rootmenu>
<a href="#" onmouseover="showmenu('m2')"
onmouseout="hidemenu()"><b>Продукция</b></a></div>
<div id="m2" class="submenu" onmouseover="showmenu('m2')"
onmouseout="hidemenu()">
<a href="http://">Системные блоки</a><br>
<a href="http://">Жесткие диски</a><br>
<a href="http://">CD-ROM</a> </td>
</div>
</td></tr></table>
</div>
</body>
</html>
|
Отображение блоков выпадающего меню происходит по событию наведения мыши на пункты меню, при котором вызывается функция showmenu().
onmouseover="showmenu(id)"
В качестве параметра функции showmenu() передается идентификатор выпадающего меню, которое необходимо отобразить.
После того как указатель мыши покидает область выпадающего меню, по событию onmouseout вызывается функция hidemenu(), которая скрывает блок открывшегося меню. Функции showmenu() и hidemenu(), реализующие работу выпадающего меню приведены в листинге ниже. Скрытие выпадающего меню в функции hidemenu() организовано по таймеру
setTimeout("выражение", миллисекунды),
который выполняет код, указанный в выражении через время в миллисекундах. Скрытие по таймеру необходимо для предотвращения преждевременного закрытия выпавшего блока подменю, когда указатель мыши перемещается от пункта меню верхнего уровня к ссылкам в подменю.
// Идентификатор предыдущего открытого меню
var oldsubmenu;
// Открытое меню закрывается по таймеру
var timeOnMenu;
// Функция скрытия блока выпадающего меню
function showmenu(obj)
{
if (timeOnMenu) {
// Если установлено скрытие меню, по таймеру,
// то удалить таймер и отменить скрытие
clearTimeout(timeOnMenu);
}
// Скрыть существующий открытый блок выпадающего меню
if (oldsubmenu) hide(oldsubmenu);
// Показать блок выпадающего меню с идентификатором obj
show(obj);
// Идентификатор текущего открытого меню
oldsubmenu=obj;
}
// Функция скрытия блока выпадающего меню
function hidemenu()
{
// Если есть открытий блок выпадающего меню, то
// скрыть его через 0.5 секунды по таймеру
if (oldsubmenu) timeOnMenu = setTimeout("hide(oldsubmenu)",500)
}
|
Для скрытии и отображения блоков меню используются функции show() и hide(), приведенные в листинге ниже. Эти функции, которые реализуют отображение и скрытие элементов по их идентификатору и обеспечивают корректную работу кода в большинстве браузеров. Код функций show(), hide() и getObject() являются универсальным и может использоваться в качестве библиотечных функций для других задач.
function getObject(obj)
{
var theObj
if (document.layers) {
if (typeof obj == "string") return document.layers[obj]
else return obj
}
if (document.all) {
if (typeof obj == "string")
{
if(document.all(obj)!=null) return document.all(obj).style ;
else return null;
}
else return obj.style
}
if (document.getElementById)
{
if (typeof obj == "string")
return document.getElementById(obj).style
else return obj.style
}
return null
}
// Функция для отображения объектов
function show(obj) {
var theObj = getObject(obj);
if (typeof theObj.visibility != "undefined")
theObj.visibility = "visible"
if (typeof theObj.display != "undefined") theObj.display = "block"
}
// Функция для скрытия объектов
function hide(obj)
{
var theObj = getObject(obj)
if (typeof theObj.visibility != "undefined")
theObj.visibility = "hidden"
if (typeof theObj.display != "undefined") theObj.display = "none"
}
|
| |
| |
|
|
| |
|
|
| |
для: glsv (Дизайнер)
(20.06.2005 в 21:12)
| | | Установка в классе .submenu правила display: none скрывает блоки выпадающих меню при начальной загрузке страницы. ===============================
у меня не скрывает почему-то :(
при открытии страницы видно сразу два субменю, по наведению на один пункт меню пропадает одно субменю, второе видно, по наведению на другой пункт - пропадает другое, видно первое...
вставила в тэг body onload=hidemenu() - не помогает. даже по прошествии временного интервала, субменю не пропадают...
придется искать что-то другое. а чего искать, если есть klayers....
вот, сделала с klayers. тока загвоздка - хотелось бы чтобы субменю открывались на одном уровне - то одно, то другое, а у меня прыгают... :( | |
| |
|
|
