Как создать всплывающее меню на WordPress

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

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

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

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

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

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

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

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

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

Во-первых, необходимо ввести меню навигации пароль CSS вы хотите, чтобы плавать.

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

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

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

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

<Nav ID = «Навигация по сайту» класс = «главной навигации» роль = «навигация»>

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

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

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

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

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

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

Откройте для себя тоже Как создать адаптивное меню для мобильного 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, проконсультируйтесь с этим ресурс.

...