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

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

В этом уроке мы покажем вам, как легко создать плавающее меню в вашем блоге WordPress.

Если вы еще не создали веб-сайт или блог на WordPress, мы приглашаем вас проконсультироваться Как установить блог WordPress за 7 шагов далее, Как найти, установить и активировать WordPress тему на своем блоге

Если это будет сделано, давайте разберемся, что нас волнует сегодня.

Метод 1: Как добавить плавающее меню в WordPress с помощью плагина

Этот метод проще и быстрее. Если вы еще не настроили навигационные меню, вы можете научись это делать.

Первое, что вам нужно сделать, это установить и активировать плагин " Sticky меню (или что-нибудь!) Мы Пролистайте ». Если вы не знаете, как установить плагин, вы можете прочитать наш учебник.

После активации необходимо посетить Настройки »Липкое меню Для настройки параметров этого плагина.

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

Вам нужно будет использовать инструмент вашего браузера "inspect", чтобы найти используемый CSS.

Перейдите на свой сайт и наведите курсор мыши на меню навигации. После этого вы должны щелкнуть правой кнопкой мыши и выбрать «Осмотреть».

Идите дальше, открывая для себя Как настроить WordPress тему с желтым карандашом

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

В этом примере CSS-идентификатор нашего меню навигации - « Навигация по сайту .

Идите вперед и введите CSS ID меню в настройках плагина следующим образом: «# site-navigation».

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

После этого вам нужно нажать на поле рядом с опцией: «Проверить панель администратора». Это позволяет плагину добавить место для панели инструментов WordPress, которая добавляется для авторизованных пользователей.

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

Вы можете проверить, как это меню отображается на мобильных и планшетных устройствах. Если вам это не нравится, вы можете добавить 780 пикселей в этот вариант.

Откройте для себя тоже Как создать адаптивное меню для мобильного WordPress

Не забудьте нажать на значок " Сохранить настройки Чтобы сохранить ваши изменения.

Теперь вы можете посетить свой веб-сайт, чтобы увидеть ваше плавающее навигационное меню в действии.

Метод 2: как добавить меню навигации вручную

Этот метод требует добавления пользовательского CSS-кода в вашу тему WordPress.

Прежде всего, вы должны посетить " Внешний вид> Настроить Чтобы запустить настройщик WordPress.

Нажмите ' Дополнительный CSS На левой панели, затем добавьте этот код CSS.

# Навигация сайта {фон: #fff; высота: 60px; Z-индекс: 170; Маржа: 0 авто; граница дна: 1px твердый #dadada; ширина: 100%; Положение: фиксированный; верх: 0; Слева направо: 0; право: 0; выравнивания текста: центр; }

Заменить " # Навигация по сайту По идентификатору вашего навигационного меню нажмите на кнопку « Регистрация .

Теперь вы можете посетить свой веб-сайт, чтобы увидеть ваше плавающее навигационное меню в действии.

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

Это можно легко настроить, добавив поля в область заголовка, используя следующий код:

.Выходные-брендинг {маржа-топ: 60px; }

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

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

1. Меню героя

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

Что касается функций, которые он предлагает среди прочего: отлично функционирует на ПК, планшете и смартфоне, прост в использовании, настраиваемый контент, настраиваемый CSS для добавления собственных стилей меню, дизайнер мега-меню, поддерживаемые браузеры: Chrome, Firefox, Safari , Опера, IE9 и многое другое.

скачать | Демонстрация | веб-хостинг

2. Меню пользователя Slick

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

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

скачать | Демонстрация | веб-хостинг

3. Меню 8Degree Fly

8Degree Fly Menu - это плагин премиум-класса для WordPress, который позволяет вам добавить холст-меню на ваш веб-сайт, чтобы придать ему вид, который легко выделяет вашу информацию. Он использует функцию меню WordPress по умолчанию для создания своих меню.

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

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

• Как добавить стиля к вашему меню навигации
•  Как добавить атрибут заголовка в меню WordPress
• 8 WordPress плагины для создания мегаменю в вашем блоге

Заключение

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

Если у вас есть какие-либо предложения или замечания, они будут приветствоваться. И если вы новичок в WordPress, проконсультируйтесь с этим ресурс.

...  

Блэр Jersyer

Разработчик WordPress, увлеченный всем, что касается новых технологических тенденций. Авторы плагинов, тем WordPress и других веб-приложений. Автор на BlogPasCher.com.

Посмотреть полную биографию