Фиксированное вертикальное меню
![Фиксированное вертикальное меню Фиксированное вертикальное меню изображение поста](https://awesome-design.com/wp-content/uploads/2018/07/Fiksirovannoe-vertikalnoe-menyu.jpg)
Довольно интересным предложением для создания удобного 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); }
В следующих статьях мы рассмотрим пример реализации «плавающего» фиксированного вертикального меню с элементами навигации и отступами от шапки и футера. А также рассмотрим реализацию «плавающего» фиксированного горизонтального меню.