Фиксированное вертикальное меню

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

Какие плюсы создания на сайте такого меню:

Навигация всегда «под рукой».
Минимальное использование прокрутки (а, действительно, зачем? Если добавить в вертикальное меню поиск, основные пункты меню, и навигацию: якорные ссылки для перемещения «Наверх» и «Вниз» страницы).

А как же создать такое меню?

Помещаем его в блок, который фиксируем на странице в одном положении, присваивая: position: fixed. Задаём верхний и левый (или, если располагаем вертикальное меню в правой части, тогда – правый отступ). Для центрального блока содержимого делаем отступы с левой (либо с правой) стороны. Присваиваем z-index побольше.

Примечание автора: обязательно задавайте левый (или правый) отступ, иначе возникает баг в IE 7, который буквально где угодно может расположить по горизонтали данное меню.

Рассмотрим на примере плавающей панели на нашем сайте:

Располагаем панель перед закрывающимся тегом body.

HTML:

<div id="socializ">
[пункты меню]
</div>
</body>

CSS:

#socializ {
	position: fixed;
	z-index: 1000;
    top: 20px;
	left: 20px;
}

Пример расположен в левой части страницы.

«Плавающее» фиксированное меню

Когда возникает такая необходимость? Если, например, согласно строгому стилю дизайна требуется расположить фиксированное вертикальное меню под шапкой на одном уровне с блоком основного содержимого (чтобы меню «не находилось» в области шапки), но при интенсивной прокрутке окна, когда шапка уже не видна, требуется закрепить меню в одном и том же положении в верхнем левом (правом) углу экрана, делая все пункты видимыми (именно так реализована плавающая соц. панель на нашем сайте).

Первое, нам точно понадобиться знать, сколько пикселей в высоту наша шапка? И задаём высоту шапки в виде отступа сверху в css для блока, содержащего меню (в нашем примере: #socializ):

CSS:

#socializ{
   top: 240px; /** высота шапки в пикселях**/
   position: fixed;
   z-index: 1000;
   left: 20px;
}

Допишем небольшой javascript код, и поместим его в содержимое web-страницы:

<script type="text/javascript">
var m1 = 240; /* высота шапки в пикселях */
var m2 = 20; /* отступ, когда во время прокрутки шапка
 уже не видна */
/* функция кроссбраузерного определения 
отступа от верха документа к текущей позиции 
скроллера прокрутки */
function getScrollTop() {
           var scrOfY = 0;
           if( typeof( window.pageYOffset ) == "number" ) {
                   //Netscape compliant
                   scrOfY = window.pageYOffset;
           } else if( document.body 
           && ( document.body.scrollLeft 
           || document.body.scrollTop ) ) {
                   //DOM compliant
                   scrOfY = document.body.scrollTop;
           } else if( document.documentElement
           && ( document.documentElement.scrollLeft
            || document.documentElement.scrollTop ) ) {
                   //IE6 Strict
                   scrOfY = document.documentElement.scrollTop;
           }
           return scrOfY;
}
/* функция, которая устанавливает верхний отступ
 для «плавающего» фиксированного вертикального 
меню в зависимости от положения
 скроллера и видимости шапки */
function marginMenuTop() {
			var top  = getScrollTop();
			var s	 = document.getElementById("socializ");
			if (top+m2 < m1) {
				s.style.top = (m1-top) + "px";
			} else {
				s.style.top = m2 + "px";
			}
}
/** функция регистрирует 
вычисление позиции
 «плавающего» меню при прокрутке страницы
**/
function setMenuPosition(){
if(typeof window.addEventListener != "undefined"){
	window.addEventListener("scroll", marginMenuTop, false);
} else if(typeof window.attachEvent != "undefined"){
	window. attachEvent("onscroll", marginMenuTop);
}
}
/** регистрируем вызов 
необходимых функций после
 загрузки страницы **/
if(typeof window.addEventListener != "undefined"){
	window.addEventListener("load", setMenuPosition, false);
} else if(typeof window.attachEvent != "undefined"){
	window. attachEvent("onload", setMenuPosition);
}
</script>

Где:

var m1 = 240, #socializ{ top: 240px; } — высота шапки в пикселях
var m2 = 20 — отступ, когда во время прокрутки шапка уже не видна
getScrollTop() — функция кросс браузерного определения отступа от верха документа к текущей позиции скроллера прокрутки
marginMenuTop() – функция, которая устанавливает верхний отступ для меню в зависимости от положения скроллера и видимости шапки
setMenuPosition() – функция регистрирует вычисление позиции «плавающего» фиксированного меню при скроллинге страницы

регистрируем вызов необходимых функций после загрузки страницы

if(typeof window.addEventListener != "undefined"){
	window.addEventListener("load", setMenuPosition, false);
} else if(typeof window.attachEvent != "undefined"){
	window. attachEvent("onload", setMenuPosition);
}

В следующих статьях мы рассмотрим пример реализации «плавающего» фиксированного вертикального меню с элементами навигации и отступами от шапки и футера. А также рассмотрим реализацию «плавающего» фиксированного горизонтального меню.

Поделитесь со своими друзьями