Как сделать фиксированное (плавающее) меню

Здравствуйте, уважаемые друзья. Сегодня я расскажу, как сделать фиксированное меню для сайта. Также это меню называют плавающим.

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

Создать подобное меню довольно легко. Весь секрет заключается в трёх строчках CSS кода.

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

Для начала нужно объяснить, как должна быть организована структура страницы (html – каркас). Тут важно понимать, что фиксированное меню на основе CSS стилей можно реализовать при условии, что меню расположено вверху страницы. В таком случае при прокрутке оно будет неизменно оставаться на своём месте. Если же меню хоть на несколько пикселей смещено вниз или размещено под шапкой, то способ с css-стилями уже не подойдёт.

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

Вот как должна быть организована html структура страницы, для создания фиксированного меню на основе css-стилей.

Схема, конечно, упрощённая. Здесь, всё внимание нужно обратить на расположение меню. В первом варианте, меню расположено в самом верху. Во втором варианте, меню расположено внутри шапки.

Безусловно, многое зависит от общего дизайна сайта, но и в первом, и во втором варианте можно организовать фиксацию меню с помощью css-стилей. Только вот во втором варианте, фиксацию придётся сделать для всей шапки. Это зависит от дизайна.

Следующий важный момент, который вы должны знать и понимать, — все элементы веб-дизайна заключены в отдельные блоки. Это называется — блочная вёрстка. Так вот, меню тоже будет располагаться в отдельном блоке. Для того чтобы каждый блок приобрёл нужный вид (дизайн) им присваивают идентификаторы (id) и классы (class). И через эти id и class задают css-стили.

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

<div id="fixmenu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Об авторе</a></li>
<li><a href="#">О проекте</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>

В системах управления контентом, в том числе и WordPress меню будет создано через php. И выглядеть будет примерно так:

<div id="fixmenu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

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

Обратите внимание, блок ДИВ с идентификатором fixmenu присутствует и в одном и в другом варианте.

Именно к этому блоку, через идентификатор fixmenu нужно присвоить стили css. В вашем случае имя идентификатора или класса будет другим. Поэтому вы будете применять, слили именно к вашим идентификаторам и классам.

Как узнать идентификатор или класс меню

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

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

Присвоение css-стилей

Для этого открываете таблицу стилей (style.css). В WP нужно открыть административную панель – «Внешний вид» – «Редактор» – «Таблица стилей».

В таблицу стилей нужно вставить вот эти стили:

#fixmenu{
position: fixed; /*фиксированное положение*/
z-index: 100; /*ориентация выше всех*/
}

Примечание: вы меняете название идентификатора на своё. Запомните, в css идентификатор обозначается знаком решётки #, а класс, — точкой.

# имя идентификатора

. имя класса

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

Как создать фиксированное меню с помощью jQuery

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

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

Проверка и подключение библиотеки jQuery

Чтобы реализовать такое меню у вас должна быть подключена библиотека jQuery. Прежде чем приступить к подключению библиотеки, нужно проверить, может, она уже подключена в вашем шаблоне.

Для этого откройте исходный код сайта. Сделать это можно комбинацией клавиш CTRL+U. И поищите в нём, между тегами <head>…</head>, строчки кода в которых упоминается jquery.min.js или jquery.js.

Если таких строк вы не нашли, то перед закрытием тега ХЕД </head> вставьте вот этот код:

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

Подключение скрипта – обработчика (меню без изменений прилипает к верхнему краю)

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

Я предпочитаю использовать второй вариант.

Подключать скрипт нужно либо в файле заголовка (header.php), между тегами <head>…</head>, либо в файле подвала (footer.php), пред закрытием тега БОДИ </body>.

Если, решите вставлять код скрипта целиком, используйте вот такую структуру:

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

Только обязательно измените, параметры подлежащие изменению, выделены оранжевым цветом.

top < 150 – высота шапки + расстояние до верхней границы окна.

#fixmenu – идентификатор меню.

Также к параметрам top: '0', position: 'fixed', может потребоваться добавить z-index: '100', если меню при прокрутке будет уходить под другие элементы дизайна.

Если, решите подключать скрипт чрез файл, используйте вот эту структуру:

<script src="ПУТЬ К ФАЙЛУ/fixmenu.js" type="text/javascript"></script>

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

Кстати, в WordPress, вы можете использовать и вот такой код для вставки:

<script src="<?php echo get_template_directory_uri(); ?>/js/fixmenu.js" type="text/javascript"></script>

В этом примере, код сам определит путь к файлу, если он находится в папке темы/папке JS.

Если вы всё правильно изменили под свои параметры, значит, у вас всё должно получиться. При прокрутке, меню прилипнет к верхнему краю окна.

Подключение скрипта – обработчика (меню фиксируется по верхнему краю и расширяется на всю ширину)

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

И для решения этой задачи тоже подойдёт данный скрипт, только с небольшими добавлениями в css – стили.

Подключение сприпта осуществляется так же, как я описал чуть выше.

В самом же коде скрипта добавятся два обязательных стиля и один дополнительный.

$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 150) $("#fixmenu").css({top: '0', position: 'relative'});
else $("#fixmenu").css({top: '0', left: '0', position: 'fixed', width:'100%', background: 'none repeat scroll 0% 0% rgba(9, 125, 240, 0.7)'});
});
});

Обязательные стили:

left: ‘0’ – отступ слева;

width:’100%’ – выравнивание по ширине;

Дополнительные стили:

background: ‘none repeat scroll 0% 0% rgba(9, 125, 240, 0.7)’ – цвет и прозрачность фона.

Дополнительный стиль вы можете не подключать, это по желанию.

Вот таким образом, можно создать фиксированное меню. Выбирайте подходящий вам способ и применяйте на практике.

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

Все исходные материалы, которые я создал при подготовке к статье, вы можете скачать здесь.

На сегодня у меня всё, жду ваших комментариев. И конечно же, до встречи в новых видеоуроках и статьях.

С уважением, Максим Зайцев.