Фиксированное меню при прокрутке страницы



фиксированное меню при прокрутке страницы

Фиксируем меню: 2 лучших подхода

Сегодня мы фиксируем меню при прокрутке страницы, рассмотрим лучший вариант реализации.

Всех желающих купить ОСАГО и диагностическую карту приглашаем посетить сайт osagomarket.ru, на котором можно быстро и, главное, удобно приобрести страховку для автомобиля.

Как мы фиксируем меню?

Есть 2 способа фиксировать меню:

  • Фиксировать меню только если страница прокрутилась достаточно вниз
  • Фиксировать меню постоянно

Фиксируем меню при прокрутке страницы

Для этого способа потребуется JS и CSS. Сначала нам потребуется определить насколько сильно страница прокрутилась вниз, а затем, если это значение больше определенного (например больше размера экрана) зафиксируем меню. Рассмотрим на примере:

То есть при прокрутке страницы мы проверяем #171 больше ли величина прокрутки страницы, чем высота окна#187 , и если больше — добавляем класс fixed к нашему меню (и указываем высоту и ширину, потому, что при использовании position: fixed теряются размеры блока), в противном случае — удаляем этот класс.

Дальше в дело вступает CSS:

То, есть при наличии такого класа объект станет фиксированным.

Готово. Меню будет фиксироваться только тогда, когда пользователь прокрутит страницу больше, чем на размер экрана. Конечно можно сделать фиксацию меню после того, как пользователь прокрутит страницу на величину самого меню, или на какое-то заране заданное значение.

Фиксируем меню всегда (второй вариант фиксации)

Для этого способа нам просто понадобиться CSS. Мы навсегда зафиксируем меню, и при желании сделаем верхний отступ у body, чтобы при нулевой прокрутке меню не наезжало на остальной контент.

Вот и всё. Надеюсь этот материал поможет вам разобраться в этом вопросе.

Создаем фиксированное меню при прокрутке страницы для сайта WordPress

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! В этой статье я постараюсь подробно и в полном объеме информировать вас, как зафиксировать верхнее меню сайта, работающего на движке WordPress. Такая плавающая панель с оглавлением всех важных разделов вебресурса может оказаться весьма важной частью юзабилити (в этом материале о понятии usability). Она будет постоянно находится перед глазами пользователя даже в том случае, если он прокручивает страницу.

Оглавление

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

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

Как сделать плавающее меню на Вордпрессе силами CSS

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

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

То есть, я расположил (вырезал и вставил) содержимое, находящееся между открывающим и закрывающим тегами HEADER, в состав которого входит и фрагмент кода между HTML тегами NAV, сразу после тега BODY в шаблоне HEADER.PHP.

Подобным образом можно редактировать любые шаблоны, хотя, конечно, возможны и нюансы. Хорошо уже то, что вы имеете представление, где копать. Единственное, вместо навигационного тега NAV у вас может присутствовать стандартный контейнер DIV с прописанными классами и идентификаторами (ID), скажем такими:

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

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

Теперь для фиксации менюшки воспользуемся таким полезным свойством как position fixed. которое и позволяет закрепить меню в верхнем положении. Причем привязываем его к классу или ID контейнера. в который заключено меню (смотрите предыдущий скриншот). В моем случае это NAV и принадлежащий ему class main-navigation. Я добавил к нему выше упомянутое свойство в файле STYLE.CSS:

Напомню, что классы обозначаются в файлах стилей с точкой впереди, а селекторы ID с решеткой (пример: #site-navigation). Далее мне захотелось, чтобы менюшка располагалась по длине шапки, а не во всю ширину области просмотра, поэтому я проставил такое CSS правило для того же класса:

Чтобы части навигационного блока не прятались за некоторыми элементами (например, за рекламными объявлениями Адсенс) при прокрутке страницы, пришлось указать z-index к классу main-navigation с параметром 1000:

Таким образом, полный комплект правил для фиксированного меню данного блога будет таким:

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

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

Конечно, для каждой конкретной темы придется проработать некоторые детали. Но, думаю, это не будет большой проблемой. Тем более, что есть прекрасные инструменты разработчика, позволяющие экспериментировать со стилевыми свойствами и кодом HTML во всех современных браузерах.

Все эти средства являются аналогами известного расширения Firebug для браузера Firefox (в этой статье об этом плагине можете найти подробный материал). Кстати, в новейших версиях Мазилы подобный инструмент уже встроен и вызывается простым нажатием клавиши F12. То же самое можно сказать и о других популярных обозревателях.

Скажем, в Хроме и Интернет Эксплорере средство разработчика также активируется с помощью F12, в Опере же посредством комбинации Ctrl+Shift+I (либо выбором из главного выпадающего меню «Разработка» - «Инструменты разработчика»). В общем, используйте эту возможность, чтобы не только сэкономить свое время, но и получить весьма ценные практические навыки в редактировании кода вебстраниц сайта.

Создание фиксированного меню при помощи скрипта

Теперь посмотрим, как можно элегантно закрепить менюшку с помощью небольшого кода JavaScript, собственно решение я подсмотрел на этой страничке. Причем зафиксировать меню таким образом можно при любом его расположении относительно шапки сайта (снизу или сверху).

Для того, чтобы применить данный метод, прежде необходимо подключить библиотеку jQuery. С этой целью достаточно прописать в том же файле HEADER.PHP между закрывающим и открывающим тегами HEAD вот такую строчку:

Обо всех случаях использования jQuery, в том числе при реализации технологий Ajax, мы будем говорить в дальнейшем подробнее, ну а сейчас просто примите это к сведению. Итак, ниже разберем варианты того, как зафиксировать горизонтальное меню, расположенное вверху от шапки и непосредственно под ней.

Плавающее верхнее меню над шапкой сайта

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

Данную функцию в общем виде я проанализировал (ненавижу делать то, чего не понимаю, хотя в программировании я нуб) и его немного подкорректировал под свои нужды. Далее озвучу результаты своего анализа. Эта функция контролирует скроллинг (прокрутку) страницы в области окна просмотра. Код можно интерпретировать следующим образом.

Если вы прокручиваете страницу на расстояние, меньшее 0 пикселов, то элемент с классом .main-navigation получает свойство CSS с относительным позиционированием, которое определяется значением relative и отступом от верха 0px:

По прописанным здесь условиям position relative определяет расположение меню относительно верхнего края окна просмотра, расстояние до которого равно 0 (top:0). Ежели страница прокручивается на расстояние, равное или большее 0px, то элемент фиксируется (position fixed).

Как вы понимаете, технически прокрутка на отрицательную величину технически бессмысленна, поэтому на деле панели навигации сразу присваиваются значения (top: '0', position: 'fixed'), с помощью которых она намертво фиксируется с отступом от верхнего края в 0 пикселов. Конечно, в условии данной функции можно регулировать величину отступа навигационной панели от верха (top) при относительном и фиксированном позиционировании, проставив вместо 0 другое значение:

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

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

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

1. Использовать для этого файл с расширением .js, который имеется в большинстве тем (/wp-content/themes/ваша_тема). Если он изначально отсутствует, то его можно создать. Надо иметь ввиду, что для его активации необходимо прописать код вызова функции, который может выглядеть примерно таким образом:

2. Также можно вставить непосредственно данный код в тот же шаблон HEADER.PHP между открывающим и закрывающим HEAD, обрамив его тегами SCRIPT:

3. Кроме всего прочего, вполне возможно разместить данный скрипт и в других местах, например, в шаблоне FOOTER.PHP прямо перед закрывающим тегом BODY. Просто нужно обеспечить его подгрузку с нужными вебстраницами вашего вебресурса и желательно так, чтобы уменьшить нагрузку на сервер хостинга.

Фиксированное горизонтальное меню под шапкой вебсайта

Изначально на Goldbusinessnet.com в данной теме также было реализовано горизонтальное меню под баннером хидера. Для закрепления менюшки при реализации этого варианта фрагмент, отвечающий за вывод панели навигации, в шаблоне HEADER.PHP также должен располагаться ниже куска кода, выводящего изображение шапки:

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

Попробую и здесь объяснить поподробнее в меру своих способностей. Если страница прокручивается на расстояние, меньшее 100px, то элементу (в нашем случае меню) присваивается свойство position relative, которое позиционирует его относительно изображения шапки сайта. Расстояние до хидера определяется с помощью top:0. При прокрутке панель менюшки двигается вместе с другими элементами, включая шапку, вверх:

После того, как вы прокрутили страницу на 100 пикселов (в моем случае это высота шапки) и более, менюшка фиксируется с отступом в 0px уже от верхнего края:

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

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

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

  • средствами css: position: fixed без шапки сайта,
  • коснёмся более интересной реализации вместе с шапкой сайта, когда мы фиксируем только меню при активной прокрутке, оставляя его всегда на виду, но если посетитель возвращается к шапке сайта, то наше меню «становится на своё место». Пример реализации такого подхода Вы можете посмотреть у Yandex а .

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

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

С одной стороны всё просто и легко решается средствами css в два счёта:

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

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

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

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

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

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

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

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

Для начала привёдем полную HTML вёрстку примера макета страницы:

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

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

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

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

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

Поместим следующий javascript между head и /head :

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

А пример реализации Вы можете посмотреть по этой ссылке. и воспользовавшись колёсиком прокрутки.

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

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

В этом варианте мы немножко «тюнинговали» наше меню, и при прокрутке мы добавляем ему полупрозрачности.

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

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

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

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

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

Пример реализации Вы можете посмотреть, перейдя по этой ссылке. и воспользовавшись колёсиком прокрутки.

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

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

Для этого изменим код вызова функции с:

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

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

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

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

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Источники: http://htmler.ru//06/23/fiksiruem-menyu/, http://goldbusinessnet.com/dvizhok-wordpress/sajt-vordpress-fiksirovannoe-plavayushhee-gorizontalnoe-menyu/, http://awesome-design.com/blog/fiksirovannoe-gorizontalnoe-menyu.html






Комментариев пока нет!

Поделитесь своим мнением