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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Written by: