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

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

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

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

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

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

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

Плагин липкого меню для wordpress

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

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

Плагин липкого меню для wordpress

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

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

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

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

Изучите учебный код wordpress

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

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

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

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

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

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

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

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

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

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

Wordpress плавающее меню

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

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

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

Дополнительный настройщик css wordpress

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

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

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

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

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

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

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

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

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

1. Меню героя

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

Плагин для мега-меню на WordPress

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

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

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

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

Гладкое меню, адаптивное вертикальное меню WordPress

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

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

3. Меню 8Degree Fly

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

8degree fly menu реагирует на плагин меню меню для WordPress

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

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

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

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

Заключение

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

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

...