Добавляем...


Скользящие меню
Скользящее меню — это слой, обычно размещаемый слева и содержащий пункты меню, частично скрытые на экране. Пользователю остается видимой только закладка или узкая вертикальная часть слоя. Когда пользователь активизирует меню, поместив на видимой части объекта указатель мыши или щелкнув на закладке, меню "выкатывается" на страницу. Если указатель мыши удаляется от меню, слой так же гладко возвращается в исходное положение за пределами экрана.
Следующий программный код иллюстрирует основные идеи, лежащие в основе создания скользящих меню. Сначала нужно поместить слой за пределы левой границы экрана, а затем постепенно выдвигать меню на экран, пока указатель мыши остается на меню.

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

Многие пользователи сочтут более удобным, чтобы при активизации меню оно появлялось на экране сразу, а не постепенно. Следующий программный код предназначен для современных браузеров, обеспечивающих поддержку DOM, но можно обеспечить и независимость программного кода от браузера, если использовать стандартные, не зависящие от браузера DHTML-процедуры, о которых шла речь в предыдущей главе и которые можно найти в Web.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример скользящего меню</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<style type="text/css">
<!---
.menu ( background: blue; padding: Opx; margin: Opx;
border-style: solid; border-width: 2px;
border-color: lightblue; position: absolute;
text-align: left; width: 170px; top: 80px;
z-index: 100; ......}
.menuitem { color: white; position: relative;
display: block; font-style: normal; margin: Opx;
padding: 2px 15px 2px 1Opx; font-size: smaller;
font-family: sans-serif; font-weight: bold;
text-decoration: none; }
a.menuitem:hover { background-color: darkblue; }
—>
</style>
<script type="text/javascript">
<!--
var leftmost = -150;
var rightmost = 5;
var interval = null;
var DOMCapable;
document.getElementByld ? DOMCapable = true : DOMCapable = false;
function scrollRight(menuName)
{
var leftPosition;
if (DOMCapable)
{
leftPosition = parselnt(document.getElementByld(menuName).style,
left);
if (leftPosition >= rightmost)
{


// если меню полностью выдвинуто, прекратить движение
clearlnterval(interval);
return;
)
else
{
// иначе сдвинуть меню еще на 5 пикселей
leftPosition += 5;
document.getElementByld(menuName).style.left =
leftPosition+"px";
}
}
}
function scrollLeft(menuName)
{
if (DOMCapable)
{
leftPosition = parselnt(document.getElementByld(menuName).style,
left);
if (leftPosition <= leftmost)
{
// если меню полностью задвинуто, прекратить движение
clearlnterval(interval);
return;
}
else
{
// иначе сдвинуть меню еще на 5 пикселей
leftPosition -= 5;
document.getElementByld(menuName).style.left =
leftPosition+"px";
}
}
)
function startRightScroll(menuName)
{
clearlnterval(interval);
interval = setlnterval('scrollRight("' + menuName + '")', 30);
)
function startLeftScroll(menuName)
{
clearlnterval(interval); i
nterval = setlnterval('scrollLeft("' + menuName + '")', 30);
}
II—>
</script>
</head>
<body onload="document.getElementByld('slider').style,
left=leftmost+'px';">


<!— скрытое меню --> <div class="menu" id="slider" onmouseover="startRightScroll('slider');" onmouseout="startLeftScroll('slider');"> <h3 class="menuitem"xu>Hama продукция</u></hЗ> <a class="menuitem" href="widgets.html">Bиджeты</a> <a class="menuitem" href="swidgets.html">Cynepвиджеты</a> <a class="menuitem" href="sprockets.ЬЪга1">Шестеренки</а> <a class="menuitem" href="vulcans.html">Peмешки</a> </div> <h1>Добро пожаловать в нашу компанию</h1> </body> </html>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика