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

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

Грамотно оформленное фиксированное меню способно улучшить поведенческие характеристики вебсайта, в том числе увеличить количество просматриваемых страниц, например.

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

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

Горизонтальное плавающее меню средствами CSS и HTML

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

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

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

То есть, я расположил (вырезал и вставил) содержимое, находящееся между открывающим и закрывающим тегами header, в состав которого входит и фрагмент кода между HTML тегами <nav> и </nav>, сразу после тега body в шаблоне header.php.

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

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

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

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

Теперь для фиксации меню воспользуемся таким полезным свойством как 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.

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

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

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

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

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

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

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

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

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

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

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

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

$(function(){
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top < 0) $(".main-navigation").css({top: '0', position: 'relative'});
        else $(".main-navigation").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 < 0) $(".main-navigation").css({top: '0', position: 'relative'});
else $(".main-navigation").css({top: '0', position: 'fixed'});

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

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

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

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

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

<script type="text/javascript" src="/wp-content/themes/tiny-forge/site-scripts.js"></script>

2. Также можно вставить данный код непосредственно в тот же шаблон header.php между открывающим и закрывающим head, обрамив его тегами <script>:

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

3. Вполне возможно разместить данный скрипт и в других местах, например, в шаблоне footer.php прямо перед закрывающим тегом </body>. Просто нужно обеспечить его подгрузку с нужными вебстраницами вашего ресурса и желательно так, чтобы нагрузка на сервер была минимальной.

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

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

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

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

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

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

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

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

4 отзыва

  1. Максим

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

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

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

  3. Дмитрий

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

  4. Никита

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

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

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

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