Как сделать фиксированное меню. Фиксированное горизонтальное меню Виды прокрутки меню

При создании сайта часто возникает необходимость держать в поле зрения горизонтальное меню, в котором расположена основная навигация сайта. Метод «фиксации» горизонтального меню является удобным с точки зрения посетителя, у которого «навигация всегда под рукой», сколько не крути колёсиком вниз или вверх.

Фиксируем горизонтальное меню с CSS: position:fixed

С одной стороны всё просто и легко решается средствами css в два счёта. Пример HTML вёрстки фиксированного горизонтального меню:

Главная
Новости
Контакты
Поиск

[содержимое страницы] [подвал сайта]

CSS вёрстка фиксированного горизонтального меню:

# menu-top-almost-fixed{ position: fixed; top: 10px; left: 0; height: 30px; width: 100%; margin: 0; }

А теперь зададим отступ для содержимого страницы, равный высоте меню:

#content { margin-top: 30px; }

И вот у нас «почти» всё получилось. Меню у посетителя «всегда на виду». Но что же делать, если у нас в дизайне расположена шапка сайта, после которой следует само меню, а в шапке у нас логотип, девиз сайта, баннеры.

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

Фиксируем горизонтальное меню при помощи javascript

Итак, рассмотрим вариант, когда меню «идёт» за шапкой сайта, но если посетитель активно прокручивает вниз, меню «фиксируется» вверху и остаётся на месте. Шапка сайта при этом не видна. Если же посетитель возвращается к шапке страницы, меню «становится» на своё место «за шапкой сайта». Для начала привёдем полную HTML вёрстку примера макета страницы:

Логотип сайта Слоган сайта Баннер

Главная
Новости
Контакты
Поиск

[содержимое страницы] [подвал сайта]

Шаблон нашего сайта состоит из нескольких типичных областей:

шапки сайта – #header , высотой 150px
горизонтального меню – #menu-top-almost-fixed – высотой 30px,
основной информационной области страницы – #content ,
подвала сайта – #footer .

Приведём css вёрстку:

#menu-top-almost-fixed{ position: fixed; margin: 0; left: 0; top: 150px; height: 30px; } #header{ display: block; height: 150px; overflow: hidden; position: relative; margin-bottom: 55px; } #menu-top-almost-fixed ul, #menu-top-almost-fixed li{ list-style: none; margin: 0; padding: 0; } #menu-top-almost-fixed ul{ display: block; text-align: center; width: 100%; float: left; } #menu-top-almost-fixed ul li{ display: inline; line-height: 30px; width: 120px; padding: 0 5px; text-align: center; }

Для начала зададим отступ от шапки до содержимого, равный высоте нашего меню + небольшой отступ с запасом для эстетической красоты. #header { margin-bottom: 55px; } . Зафиксируем наше меню сразу за шапкой: #menu-top-almost-fixed{ position: fixed; margin: 0; left: 0; top: 150px; height: 30px; } .

А теперь позаботимся о том, чтобы при прокрутке меню «фиксировалось» точно вверху страницы. Поместим следующий javascript между и :

Javascript:

А пример реализации Вы можете посмотреть по этой ссылке, и воспользовавшись колёсиком прокрутки. Итак, здесь всё просто. В настройках мы передаём скрипту следующие параметры:

var m1 = 150; - высота шапки в пикселях,
var m2 = 2; - отступ, когда во время прокрутки шапка уже не видна,
var menuID = “menu-top-almost-fixed”; - id горизонтального меню для закрепления,
var menuOpacityOnChange = “0.7”; - прозрачность меню при скроллинге:
- 1 - непрозрачное
- 0.5 – полупрозрачное
- 0.0 - полностью прозрачное

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

Изменяем немного CSS вёрстку для нашего горизонтального фиксированного меню:

#menu-top-almost-fixed{ position: fixed; margin: 0; left: 0; top: 150px; height: 30px; background: url(./images/white-gradient-l.png) bottom left repeat-x; }

А теперь приведём изменённый javascript код, который поместим между и :

Javascript:

Итак, здесь всё просто. В настройках мы передаём скрипту следующие параметры:

var m1 = 150; - высота шапки в пикселях,
var m2 = 0; - отступ, когда во время прокрутки шапка уже не видна.

Меню работает отлично, но, если перезагрузить страницу, меню появляется с первым отступом

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

Function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } };

На следующий код:

После загрузки страницы мы сразу вызываем нашу функцию marginMenuTop , которая проверит положение меню на странице, и применит нужный стиль

Реализуем частично фиксированное меню при помощи jQuery плагина Afixx из Twitter Bootstrap

В продолжение этой темы для Вас была написана статья реализации почти фиксированного меню при помощи jQuery плагина Affix из Twitter Bootstrap framework.

Рассмотрим скрипт, который позволяет реализовывать фиксированное меню для сайта. В концепцию разработки данного скрипта, входит язык программирования 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 , вычисляем нужное расстояние от шапки до меню.

Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта:)

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

Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, .

От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.

Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px . Запомним это число)

#header { height: 180px; } #navigation{ background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; } #navigation.fixed{ position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); } #navigation ul{ width: 1180px; padding-left: 0; margin: 0 auto; display: block; } #menu li{ float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; } #menu a { color: #fff; text-decoration: none; font-family: Verdana; } #menu>li a:hover{ color: #656565; transition: color 0.5s ease; }

И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.

JQuery(function($) { $(window).scroll(function(){ if($(this).scrollTop()>140){ $("#navigation").addClass("fixed"); } else if ($(this).scrollTop()

Обратите внимание, что если в коде, заключенном в echo "" , будут встречаться одиночные кавычки, то их нужно будет экранировать , т.е. поставить перед каждой из них обратный слеш (\") без скобок, естественно.

В общем получилось, как получилось. Как это конкретно прикрутить к вашей теме, вам придется решать самим — когда есть время, то это даже прикольно «поломать голову». Спасибо.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

WebPoint PRO - адаптивная тема для WordPress с широким функционалом и грамотной технической поисковой оптимизацией
Share42 - скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)

В последнее время в моду вошла такая тенденция как фиксированное меню при прокрутке страницы. Обычно это горизонтальное меню на 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() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.

На этом все, благодаря простым решениям можно добиться красивого фиксированного меню которая не будет прослистываться при прокрутке основной части сайта