Добавляем плавающее меню в WordPress

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

Шаг 1: Добавляем новую область меню в functions.php

Первым делом вам нужно существующее меню, чтобы отображать его на странице. Давайте создадим новое под названием ‘topnavigation‘. Вот самый простой код установки этого меню в вашем файле functions.php:

register_nav_menus( array(
    'topnavigation' => __( 'Top Navigation', 'ЗДЕСЬ НАЗВАНИЕ ВАШЕЙ ТЕМЫ' )
) );

Если же у вас уже есть функция register_nav_menus, добавьте в нее строку меню ‘topnavigation‘.

Шаг 2: Заполняем наше меню

Переходим в админку сайта, открываем вкладку Меню. Создаем новое меню и назначим его той области, которую мы только что назвали ‘Top Navigation’. Затем накидываем в это меню страницы. Достаточно будет четырех, например Главная, Магазин, События, Блок.

Шаг 3: Вызываем меню

Необходимо вызвать ваше меню вверху body в файле header.php. Важно обернуть это меню в div на ваш выбор. Мы выбрали div под названием topnavigation. Нам он понадобится чуть позже. Это самый простой способ реализации.

Используем следующий код в header.php:

<div id="topnavigation">
    <?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?>
</div>

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

Конечно, ваша тема будет отличаться.

Шаг 4: Давайте оформим меню в style.css

Теперь мы можем приступить к визуальному оформлению. Чтобы мы видели, что мы делаем, давайте начнем с добавления небольшого кода CSS и зададим фоновый цвет, а также зададим 100% ширины, чтобы меню не смотрелось «странно».

Используем следующий код в style.css или в том файле, где у вас основная таблица стилей:

#topnavigation {
    width: 100%;
    background-color: #999;
}

Обновите страницу и увидите:

Шаг 5: Размещаем меню по центру

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

<div id="topnavigation">
    <nav><?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?></nav>
</div>

Затем нужно оформить наш новый nav стилями. Можно сделать так:

#topnavigation nav {
    width: 940px; //ширина вашего контейнера div может отличаться
    margin: 0 auto;
}

#topnavigation li {
    display: inline;
    padding: 10px;
    margin: 20px 0;
}

Эти два действия вместе приведут к следующему виду наше меню:

Шаг 6: Фиксируем меню для прокручивания за страницей

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

Обновите ваш стиль #topnavigation следующим образом:

#topnavigation {
    width: 100%;
    background-color: #999;
    position: fixed; // Пристыковываем его к верхней части окна
    z-index: 1; //Делаем его отображаемым поверх всех элементов
    height: 50px; //Назначает точку отсчета отображения
}

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

Для решения этой проблемы добавляем отступ от верха контейнера div со всеми элементами внутри. В нашем шаблоне этот div называется #page. Поэтому мы добавим следующее в наш файл CSS:

#page {
    padding-top: 60px; //Высота нашего div topnavigation плюс немного дополнительного отступа для визуальной эстетики

}

Вот что получится в итоге:

Можете настраивать код в CSS под свои нужды и эстетические предпочтения.

Надеемся, что эта статья помогла вам создать плавающее «следящее» меню в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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