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


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

Статическое меню аналогично обычному меню, за исключением того, что статическое меню остается "надетым" на экран безотносительно к прокрутке содержимого. Поскольку в ряде современных браузеров можно реагировать на события прокрутки, статические меню, не зависящие от браузера, можно создавать на базе setlnterval ( ).

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

В этом случае лучше использовать свойство position: fixed CSS2, чтобы передвинуть навигационный объект в определенную позицию на экране. К сожалению, в IE6 это свойство не поддерживается, но с небольшими ухищрениями его все же можно имитировать в рамках CSS. Программный код репозиционирования корректирует позицию меню в соответствии с фиксированным положением. Реализация этой идеи очень проста.

Обработчик onload документа запускает таймер, вызывающий makeStatiс ( ) для меню каждые 30 миллисекунд, с переданным для makeStatic ( ) в качестве аргумента значением id элемента (или name слоя в Netscape 4), для которого следует выполнить репозиционирование.

В следующем примере элемент "menu" размещается на расстоянии пяти пикселей от верхнего левого угла экрана, но это размещение легко изменить. Чтобы напомнить о трудностях, связанных с реализацией решений на базе DHTML, мы используем в этом примере не только средства DOM, но и document. all IE, и слои Netscape 4, иллюстрирующие проблемы создания элементов навигации с помощью JavaScript.


<html>
<head>
<title>IIример статического меню></title>
<!— не используйте XHTML из-за проблем в модели IE —>
<style type="text/css">
<! —
.menu { background: blue; padding: Opx;margin: Opx; border-style: solid;
border-width: Opx; border-color: lightblue; color: white;
position: absolute; text-align: left; width: 150px; }
—>
</style>
<script language="JavaScript" type="text/javascript">
<! —
var xoff = 5;
var yoff ¦ 5;
function makeStatic(elementName)
{
if (document.layers) // если ns4
{
document.layers[elementName].x = window.pageXOffset + xoff;
document.layers[elementName].у = window.pageYOffset + yoff;
}
else if (document.all) // иначе если ie4+
{
document.all(elementName).style.left = document.body.scrollLeft + xoff;
document.all(elementName).style.top = document.body.scrollTop + yoff;
}
else if (document.getElementByld) // иначе если есть поддержка DOM
{
document.getElementByld(elementName).style.left =
window.pageXOffset + xoff;
document.getElementByld(elementName).style.top =
window.pageYOffset + yoff;
}
}
//-->
</script>
</head>
<body onload="setInterval('makeStatic(\'staticmenu\')',30)">
<layer class="menu" name="staticmenu">
<div class="menu" id="staticmenu">
Содержимое меню
</div>
</layer>
<h1>Добро пожаловать в нашу компанию</h1>

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<h1>Конец страницы</h1> „,
</body>
</html>

Как всегда при использовании DHTML, есть много вариантов реализации указанных возможностей. Можно использовать меню, полностью построенные на базе CSS и применяющие свойство position: fixed CSS2, а также различные вариации DHTML, позволяющие отслеживать состояние прокрутки в разных браузерах. Подход CSS оказывается наилучшим, поскольку позволяет избежать проявления эффекта "прыгающего меню", но так как IE6 не поддерживает соответствующие возможности, мы представили подход с использованием JavaScript.


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


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

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


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







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