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

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

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

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

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

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

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

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

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

<div id="navi" class="navigation">

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

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

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

position: fixed

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

width: 1110px

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

z-index:1000

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

.main-navigation {
  position: fixed;
  z-index: 1000;
  background: url(/wp-content/themes/tiny-forge/images/menu-background.png) repeat-x;
  width: 1110px;
}

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

img.header-image {margin-top: 30px;}

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

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

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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"</script>

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

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

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

$(function(){
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top &amp;amp;amp;amp;lt; 0) $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'relative'});
        else $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'fixed'});
    });
});

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

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

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

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

if (top &amp;amp;amp;amp;lt; 0) $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'relative'});
else $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'fixed'});

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

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

$(function(){
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0px', position: 'fixed'});
    });
});

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

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

&amp;amp;amp;amp;lt;script type=&amp;amp;amp;amp;quot;text/javascript&amp;amp;amp;amp;quot; src=&amp;amp;amp;amp;quot;/wp-content/themes/tiny-forge/site-scripts.js&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;

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

&amp;amp;amp;amp;lt;script type=&amp;amp;amp;amp;quot;text/javascript&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;
$(function(){
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top &amp;amp;amp;amp;lt; 0) $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'relative'});
        else $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'fixed'});
    });
});
&amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;

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

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

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

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

$(function(){
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top &amp;amp;amp;amp;lt; 100) $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'relative'});
        else $(&amp;amp;amp;amp;quot;.main-navigation&amp;amp;amp;amp;quot;).css({top: '0', position: 'fixed'});
    });
});

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

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

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Создание сайтов

4 отзыва

  1. Максим

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

  2. Игорь Горнов

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

  3. Дмитрий

    Отличный мануал. Спасибо автору. Все четко объяснил

  4. Никита

    Здравствуйте. Когда я прикручиваю jquery пропадают кнопки меню в чем может быть причина?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.