Фиксированное боковое меню при прокрутке страницы. Фиксированное горизонтальное меню. Фиксированное верхнее меню
В последнее время в моду вошла такая тенденция как фиксированное меню при прокрутке страницы. Обычно это горизонтальное меню на Landing Page сайтах.
Как это работает – при загрузке страницы меню находится в определенном месте страницы (например, под «шапкой»), а при прокрутке страницы оно фиксируется вверху окна браузера и не прокручивается, как остальное содержимое.
Если же посетитель прокручивает страницу вверх и достигает начала страницы, меню возвращается на свое место. Таким образом, посетитель, находясь в любом месте страницы, может его использовать и переходить на другие страницы сайта. Это очень удобно и соответствует принципам юзабилити.
Сейчас я расскажу Вам как реализовать такое меню с помощью потратив минимум своего времени и не прибегая за помощью к профессионалам.
Для начала нам подключить jQuery-библиотеку для сайта
< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >
можно подключить локально или через google.
Для локального подключения необходимо скачать файл jQuery с официального сайта http://jquery.com/
CSS
JavaScript
В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта window. В нем с помощью метода scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.
На этом все, благодаря простым решениям можно добиться красивого фиксированного меню которая не будет прослистываться при прокрутке основной части сайта
ЗадачаЗадать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.
Решение«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).
Пример 1. Использование position
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фиксированное меню .menu { position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ } .text { height: 1000px; } Меню
Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.
Для начала пару слов о самой задаче. Допустим у вас есть сайт, где вы решили фиксировать меню при прокрутке. При этом в навигации или тексте используются так называемые якоря (Anchor) . При переходе по этим ссылкам экран страницы автоматически перемещается к соответствующим местам на странице (где расположен якорь). Однако в таком случае часть контента закрывается блоком меню.
Данная ситуация чаще всего возникает в . На скриншоте проблема заметна более наглядно:
На StackOverflow найдено два решения задачи, которые отличаются лишь CSS.
Чтобы создать якорь с отступом первым делом добавим ему определенный стиль, например, anchor :
Здесь 55 пикселей — высота меню + отступ, которые нужны чтобы текст контента был виден. Указывайте значения, подходящие вашему сайту. В работе я применял именно этот вариант.
Альтернативный метод предлагает реализацию через padding, там вообще получается одна строка кода:
| .anchor { padding-top : 90px ; } |
Anchor { padding-top: 90px; }
В дополнение предлагаю глянуть эту заметку где автор привел сразу 5 разных решений как правильно использовать якоря с отступом для горизонтального фиксированного меню при прокрутке страницы: через псевдоэлементы, негативные отступы и т.п.
Если есть вопросы или что добавить по теме, пишем в комментариях.
Которые встречаются все чаще и чаще на страницах блогов и прочих ресурсов. Использование таких панелей навигации
вполне оправдано. Одной из основных причин активного использования этих jQuery плагинов является то, что меню всегда под рукой посетителя, даже если он находится внизу страницы. К тому же фиксированное меню
занимает немного места и не отвлекает внимания от основного контента. Если говорить в целом - фиксированное меню
улучшает юзабилити сайта.
Я собрал коллекцию из лучших, на мой взгляд, бесплатных jQuery плагинов для реализации фиксированного меню
. Старался, чтоб каждый из плагинов был чем-то уникален, чтобы любой плагин из подборки можно было применить именно в вашем проекте. В коллекции можно найти как простые, так и более сложные плагины с анимацией и т. д.
Если же вам нужно совсем простое фиксированное меню
, что-то вроде того, как у нас реализована липкая панель
с социальными кнопками, можно обойтись и без jQuery плагинов, ведь нагружать страницу скриптами - это не очень хорошо, но об этом мы поговорим в следующих статьях. Подписывайтесь на наш канал или на страницы в , чтобы не пропустить интересные материалы.
Итак. К вашему вниманию 6 jQuery плагинов для создания фиксированного меню
.
Рассмотрим скрипт, который позволяет реализовывать фиксированное меню для сайта. В концепцию разработки данного скрипта, входит язык программирования JQuery , так как с помощью него можно не только зафиксировать меню, как обычно бывает при свойстве css fixed , но и при скроллинге страницы наверх, он будет гарантировано держать отступ от шапки, который Вы сможете прописать в файле js. Причем данная технология идеально подойдет для фиксированного меню, как нижнего, так и верхнего.
Проверив скрипт на кроссбраузерность, выявлено, что он идеально работает на всех новых версиях, имеются затруднения у браузера Internet Explorer ранее 9 версии, но ничего удивительно тут нет, это свойственно старым браузерам.
Надеюсь, Вы уже давно пользуетесь новыми.
Первая часть. Подключение стилей и js файлов.
Давайте первым делом подключим по стандарту все необходимые стили и добавим файлы js , которые требуются для данного скрипта. Сначала подключаем файл стилей demo.css .
Затем подключаем библиотеку jquery-latest.min.js и файл menu.js, который будет отвечать за работоспособность отступов и стыков в меню, а также за исходное правильное положение, заданное по высоте.
Вторая часть. Файл index.php .
Тут все просто, выводим меню по стандарту через ul li и делаем оболочку блочным элементом div , который будет иметь идентификатор menu , взаимодействующий, полноценно с стилями и файлом menu.js .
Ru/news/">Новости
Третья часть. Файл demo.css .
Переходим к стилям фиксированного меню и прописываем основные свойства, которые должны идти обязательными! Во-первых, прописываем для идентификатора menu : фон, позицию и ширину. Во-вторых, все это выравниваем по центру и задаем высоту.
#menu { background:#ab4040; width:100%; position:fixed; } #menu ul{ margin:0 auto; width:750px; height:40px; }
Затем работаем с каждым элементом меню, а точнее с ссылками и прописываем им следующие свойства.
Отдельные свойства при наведении, рамки и прочее это уже для красоты и считаются необязательными.
#menu ul li { float:left; list-style:none; width:140px; text-align:center; border-right:1px inset #d0d0d0; height:40px; } .menuleft{ border-left:1px inset #d0d0d0; } #menu ul li a { line-height:40px; text-decoration:none; color:#ffffff; } #menu ul li:hover{ box-shadow:0 1px 0 #ab4040; background:#f43e3e; }
Четвертая часть. Файл menu.js .
Теперь у нас самое интересное. Будем фиксировать наше меню, на том уровне, там где оно нам потребуется. Пропишем переменную menu_height , в которой будем хранить высоту шапки нашего сайта. Это позволит при скроллинге страницы, точно фиксировать меню на нужном расстоянии от шапки сайта. В переменной element , мы храним свойства идентификатора menu и задаем свойство top , указывая, что меню будет сверху, и сравнивая с переменной menu_top , вычисляем нужное расстояние от шапки до меню.
