Создание раскрывающихся меню — Поддержка
Раскрывающееся меню, или подменю, включает дополнительные элементы, список которых раскрывается при наведении курсора или щелчке меню. Подменю позволяет сделать меню более удобным и структурированным. В этом руководстве показано, как создавать выпадающее меню.
📌
Чтобы понять, какой раздел данного руководства использовать, перейдите в консоль и проверьте раздел Внешний вид слева. Если отображается элемент Редактор, используйте раздел Редактор сайта данного руководства. В ином случае используйте инструкции в разделе Консоль или Конфигуратор.
В этом руководстве
Создание раскрывающегося меню в редакторе сайтов
Если вы используете одну из этих тем, то у вас есть доступ к редактору сайта, с помощью которого можно изменять любые элементы сайта из единого расположения. Для редактирования меню на сайте выполните следующие действия.
- На консоли перейдите в раздел Внешний вид → Редактор.
- Откройте Представление списка в верхнем левом углу экрана (значок, состоящий из трех горизонтальных линий одна над другой).
- Найдите Блок навигации (он может быть вложен внутри других блоков, например «Заголовок», «Группа» или «Строка»).
- Щелкните элемент меню, который вы хотите преобразовать в раскрывающийся список.
- Над элементом меню появится панель инструментов, на которой вы найдете кнопку Добавить подменю (значок выглядит как изогнутая стрелка с тремя горизонтальными линиями рядом с ней).
- Нажмите кнопку Добавить подменю на панели инструментов, чтобы преобразовать этот элемент меню в раскрывающееся меню.
- Щелкните отобразившийся значок +, чтобы добавить новые ссылки к раскрывающемуся меню.
Обучающее видео
Добавление элемента раскрывающегося меню в редакторе сайтаДобавление элемента меню без ссылки (редактор сайтов)
Вы можете создать неинтерактивный элемент меню, что полезно при создании раскрывающихся меню.
- На консоли перейдите в раздел Внешний вид → Редактор.
- Откройте Представление списка в верхнем левом углу экрана (значок, состоящий из трех горизонтальных линий одна над другой).
- Найдите Блок навигации (он может быть вложен внутри других блоков, например «Заголовок», «Группа» или «Строка»).
- Щелкните элемент меню, который вы хотите преобразовать в неинтерактивную ссылку, или добавьте новый элемент меню.
- Над элементом меню появится панель инструментов, на которой находится кнопка Ссылка (значок выглядит буквально как звено цепи).
- Отредактируйте ссылку, нажав на значок карандаша.
- В поле URL-адрес добавьте только символ #, как на изображении справа.
- На клавиатуре нажмите клавишу ВВОД/Return, чтобы отправить изменения.
Процесс показан на GIF-файле ниже:
Чтобы создать элемент меню без ссылки, добавьте символ # в поле «URL-адрес».
Создание раскрывающегося меню в WP Admin
Для создания выпадающих меню на консоли WP Admin выберите Внешний вид → Меню. Вы можете перетаскивать элементы в меню, чтобы изменить порядок элементов в нем.
Для создания раскрывающихся меню перетащите отдельные элементы на правую сторону и разместите их под элементом непосредственно над ним.
Вы можете отменить это действие, перетащив элементы меню влево. Когда закончите, выберите Меню «Сохранить».
Создание раскрывающегося меню в конфигураторе
Чтобы создать раскрывающееся меню в конфигураторе, выполните следующие действия:
- Добавьте все элементы меню, которые нужны в меню на сайте.
- Нажмите кнопку Изменить порядок под элементами меню.
- Нажмите стрелку вправо >, чтобы поместить страницу под страницей выше, создав элемент выпадающего меню.
- После завершения работы с выпадающим меню нажмите Готово.
- Нажмите Сохранить изменения, чтобы опубликовать изменения на сайте.
Обучающее видео
Добавление элемента меню без ссылки (конфигуратор)
- Перейдите в раздел Внешний вид → Настроить → Меню.
- Выберите меню.
- Нажмите Добавить элементы.
- Выберите опцию Пользовательские ссылки.
- В поле URL-адрес введите символ #, как показано на изображении справа.
- В поле Текст ссылки введите текст, который должен отображаться в меню, как показано на изображении справа.
- Нажмите Добавить в меню.
- Нажмите Сохранить изменения.
Далее: изменение порядка элементов меню.
Ваша оценка:
Плагины для WordPress. Липкое меню
Очень удобно, когда во время прокрутки сайта наверху экрана всегда остается основное меню. Это удобно пользователю, поскольку навигация по сайту всегда на виду и не приходится прокручивать страницу вверх при необходимости. Это также полезно для владельца сайта, поскольку такая функция помогает избежать лишних действий пользователя. Таким образом, пользователю удобнее пользоваться сайтом и, соответственно, увеличивается конверсия. Получается такая небольшая стратегия win-win, когда все выигрывают от одной опции.
В этой статье речь пойдет о плагинах, которые позволяют создать такое липкое меню на сайте. По сути речь тут пойдет о двух плагинах.
Это самые распространенные плагины для WordPress. Если вы введете в строке поиска репозитории WordPress фразу sticky menu, то они будут в первых позициях выдачи. По сути, функционал этих плагинов одинаковый, однако они могут по-разному работать на разных темах. Поэтому, если какой-то один из них работает на вашей теме не корректно, то имеет смысл установить другой. А теперь перейдем непосредственно к обзору плагинов.
myStickymenu
Первый в моем списке идет плагин myStickymenu. После его установки и активации мы сразу же переходим в раздел настроек плагина. В первой секции настроек указывается Липкий класс. Плагин автоматически определяет класс шапки сайта и делает ее липкой по умолчанию. При клике на соответствующее всплывающее окно можно выбрать любое меню, которое сохранено на сайте и задать его липким. Также можно ввести селектор любого элемента, которого требуется прилепить. Как найти этот параметр и вставить его в настройки плагина я расскажу ниже в обзоре следующего плагина.
В следующем разделе настроек можно управлять следующими параметрами:
Настройки плагина myStickymenu— Установить z-index липкого меню, который определяет его положение поверх других элементов сайта.
— Эффект затухания или скольжения – выбор анимации появления липкого меню.
— Отключить на экранах маленьких размеров – эта опция позволяет отключить липкое меню на мобильных устройствах.
— Сделать видимым при прокрутке, сделать видимым при прокрутке на главной странице – я не понял, как работают эти параметры и работают ли они вообще. При их изменении на сайте ничего не менялось.
— Липкий цвет фона – установка цвета фона липкого меню
— Время липкого перехода – изменение времени задержки появления липкого меню.
— Sticky Text Color – установка цвета текста липкого объекта.
— Липкая непрозрачность – ползунок, который регулирует степень прозрачности липкого объекта.
Это все настройки бесплатной версии, которых, впрочем, вполне хватает для среднестатистического сайта.
Ниже есть блок настроек, который доступен в платной версии PRO, где можно отключить залипание при прокрутке вниз, задать свой CSS стиль и отключить липкость на определенных страницах.
Отличительной особенностью этого плагина является возможность создания дополнительной липкой панели, где можно разместить важную информацию, акции и пр. В настройках плагина он выведен под отдельную закладку Welcome Bar. Следует отметить, что набор параметров для этой панели весьма разнообразен.
Sticky Menu, Sticky Header (or anything!) on Scroll
Следующий плагин для создания липкого меню называется Sticky Menu, Sticky Header (or anything!) on Scroll. Он имеет схожий функционал, что и вышеописанный плагин, однако, в бесплатной версии доступно меньше настроек. Например, такие параметры, как прозрачность липкого элемента и эффект появления доступны только в версии Pro.
Настройки плагина Sticky Menu, Sticky Header (or anything!) on ScrollТакже после установки плагин не подхватывает шапку сайта.
Селектор липкого элемента нужно вписать в первом поле настроек — Sticky Element.
Для того, чтобы узнать селектор нужного элемента, нужно открыть инспектор в браузере, нажав F12 или Fn+F12. После того, как откроется инспектор, нужно выбрать нужный элемент, нажав на стрелочку в левом верхнем углу панели инспектора или Ctr+Shift+C и навести курсор на элемент. После этого в инспекторе выделится соответствующая строка кода, например, page-header, нужно кликнуть по нему правой кнопкой мыши и скопировать CSS-селектор. Затем вставляем скопированный селектор в поле Sticky Element.
Сохраняем настройки и нужный элемент прилип.
Ocean Stick Anything
И в конце еще один плагин, который может быть удобен тем, кто использует тему OceanWP. Он является дополнением к этой теме и называется Ocean Stick Anything.
Настройки плагина Ocean Stick AnythingОн очень простой и имеет в настройках по сути всего два параметра – поле для ввода селектора липкого элемента и отключение на мобильных устройствах.
По моему опыту этого достаточно, чтобы найти оптимальный способ создания липкого меню на вашем сайте.
6 лучших плагинов меню WordPress в 2023 году (и как их выбрать)
Навигация по сайту — важная часть любого веб-сайта. Ваши меню покажут вашим клиентам и посетителям лучший способ получить необходимую им информацию с вашего сайта. Мы пошли дальше и составили для вас список лучших плагинов меню WordPress. У нас есть конструкторы с возможностью перетаскивания, панели с индивидуальным дизайном и многое другое. Эти плагины меню помогут вам создать простую для понимания навигацию для посетителей вашего сайта.
- 1 Что такое плагины меню WordPress?
- 2
Лучшие плагины меню WordPress
- 2.1 1. Адаптивное меню
- 2.2 2. Мобильное меню WP
- 2.3 3. WP Мега Меню Pro
- 2,4 4. Макс Мега Меню
- 2,5 5. ДивиМеню
- 2,6 6. Уберменю
- 3
Сравнение всех лучших плагинов меню
- 3. 1
Сравнение цен плагинов меню
- 3.2 Сравнение функций плагина меню
- 3.
- 4 Какой лучший плагин меню WordPress?
- 5 Часто задаваемые вопросы о плагине меню WordPress
1
Сравнение цен плагинов менюЧто такое плагины меню WordPress?
На рынке существует множество плагинов меню WordPress (даже некоторые для хлебных крошек). Некоторые специализируются на определенных типах меню, в то время как другие предлагают широкий выбор вариантов. Но некоторые основные функции, которые вы можете ожидать от плагинов меню и навигации:
- Мегаменю : это выпадающие меню, которые предлагают несколько уровней навигации, предоставляя вашим посетителям лучшее понимание структуры и содержания вашего веб-сайта.
- Прикрепленные меню : Эти меню прикрепляются к верхней части страницы, обеспечивая их постоянную видимость, даже когда посетители прокручивают страницу вниз.
- Пользовательские значки : С помощью пользовательских значков вы можете сделать свое меню более привлекательным и узнаваемым.
- Интеграция корзины электронной коммерции : Если у вас есть веб-сайт электронной коммерции, интеграция вашей корзины в ваше меню может упростить клиентам доступ к своим заказам и управление ими.
- Конструктор с функцией перетаскивания : Эта функция позволяет быстро и легко создавать и переупорядочивать элементы меню, не требуя навыков программирования.
Знание собственных потребностей и того, что не подлежит обсуждению, поможет выбрать для себя правильное решение. Несмотря на это, плагин меню — отличная альтернатива созданию базовых меню WordPress или редактированию заголовка WordPress с нуля.
Лучшие плагины меню WordPress
Лучшие плагины меню WordPress, перечисленные в порядке
- Адаптивное меню
- WP Mobile Menu
- WP Mega Menu Pro
- Max Mega Menu
- DiviMenus
- Ubermenu
1.
Адаптивное менюЕсли вы хотите обновить систему навигации вашего веб-сайта WordPress, Responsive Menu — популярный плагин, на который стоит обратить внимание. Плагин предлагает широкий спектр параметров настройки, даже в бесплатной версии, и позволяет пользователям создавать визуально впечатляющие меню, которые хорошо работают на всех устройствах. Оптимизированный процесс создания меню плагина упрощает его использование даже для новичков в WordPress. И из-за того, что он ориентирован на мобильный дизайн, это один из лучших мобильных плагинов.
Ключевые особенности адаптивного меню:
- 150 вариантов настройки для идеального меню с
- Отключить фоновую прокрутку содержимого при открытом меню
- W3C уделяет особое внимание доступности и совместимости на нескольких устройствах для обеспечения соответствия
- Полностью настраиваемый и интегрированный поиск
- Интеграция с WPML/Polylang
Визуальный интерфейс перетаскивания позволяет настроить мобильное меню всего за несколько кликов.
Вы можете персонализировать такие элементы, как фоновое изображение, заголовок, панель поиска и логотип, а также управлять внешним видом элементов подменю и устанавливать мобильные точки останова, что позволяет настраивать меню в зависимости от размера экрана ваших пользователей.
Адаптивное меню для вас, если вы…
- Хотите иметь возможность визуального редактирования меню, чтобы настроить свое меню с помощью элементов и дизайна, которые вам нужны
- Требуется полностью адаптивное меню, которое хорошо выглядит на мобильных устройствах
Цена: От 49 долларов в год
Получить адаптивное меню
2. Мобильное меню WP
Если вы хотите улучшить мобильное меню своего веб-сайта, чтобы повысить производительность и удобство для пользователей, WP Mobile Menu — отличный вариант. Поскольку мобильный трафик увеличивается с каждым годом, крайне важно оптимизировать работу мобильных пользователей.
И эта оптимизация начинается сверху с заголовка вашего сайта и меню навигации. У этого плагина есть бесплатная версия, премиум-версия и премиум-версия плагина для магазинов электронной коммерции, использующих WooCommerce.
Ключевые особенности мобильного меню WP:
- Создайте меню навигации до 3 уровней в глубину
- Специальные инструменты WooCommerce для повышения конверсии продукта
- Установить условные правила для отображения альтернативных меню
- Полный контроль над компоновкой меню и адаптивной конфигурацией
- Хорошие основные функции, такие как (шрифты Google, типы отображения слайдов и push-уведомлений, голый заголовок и многое другое)
С плагином WP Mobile Menu у вас есть полный контроль над внешним видом вашего мобильного меню на вашем сайте WordPress. В дополнение к решению, будет ли мобильное меню отображаться в левой или правой части экрана, вы можете настроить его общий вид. Он специально создан, чтобы предложить вам возможность создавать мобильное адаптивное меню с настраиваемыми точками останова.
WP Mobile Menu для вас, если вы…
- Требуются дополнительные настройки для отображения и загрузки элементов
- Не обращайте внимания на невизуальный интерфейс редактирования
- Нужны инструменты электронной коммерции, встроенные в ваше меню
Цена: Бесплатно; Платные планы от 77,88 долларов в год (или 8,99 в месяц)
Получить мобильное меню WP
3. Мега меню WP Pro
WP Mega Menu Pro — еще один отличный плагин с визуальным редактором меню WordPress. Удивительный визуальный конструктор этого инструмента позволяет вам легко создавать мегаменю с помощью простой системы перетаскивания, даже если вы не знаете, как программировать. Он позволяет легко создавать расширенные навигационные элементы и развертывать их по своему усмотрению.
Ключевые особенности для WP Mega Menu:
- Макеты на основе строк и столбцов или сетки
- Готовый виджет для еще большей функциональности
- Простое добавление логотипов компании и элементов социальных сетей
- Интегрировано с Font Awesome и Dashicons
- Удобное автосохранение, чтобы вы никогда не потеряли свою работу
- Поддержка WooCommerce для включения пользовательских дисплеев продуктов, пользовательских значков корзины и многого другого.
Конструктор перетаскивания является одной из ключевых функций плагина WordPress Mega Menu, который позволяет легко создавать сложные многоуровневые меню без необходимости написания кода. Затем вы можете перетаскивать эти элементы, чтобы создать иерархию пунктов меню с несколькими уровнями подменю, если это необходимо. Это позволяет создавать очень сложные и структурированные меню, идеально подходящие для больших веб-сайтов с большим количеством контента.
Встроенная интеграция с WooCommerce позволяет создавать красивые мегаменю для отображения продуктов с помощью значка меню корзины со счетчиком товаров.
WP Mega Menu для вас, если вы…
- Хотите недорогой конструктор меню с визуальным редактированием
- Используйте другие продукты Themeum, такие как Qubely или TutorLMS
- Требуется решение, совместимое с виджетами WordPress
Цена: От 29 долларов в год
Получить мегаменю WP
4.
Максимальное мега менюMax Mega Menu — это бесплатный плагин меню, который заменяет существующее меню вашей темы WordPress на более настраиваемое. Это позволяет вам легко изменять внешний вид навигации и меню вашего веб-сайта. Он предлагает множество вариантов настройки и конструктор перетаскивания, который позволяет легко создавать мобильные мегаменю для любого веб-сайта. Этот плагин подходит для всех типов пользователей WordPress, независимо от их опыта работы с WordPress или кодирования.
Ключевые особенности Max Mega Menu:
- Легкий плагин с возможностью настройки нескольких мест меню
- Редактор перетаскивания для изменения порядка элементов и добавления виджетов
- Поддерживает адаптивные меню и сенсорные меню
- Создание горизонтальных мегаменю и липких меню
- Интеграция WooCommerce и Easy Digital Downloads для отображения итогов корзины
- Более 100 вариантов настройки
Max Mega Menu — это мощный плагин меню, который поставляется со встроенной панелью, которая легко интегрируется с родным конструктором меню WordPress.
Эта функция расширяет функциональные возможности конструктора меню по умолчанию, добавляя более 100 параметров настройки для каждого меню и пункта меню. Эти параметры включают в себя такие функции, как намерение наведения, эффекты, мобильные эффекты и темы, которые позволяют создавать меню, которые одновременно эстетичны и очень функциональны.
Max Mega Menu для вас, если вы…
- Нужен многофункциональный (включая электронную коммерцию) плагин меню
- Хотите что-то, что предоставляет адекватные функции в бесплатной версии
- Нравится его низкая годовая стоимость
Цена: Бесплатно; Платные планы от $29 в год
Получить максимальное мега меню
5. ДивиМеню
DiviMenus — это решение для меню для пользователей темы Divi, которые хотят добавить дополнительную настройку в меню WordPress. Этот плагин Marketplace имеет более 4000 покупок и получил высокую оценку. Это лучшее из Divi и расширенного создания меню, которое может стать вашим.
Основные характеристики DiviMenus:
- Создавайте творческие мегаменю, используя макеты из Divi Libray в вашем меню
- Корзина покупок и интеграция с электронной коммерцией
- Создавайте умные круглые меню с текстом и/или изображениями при наведении
- Создать вертикальное меню для отображения текста и/или изображений при наведении
- Создание временной шкалы или меню процессов
- Встроенные опции для различных типов анимационных эффектов
Модуль DiviMenus может создавать креативные отображения меню в различных формах, используя ваши меню WordPress. Плагин позволяет изменять различные атрибуты, такие как выравнивание, метки, границы и т. д., для создания уникального меню, отвечающего вашим конкретным требованиям к дизайну. Кроме того, вы можете использовать бесчисленное количество меню различными способами на своем сайте, чтобы повысить вовлеченность контента.
DiviMenus для вас, если вы…
- Любите тему Divi, но хотите еще больше свободы для творчества
- Есть идеи, выходящие за рамки типичного меню с заголовками
Цена: 49 долларов США в год
Получить DiviMenus
6.
УберменюUberMenu — популярный инструмент CodeCanyon для создания надежных меню в WordPress. Нам особенно нравятся функции динамического содержимого меню, которые могут добавлять элементы меню на основе нового контента, добавленного на ваш веб-сайт.
Ключевые особенности Ubermenu:
- Адаптивный и оптимизированный для мобильных устройств с сенсорным интерфейсом
- Расширенные макеты мегаменю
- Легко добавляйте изображения в элементы навигации мегаменю
- Настраиваемое меню магазина для демонстрации товаров
- Динамически строит элементы подменю
- Расширенные вкладки для большого содержимого подменю
- Пользовательские значки для элементов навигации
UberMenu имеет высокий рейтинг (более 4 000 отзывов с 4,5+ звездами) и низкий срок службы.
Цена: $26 LTD
Получить Уберменю
Сравнение всех лучших плагинов меню
При обновлении вашего меню WordPress важно учитывать все лучшие плагины, чтобы это произошло.
В этом последнем разделе мы рассмотрим широкое сравнение плагинов верхнего меню, начиная со сравнения цен.
Сравнение цен на плагин меню
Здесь представлено несколько отличных вариантов, и большинство из них по очень разумной цене. И половина из них поставляется с бесплатными версиями, чтобы опробовать ограниченный набор функций.
Сравнение функций плагина меню
Когда вам нужно полагаться на плагин меню, вы должны знать, что он предлагает. Вот разбивка некоторых популярных функций в трех лучших плагинах меню.
| 🥇 Адаптивное меню | 🥈 WP Mobile Menu | 🥉 WP Mega Menu | |
|---|---|---|---|
| Начальная цена | 49 долларов США в год | 77,88 долларов США в год | 29 долларов США в год |
| Конструктор меню перетаскивания | ✔️ | ✔️ | ✔️ |
| Адаптивный дизайн | ✔️ | ✔️ | ✔️ |
| Неограниченное количество вариантов оформления | ✔️ | ✔️ | ✔️ |
| Виджеты расширенных функций | ❌ | ✔️ | ✔️ |
| Опция центрирования логотипа | ✔️ | ❌ | ✔️ |
| Социальные связи | ❌ | ✔️ | ❌ |
| Расширенная поддержка значков | ✔️ | ✔️ | ✔️ |
| Сенсорные жесты | ✔️ | ❌ | ❌ |
| Заголовок | ✔️ | ✔️ | ❌ |
| Работает с любой темой | ✔️ | ✔️ | ✔️ |
| Активные установки | 100 000+ | 100 000+ | 20 000+ |
| Рейтинг сообщества | 4. 5/5 ⭐⭐⭐⭐⭐ Читать отзывы | 4.8/5 ⭐ ⭐⭐⭐⭐ Читать отзывы | Неизвестно |
| Получить адаптивное меню | Получить меню WP Mobile | Получить меню WP Mega |
Какой лучший плагин меню WordPress?
Responsive Menu — лучший выбор для мобильных меню WordPress из-за его мощных функций дизайна, ориентированных на мобильные устройства. Но если вам нужно настраиваемое мегаменю с широким набором функций и простым в создании, вы не ошибетесь, выбрав WP Mega Menu.
Для всех наших пользователей Divi, которые ищут мощное комплексное решение меню, DiviMenus трудно превзойти. Мы действительно думаем, что вам понравится, как и многим другим. Мы надеемся, что эти предложения помогут вам обновить меню вашего веб-сайта.
Часто задаваемые вопросы о плагине меню WordPress
Ищете дополнительные плагины? Ознакомьтесь со всей нашей коллекцией лучших плагинов для WordPress
Избранное изображение Лауритты / Shutterstock.
com
10 лучших плагинов меню WordPress для сайта WordPress
Опубликовано
Ищете эффективный плагин меню WordPress? Строка меню веб-сайта оказывается очень полезной, чтобы быть источником увлечения для посетителей. Он также используется для отображения контента в очень систематическом порядке. Но иметь типичное меню не всегда интересно. Поэтому вам может потребоваться добавить несколько привлекательных компонентов на ваш сайт, чтобы сделать его более интересным.
К счастью, для WordPress доступно несколько плагинов меню. Эти плагины предоставят вам широкие возможности настройки и элегантные дисплеи, которые также послужат ориентиром для вашего веб-сайта. В этой статье мы представим 10 лучших плагинов меню WordPress в 2023 году.
Лучшие плагины меню WordPress — сравнительная таблица 2023
Важность включения меню в веб-сайт WordPress?
Почему вы не должны использовать меню по умолчанию?
Лучшие плагины меню WordPress
1.
Адаптивное меню WP
2. Квадроменю
3. Убер-меню
4. Адаптивное меню
5. Макс Мега Меню
6. Мега меню WP
Другие 4 лучших плагина меню WordPress
Заключение
Часто задаваемые вопросы о плагине меню WordPress
Если вы спешите, вот краткая сравнительная таблица лучших плагинов меню WordPress, которые вы можете проверить.
| Плагины меню WordPress | Версия Pro начинается с | Бесплатная версия | Активные установки | Средний рейтинг WordPress.org из 5 |
|---|---|---|---|---|
| Адаптивное меню WP | $ 35 (пожизненно) | 50 000+ | 4,2 | |
| Quad Menu | 49 долларов США (пожизненно) | 20 000+ | 4. |