Выпадающее вертикальное меню wordpress: Раскрывающееся вертикальное меню в WordPress (на CSS и Javascript)

Создание вертикального меню в WordPress

Здравствуйте уважаемые будущие веб-мастера. Продолжаем изучать Консоль WordPress

В Консоли WP можно создать меню, которое будет отображаться в боковой колонке Вашего сайта.

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

Для того чтоб было чем наполнить меню, нужно создать рубрики. Заходим в Панель инструментов — записи — рубрики.

Здесь, под строкой «Добавить рубрику», расположено несколько полей для заполнения. В первом поле нужно прописать название рубрики, именно оно будет отображаться в меню.

Во втором, прописывается то же название, только английскими буквами. Например, если в первом написано «Рубрика», то во втором надо написать «rubrika».

Третье и четвертое поля не обязательны для заполнения, хотя по советам бывалых, четвёртое поле (описание), очень положительно влияет на продвижение сайта в поисковых запросах, так что в него можно внести краткое описание того о чём данная рубрика.

Затем нажимаем кнопку «Добавить новую рубрику», и она появляется в списке в поле справа, а поля «Добавить рубрику» освобождаются для новых записей. Вот таким образом нужно создать все рубрики, которые будут в Вашем сайте.

Хотя, что это я говорю «все». Рубрики всегда можно добавлять, убирать, и редактировать названия, а так же добавлять и убирать их из меню. Так что создайте несколько рубрик, и пойдем смотреть, как делается меню.

Для этого, на панели инструментов заходим в раздел «Дизайн», или у кого-то, может быть, «Внешний вид», и далее «Меню».

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

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

После того, как меню создано, необходимо нажать «Сохранить меню».

Теперь опускаемся по странице вниз до раздела «Рубрики», ставим галочки в чекбоксах (квадратиках), и нажимаем «Добавить в меню».

После этого все выбранные рубрики появятся в поле справа, где их можно перетаскивать и смещать. Это уж кому как хочется. Для перетаскивания, нужно навести курсор на элемент, нажать левую клавишу, и тащить мышью.

После завершения всех манипуляций, не забудьте «Сохранить меню».

Следующим шагом, нам нужно разместить созданное меню на страницах сайта. Для этого проходим Внешний вид > Виджеты, и находим виджет «Произвольное меню».

Этот виджет нужно перетащить мышью в Основную область, где он сразу после перетаскивания откроется, и в нём отобразиться название созданного Вами меню.

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

Затем нажимаем «Сохранить», и переходим из админки на сайт, посмотреть как это меню выглядит.

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

Когда статья будет написана, поставьте галочку в чекбоксе той рубрики, в которой эта статья будет размещена, и только после этого нажимайте «Опубликовать».

Теперь, если на странице сайта щёлкнуть по названию рубрики в меню, то она откроется, и в ней будет написанная Вами, для этой рубрики, статья.

А в дальнейшем, если Вы познакомитесь, с моей помощью, с основами HTML и  CSS (что, кстати, для меня оказалось совсем не сложно), то и менять внешний вид меню, темы оформления, а значит и всего Вашего сайта, Вы будете так, как Вашей душе угодно.

Перемена

                         Меню

— «Мудрость мужчины» — блюдо из яиц барана.
— Сукияки — мясо по японски (говядина)
— Мусака — греческая запеканка
— «Виселица» — куски мяса висят как на виселице. Перед подачей на стол поджигается. очень красиво.
 — Бычьи тестикулы
—  Суп с креветками «Виагра»
 -Литовский кофе «Cafe Americano»
— «Веселая семейка» — салат из раковых шеек 

Как сделать главную страницу в WordPress постоянной < < < В раздел > > > Горизонтальное выпадающее меню в WordPress
 

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

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

Необходимо показать подробный путь посетителю до той страницы, которая ему требуется. С вами Андрей Зенков, автор блога Start Luck. Сегодня мы поговорим, как сделать выпадающее меню в WordPress.

Чтобы повысить собственную продуктивность, нужно знать о выражении Ларри Пейджа (сооснователь Google): «Всегда делайте больше, чем от вас ожидают». Тут всё просто: если от вас ждут одного сделанного сайта, сделайте два. Если от вас ждут 5 продаж, сделайте 10. Следуя этому правилу, можно добиться невероятных высот!

Почему я рассматриваю вариант с выпадающей навигацией? С помощью такой можно указывать разделы и подразделы в неограниченном количестве. Простенький пример многоуровневого меню:

• Главная страница
• Автозапчасти

1. ВАЗ
1.1 2112
1.1.1 Двигатель
1.1.1.1 Прокладки для клапанов

Допустим, человеку нужны прокладки для клапанов на свой автомобиль — ВАЗ 2112. Благодаря вышеуказанному образцу он моментально находит то, что ему требуется, проходя путь от главной страницы. Ваша задача, уважаемые читатели, на первом этапе разработать хорошую структуру, а затем реализовать её в техническом плане, то есть сделать навигацию. Как это сделать, я вам расскажу прямо сейчас.

Плагины навигации для WordPress

Что же такое плагин в нашем случае? Это то, в чём уже содержится готовое решение, то есть наша менюшка. От вас потребуется лишь внести простые настройки внешнего вида и наслаждаться полученным результатом. Это то же самое, что использоваться математические формулы. Даётся каркас с переменными, вы просто указываете свои значения и получаете результат, который является решением задачи.

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

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

Главная особенность — множество параметров внешнего вида. Вы сможете настроить по собственным вкусам анимацию появления выпадающих подразделов, перехода между разделами и многое другое. На выходе получается интересный вариант в стиле accordion (такая навигация, когда один блок с подразделами автоматически закрывается при наведении курсора на другой блок, сравнение идёт от растяжки мехов гармошки).

Покопавшись в настройках, можно прийти к оптимальному результату, который вписывается в общее оформление вашего проекта. Чтобы вам было проще разобраться во всех конфигурациях, я нашёл хорошее видео:

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

Ещё одно простое решение, похожее на предыдущий вариант, с помощью которого можно создать симпатичную навигацию за 10-15 минут. Этот плагин нравится мне возможностью делать не только вертикальное меню, но и горизонтальное.

Работает на WordPress 3.5+. Устанавливается в любые темы. Для настройки не понадобится разбираться со сложными кодами. Все конфигурации расположены в удобной таблице. Найти Admin Menus Fixed можно в разделе «Плагины» в панели управления вашего проекта.

Одна из самых любимых моих разработок. Если вам нужна МЕГА навигация с красивым оформлением, то это именно то, что вы ищите. Горизонтальное, вертикальное, фиксированное — любое меню, какое вы только пожелаете.

Тут у нас появилось новое понятие — меню с фиксацией. Это удобный вариант для контентных проектов с большими статьями. Изначально оно располагается в привычном месте, но как только пользователь начинает листать страницу вниз, менюшка фиксируется в самом верху окна. Какие преимущества? Человеку, дочитавшему статью, не потребуется листать вверх до начала страницы, ведь меню уже здесь, рядом с ним! Пример — Смотреть.

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

Набор JQuery Mega Menu Widget включает в себя более 430 картинок. Функционал позволяет создать меню для размещения в футере. Такую возможность трудно найти в существующих плагинах. Обзор всех возможностей можете посмотреть в коротком видео:

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

С UberMenu можно настроить внешний вид многоуровневой навигации под свой шаблон. Благодаря интуитивно понятному интерфейсу вы быстро разберётесь со всеми конфигурациями.

Плагин очень похож на предыдущий вариант. В распоряжении пользователя — пять готовых скинов, которые можно настроить под свои нужды. Присутствует поддержка иконок, существует возможность настройки анимации и многое другое. Опять же, интерфейс сделан так, чтобы любой начинающий пользователь разобрался в параметрах. Поэтому с конфигурациями у вас проблем не возникнет. Демонстрационные варианты можете посмотреть на странице — nextendweb.com.

Какие можно сделать выводы?

Что же мы имеем по факту? Наша любимая WordPress, как и всегда, предлагает нам массу готовых решений, которые избавляют нас от рутинной работы. На разработку уникального меню при помощи кода может уйти несколько дней (это не считая долгих месяцев, потраченных на изучение основных программных языков). Вам же нужно просто создать структуру, выбрать внешний вид и настроить анимации.

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

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

После моего сегодняшнего рассказа вы сможете сделать собственное красивое меню за 10-15 минут. А на этом мой рассказ заканчивается. Не забудьте подписаться на мой блог, чтобы быть в курсе новых публикаций.

С вами был Андрей Зенков, увидимся уже совсем скоро!

jQuery Vertical Mega Menu — плагин-виджет вертикального выпадающего меню

JQuery Vertical Mega Menu Widget — бесплатный плагин, предназначенный для создания вертикального выпадающего меню в сайдбаре. Плагин предназначен для WordPress в целом, однако явно заточен под электронную коммерцию и может использоваться не только с WooCommerce, а и с другими плагинами для интернет-коммерции.
Посмотреть вложение 350
Мне встречалось несколько разных плагинов для создания разного рода структурированных, выпадающих менюшек в сайдбаре, однако этот плагин выделяется. Большинство из них автоматически создает меню на основе блоговых записей и категорий, на основе даты и месяца. Удобно, если у вас просто блог.
Рассматриваемый же плагин позволяет создавать совершенно любые менюшки на основе страниц, товаров, категорий, меток — чего угодно! Это именно то, что надо для каталога товаров, хотя придется немного повозиться — пункты добавляются вручную.
После скачивания, установки и активации плагина первое, что надо сделать — это создать необходимое меню, которое будет отображаться посредством плагина. В настройках сайта идем на вкладку «Внешний вид» -> «Меню» и создаем новое — ну допустим «menu2». Дальше наполняем его как хотим, делаем вложенные пункты. Для наибольшего эффекта рекомендуется делать 3-х уровневые пункты меню, тогда плагин наибольшим образом себя покажет. Поэкспериментировать можно и потом, первым делом главное создать хоть что-нибудь.
Когда меню создано, надо сделать так, чтобы плагин начал его отображать. Идем во «Внешний вид» -> «Виджеты», находим там новый виджет «jQuery Vertical Mega Menu» и помещаем его в нужное место на сайдбаре. Тут можно порыться немного в настройках, хотя главное сейчас — это выбрать наше предварительно созданное меню «menu2» и нажать «Сохранить». Меню создано, его можно просмотреть на сайте!

Посмотреть вложение 348
В настройках меню можно задать заголовок, выбрать нужное меню для отображения, выбрать количество колонок в развернутом меню, направление разворачивания, эффекты и скорость анимации, цветовой скин. Демонстрацию работы плагина в разных сочетаниях настроек можно просмотреть на странице разработчиков.
Изначально в плагин зашито 8 разноцветных стилей.
Посмотреть вложение 349
Однако отображение легко настраивается с помощью CSS (причем таблица CSS для каждого стиля своя, скопировал файлик white.css, переименовал в mybeststyle.css — вот тебе и новый скин «mybeststyle», который можно выбрать в настройках виджета ) и правкой фоновых картинок. Мне например пришлось вообще отказаться от использования картинок в качестве background’a в пользу простой цветовой заливки. К сожалению, из-за использования картинок менюшки отображались несколько некорректно, особенно когда пункт меню растягивался до двух строчек. Да и по цвету, по стилю мне родные скины не подходили. Немного терпения и знания CSS — и виджет изменяется как угодно, вплоть до добавления картинок.
Важный момент! Со многими темами плагин может сразу не заработать, но если внимательно читать readme, то разработчики рассказывают, как это лечится.

В вольном переводе — если основное меню отображается а выпадающее — нет, то проверьте, не установлено ли для сайдбара стилевое свойство overflow: hidden, которое как раз прячет все, что в сайдбар не помещается. Например, для темы Wootique это лечится добавлением в custom.css следующей строчки:

Код:

#sidebar{overflow:visible;}

В общем, немного терпения — и великолепный выпадающий каталог с товарами, а при желании — и с дополнительной информацией готов!
Скачать плагин JQuery Vertical Mega Menu Widget бесплатно можно здесь.

Как сделать выпадающие меню в wordpress : Радиосхема.ру

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

• Зачем использовать выпадающие меню в WordPress?
• Выбор темы оформления с поддержкой выпадающего меню
• Создание выпадающего меню в WordPress
  • Шаг 1. Создание меню навигации в WordPress
  • Шаг 2. Добавление подпунктов в меню
  • Шаг 3. Опубликуйте выпадающее меню
• Советы по созданию интерактивных выпадающих меню
  • Используйте многоуровневые выпадающие меню
  • Создайте несколько выпадающих меню
  • Создавайте меню с помощью предварительного просмотра
  • Создание большой навигации в виде выпадающего меню WordPress

Зачем использовать выпадающие меню в WordPress?

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

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

Выбор темы оформления с поддержкой выпадающего меню

Почти все темы оформления WordPress по умолчанию поддерживают выпадающие меню. Но не все. Поэтому нужно убедиться, что используется тема, которая поддерживает выпадающие меню. Вот несколько из них:

• Astra .
• Темы StudioPress .
• OceanWP .
• Ultra .
• Divi .

Создание выпадающего меню в WordPress

Шаг 1. Создание меню навигации в WordPress

Перейдите в меню « Внешний вид» — «Меню» и нажмите кнопку « Создать новое меню» .

Далее введите название меню навигации.

Затем нажмите кнопку « Создать меню» . После этого WordPress создаст новое пустое меню.

Чтобы добавить в меню навигации ссылки верхнего уровня, выберите страницы, которые вы хотите добавить в меню. Это можно сделать в левом столбце. Затем нажмите кнопку « Добавить в меню» .

После этого выбранные вами ссылки появляются в правом столбце и созданном меню.

Шаг 2. Добавление подпунктов в меню

В рамках этого руководства мы добавим в подпункты категории материалов блога. Для этого выберите в левом столбце элементы, которые вы хотите добавить в меню и нажмите « Добавить в меню» .

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

Повторите этот процесс для всех ссылок раскрывающегося меню. Когда вы закончите, не забудьте нажать кнопку « Сохранить меню» .

Шаг 3. Опубликуйте выпадающее меню

Темы оформления WordPress могут отображать меню в разных местах. Каждая тема оформления поддерживает определенные области для размещения меню. Они перечислены в разделе « Настройки меню» . Выберите вариант рядом с параметром « Область отображения» и нажмите кнопку « Сохранить меню» .

Теперь посетите сайт, чтобы увидеть выпадающее меню в действии.

Советы по созданию интерактивных выпадающих меню

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

1. Используйте многоуровневые выпадающие меню

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

Используемая тема оформления автоматически отобразит подпункты в виде подменю внутри выпадающего меню.

2. Создайте несколько выпадающих меню

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

3. Создавайте меню с помощью предварительного просмотра

Если меню становится слишком сложным, можно переключиться на визуальный предварительный просмотр. Для этого перейдите в меню « Внешний вид» – «Настроить» .

Затем перейдите на вкладку « Меню» и выберите необходимое меню навигации. После этого вы увидите визуальный редактор с областью предварительного просмотра сайта.

4. Создание большой навигации в виде выпадающего меню WordPress

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

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

Русский

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

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Русский

Поддержка > Плагины > Выпадающее меню из кнопки ELEMENTOR

подскажите как делать кнопку сверху, используя elementor или аналогичные плагины?

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Вам быстрее ответят в ТП элементора, чем здесь.

может это можно сделать без элементора средствами css? и js?

можно. Вот только здесь форум по ВП, а не по css и js

может это можно сделать без элементора средствами css? и js?

Раз вы задаете такие вопросы — лучше воспользоваться плагином типа:
https://ru.wordpress.org/plugins/maxbuttons/
А вот Элементором точно не надо пользоваться. Не надо пользоваться — от слова совсем….. ??

Выпадающее меню из кнопки ELEMENTOR

Элементор к меню не имеет отношения. Чтобы сделать кнопку с выпадающим меню вам придется дописать пользовательские стили. Откройте ваше меню и в настройках экрана поставьте галочку Показывать расширенные свойства меню Классы CSS . Задайте класс нужному пункту меню (например, btn) и напишите ему обрамление в виде кнопки.

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

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

Причина на самом деле совершенно другая, но продолжайте.

Можно сделать очень грамотный и быстрый сайт даже на билдере.

можно и блоху подковать, как известно. Зависит от мастерства «делателя»

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

вы конечно же скажете что нужно писать свой шаблон и тд

не надо приписывать мне подобную ересь

0. в том, что он удобен только для того, кто в нем разберется.
Если делаешь сайт на заказ, порой проблема бывает что бы объяснить заказчику простейшую админку ВП, а уж как работать с каким-то элементором, порой вообще за гранью добра и зла…
1. Каким бы он не был «легким», он все равно тормозит сайт. В некоторых случаях не критично, в других — заметно.
2. Чем больше сущностей — тем больше проблем. На этом форуме достаточно большое число тем, когда проблемой являлся какой-либо пэйдж-билдер
3. Зачем дополнительно изучать еще какой-то пэйдж-билдер, если ты все можешь сделать с помощью стандартных тем и плагинов?
4. и т.п.

По этому здесь — мало специалистов по таким вещам.

на дворе 21 век, поэтому этот вариант я считаю лучший

Я наверное навсегда застрял в 20 веке. Потому что делал и продолжаю делать грамотные сайты без всяких билднеров. (в том числе и без Гутенбергера) Это очень печально, если кому-либо такое не по силам без «всемогущего элементора»

Приветствую вас на сайте Impuls-Web!

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

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

Навигация по статье:

• Установка и настройка плагина выпадающего меню WordPress
• Добавление выпадающего меню WordPress на сайт

Для WordPress выпадающее меню нам поможет сделать плагин Mega Main Menu . Это очень мощный плагин, с помощью которого вы можете создать выпадающее горизонтальное и вертикальное меню абсолютно в любой части вашего сайта.

Установка и настройка плагина выпадающего меню WordPress

Итак, для создания выпадающего меню WordPress нам для начала нужно установить плагин Mega Main Menu из репозитория.

1. 1. Заходим в админку WordPress и переходим в раздел «Плагины» =>«Добавить новый».
2. 2. В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».

Доступно для выбора три варианта:

Hover intent – тоже самое, что и «Наведение мышки»

Наведение мышки — открывается при наведении указателя мышки на пункте

Клик мышки – открывается при клике указателем мышки по пункту
6. В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress

И скорость, с которой оно будет открываться:

Если же мы выберем пункт «Мега Меню» то в раскрывающейся области подпункты будут располагаться в столбик:

В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.

11. Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»

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

Добавление выпадающего меню WordPress на сайт

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

Для добавления выпадающего меню WordPress в область виджетов нам нужно:

1. 1. Переходим в раздел «Внешний вид» =>«Виджеты»
2. 2. Выбираем виджет «Max Mega Menu» и добавляем его в сайдбар. Это можно сделать или путем перетаскивания виджета в нужную область, или выбрав виджет и кликнув на кнопку «Добавить виджет».

Если же вам нужно сделать дублирующее выпадающее меню WordPress в футере сайта, то для этого нужно:

1. Переходим на вкладку «Локации меню» в настройках плагина и копируем php-функцию:

Вот что у нас получилось:

Теперь у нас главное меню сайта продублировано в футере. Осталось его немного подправить css-стилями.

Как я уже говорила, плагин Max Mega Menu дает огромные возможности, и с его помощью вы можете создать для WordPress выпадающее меню любой сложности, хоть горизонтально, хоть вертикальное, и вставить его в любом месте на своем сайте. Но, к сожалению, у этого плагина есть и недостатки, основным из которых является необходимость дописывать стили для нормального вывода в виджетах.

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

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

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

Зачем использовать выпадающие меню в WordPress

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

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

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

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

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

Наконец, они выглядят довольно мило.

Посмотрим, как легко создать выпадающее меню WordPress и добавить его на свой веб-сайт.

Шаг 1. Выбор темы с поддержкой выпадающего меню

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

Почти все темы WordPress по умолчанию поддерживают выпадающие меню. Однако встречаются темы, не поддерживающие или плохо отображающие такие меню.

Как узнать, поддерживает ли используемая вами тема выпадающее меню?

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

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

• Astra – многоцелевая тема WordPress, поставляется с несколькими начальными сайтами и множеством функций.
• Темы StudioPress – профессиональные темы, созданные на основе фреймворка Genesis, высоко оптимизированы для повышения производительности.
• OceanWP – популярная тема WordPress, подходит для любых веб-сайтов.
• Ultra – разработанная на основе Themify Builder, включает в себя красивые шаблоны и гибкие опции темы.
• Divi – популярная тема от Elegant Themes, которая использует конструктор страниц Divi и содержит множество функций перетаскивания, включая выпадающие меню.

Шаг 2. Создание меню навигации в WordPress

Перейдите во вкладке «Внешний вид» на страницу «Меню» и нажмите кнопку «Создать новое меню».

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

Нажмите кнопку «Создать меню». WordPress создаст для вас новое пустое меню.

Добавим верхние ссылки в меню навигации. Эти пункты появятся в верхнем ряду вашего меню.

Выберите страницы, которые хотите добавить, в левом столбце и нажмите кнопку «Добавить в меню». Можно выбрать записи в блоге, категории или добавить пользовательские ссылки.

Эти страницы появятся в правом столбце под вашим новым меню.

Смотрите также:

Как создать мощное меню с помощью плагина WP Mega Menu.

Шаг 3. Добавление подпунктов в меню

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

Для этого урока добавим категории по ссылке в блоге.

Выбираем элементы, которые нужно добавить, в левом столбце, а затем нажмите кнопку «Добавить в меню». Они появятся в правом столбце.

Эти ссылки отображаются как обычные элементы, а мы хотим сделать их подпунктом родительского меню.

Можно просто перетащить элемент меню и поместить его под родительский элемент. Переместите его немного вправо, и он станет подпунктом.

Повторите процесс для всех ссылок, которые хотите показать в раскрывающемся меню.

Не забудьте нажать кнопку «Сохранить меню».

Шаг 4. Публикация выпадающего меню

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

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

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

Найдете эту опцию в правом столбце в разделе «Настройки меню». Выберите опцию рядом с настройкой «Показать местоположение» и нажмите кнопку «Сохранить меню».

Теперь перейдите на свой веб-сайт, и посмотрите на выпадающее меню в действии.

Советы по созданию интерактивных выпадающих меню

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

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

Несколько советов о том, как сделать ваши навигационные меню более интерактивными с помощью выпадающих меню:

1. Создайте многоуровневые выпадающие меню

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

Ваша тема автоматически отобразит их в виде подменю внутри выпадающего меню.

2. Несколько выпадающих меню

Вы можете создать раскрывающийся список под любой верхней ссылкой в ??вашем меню. И можете добавить несколько выпадающих меню в главном меню навигации.

3. Меню с предварительным просмотром

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

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

4. Большое Мегаменю в виде выпадающего меню в WordPress

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

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

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

html — Раскрывающееся меню Divi становится горизонтальным, а не вертикальным

Я не могу отобразить раскрывающееся меню на моем веб-сайте вертикально, а не горизонтально, как сейчас. Вы можете увидеть CSS в веб-консоли.

Это оскорбительный код:

<li><a href="#">Our Apps</a>
<ul>
    <li><a href="https://bytestand.com/bytestand-3/">ByteStand</a></li>
    <li><a href="https://bytestand.com/fba-shipping/">FBA Shipping</a></li>
    <li><a href="https://bytestand.com/freshcredit/">FreshCredit</a></li>
</ul>
</li>

Это снова мой сайт здесь.

Куда я сбился с пути?

0

ToddT

13 Янв 2020 в 17:28

4 ответа

Лучший ответ

Без вашего CSS было действительно непросто понять, что происходит … Однако проблема с вашим CSS состоит в том, что ваш <li> элемент имеет свойство float: left, которое извлекает их из потока DOM (как будто они абсолютно позиционируется ) .

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

Инспектор говорит, что это из

#top-menu li.mega-menu ul li @ style.css? Ver = 3.0.80: 11

Это правило, которое я нашел:

#top-menu li.mega-menu ul li {
    display: block!important;
    /* float: left!important; <-- get rid of this */
    margin: 0;
    padding: 0!important;
}

Результат, полученный инспектором Chrome

2

Plastic
13 Янв 2020 в 16:43

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

Примечание: пожалуйста, проверьте, не влияет ли это на другую часть сайта

После этого добавьте этот CSS

.sub-menu{
    display: flex;
    flex-direction: column;
    max-width: 184px !important;  //As few of your styles overriding this part so I have added !important their
}

1

bajran
13 Янв 2020 в 14:49

В вашем ul элементе (который появляется при наведении курсора на пункты главного меню навигации):

.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Надеюсь это поможет.

1

Alberto Perez
13 Янв 2020 в 14:41

Следующий код CSS легко решит проблему.

.sub-menu{
   display: flex;
   flex-direction: column;
}

0

DohaHelmy
13 Янв 2020 в 14:35

Плагины для создания вертикального выпадающего меню (аккордион)

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

1. JQuery Accordion Menu Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2012-5-14

Загрузок: 124,401

Демо пример можно посмотреть на сайте:

http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/#

Описание плагина:

Создает вертикальное меню (аккордион) из любого WordPress пользовательское меню с помощью jQuery.

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

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

Или же можно воспользоваться следующим шорткодом:
[dcwp-jquery-accordion menu=”Test Menu”]

, где вместо Test Menu указываем название меню.

2. JQuery Vertical Mega Menu Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2012-6-30

Загрузок: 71,375

Демо пример можно посмотреть на сайте:

http://www.designchemical.com/lab/demo-wordpress-jquery-vertical-mega-menu-plugin.html#

Описание плагина:

Создает виджет, который позволяет добавить вертикально всплывающее мега меню из любого стандартного WordPress пользовательского меню с помощью jQuery.

Может работать с несколькими вертикальными мега меню на каждой странице и предлагает 3 эффектов анимации.

3. JQuery Drill Down Ipod Menu Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2011-5-15

Загрузок: 20,265

Демо пример можно посмотреть на сайте:

http://www.designchemical.com/lab/demo-wordpress-jquery-drill-down-ipod-menu-plugin/

Описание плагина:

Добавляет виджет, который позволяет создавать разворачивающееся меню в стиле ipod из любого пользовательского меню wordpress с использованием JQuery.

4. Collapsing Categories

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2012-6-20

Загрузок: 104,823

Как работает плагин можете посмотреть у меня на сайте в боковой колонке справа.

Описание плагина:

Плагин Collapsing Categories создает вертикальное меню с древовидной структурой рубрик, при этом рубрики и подрубрики будут раскрываться.

Об установке и настройке данного плагина можете прочитать в моей статье: Вертикальное меню с раскрывающимися рубриками, плагин Collapsing Categories

5. WordPress Menu Vertical

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2013-2-11

Загрузок: 16,336

Демо пример можно посмотреть на сайте:

http://wpdemo.web-dorado.com/folder-menu-vertical/

Описание плагина:

Folder Menu Vertical – это флэш-динамический модуль меню для вашего WordPress сайта.

5. jQuery Categories List Widget

Данные о плагине на основе сайта wordpress.org:

Последнее обновление: 2013-4-19

Загрузок: 20338

Демо пример можно посмотреть на сайте в боковой колонке:

http://skatox.com/blog/

Описание плагина:

Создает простой виджет с помощью JQuery для отображения категорий в виде выпадающего списка с некоторыми эффектами.

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

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

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

На сайте, созданном с помощью CSM WordPress, выпадающее меню можно сделать с помощью уже интегрированных специальных функций.

Выпадающее меню WordPress может быть двух видов:

• Вертикальное;
• Горизонтальное.

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

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

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

Намного проще будет сделать меню WordPress выпадающим, если при создании сайта используется тема с поддержкой произвольного списка. Для этого необходимо перейти в панели управления сайтом в пункт «Внешний вид» – «Меню», и переместить подходящие рубрики из левой части окна в правую.

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

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

Данный вид меню создается аналогично вертикальному. Для тем, не поддерживающих произвольное меню, также создается основная страница и к ней подкрепляется подчиненная. Но в отличие от вертикального меню к подчиненным страницам также прикрепляются подчиненные второго порядка. Например, «SPA-процедуры» – «Антицеллюлитные процедуры» – «Шоколадное обертывание», где «SPA-процедуры» это родительская страница, «Антицеллюлитные процедуры» является дочерней страницей первого порядка, а «Шоколадное обертывание» будет дочерней страницей второго порядка. В свою очередь, к ней также можно прикрепить новые подчиненные страницы, но не желательно создавать такой глубокий уровень вложенности.

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

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

вертикальных меню WordPress: от А до Я

В предыдущих статьях мы уже говорили о создании меню WordPress в целом и о создании раскрывающихся меню WordPress. Мы еще не полностью рассмотрели вертикальные меню. Итак, пора закатать рукава и показать вам, как их прибивать. Готовый?

А теперь давайте прямо: говоря о вертикальных меню, я не включаю ни левую, ни правую навигацию по боковой панели.

Давайте начнем с того, что вспомним, как на самом деле строятся меню, понятно? Я сделаю это быстро.

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

Шаг 1 : Перейдите в панель управления WordPress и выберите «Меню» под «Внешний вид».

Шаг 2 : Назовите свое меню и выберите место отображения вашего меню. Варианты здесь варьируются от темы к теме. Затем нажмите «Создать меню».

Шаг 3 : Добавьте элементы меню (страницы, сообщения, настраиваемые ссылки, категории). Просто отметьте нужный пункт и нажмите «Добавить в меню».

Шаг 4 : Сохраните свое меню.

И готово!

Если вы передумали и хотите изменить расположение меню, вы можете быстро сделать это с помощью параметра «Управление местоположениями».

Типы вертикальных меню

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

Давайте посмотрим на ваши варианты:

• Вертикальное меню гармошкой

Этот тип меню позволяет пользователям щелкнуть ссылку меню и раскрыть или выдвинуть подменю под ним.Меню-гармошки — это вертикальные меню, в которых при щелчке по основному элементу раздел под ним разворачивается. Повторное нажатие на верхнюю ссылку закрывает раздел.

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

Вертикальное мегаменю создает отдельный «всплывающий» контейнер для каждой основной ссылки. Каждая основная ссылка ведет к подменю. Этот вариант очень популярен среди интернет-магазинов.

Выпадающие меню — самый популярный тип многоуровневого меню. Ссылки меню раскрываются вертикально.

Источник: Dribbble

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

2 плагина, которые можно использовать для вертикальных меню WordPress

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

Адаптивное вертикальное значок меню

Вот некоторые из его наиболее полезных функций:

• Простота установки и использования
• Работает без проблем со всеми версиями WordPress
• Полностью адаптивное вертикальное меню WordPress
• Возможность добавления значка меню
• Возможность изменения стилей главного меню и подменю (премиум-функция)
• Возможность вносить изменения в активные стили меню, семейство шрифтов, стили границ, цвет фона (премиум-функция)
• Удобная серверная часть
• Протестировано на популярных темах WordPress

Slick Menu — Адаптивное вертикальное меню WordPress

Вот некоторые из его наиболее полезных функций:

• Каждый уровень настраивается независимо
• 14 Анимация внешнего вида меню в 3D
• Покрытие или перекрытие анимации меню
• 45 Анимация пунктов меню
• Гамбургер анимации
• Библиотека иконок
• Google шрифтов доступно
• Полностью отзывчивый
• Гладкая прокрутка

Итак, вот как вы можете установить плагин WordPress.

Pro и против вертикальных меню

Теперь у меня вопрос: действительно ли вам нужно вертикальное меню?

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

Итак, у каждого правила есть исключения, и мы их тоже рассмотрим.

В конце концов, нет однозначного правильного ответа. Когда дело доходит до проектирования для пользователей, следует учитывать основной драйвер.

Теперь давайте посмотрим на контраргументов.

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

Теперь давайте посмотрим на аргументы для вертикальных меню:

• Навигация влево может быть быстрее для пользователей.
• В вертикальной навигации вы можете включать больше элементов, в горизонтальной навигации вам нужно сужать элементы из-за ограниченного пространства.
• Если основные ссылки длинные, они лучше впишутся в вертикальное меню.
• Интернет-магазинов и мобильных приложений уже помогли пользователям привыкнуть к вертикальным меню. На сайтах электронной коммерции используется вертикальное отображение категорий и подкатегорий продуктов. Мобильные приложения не могут отображать горизонтальную навигацию из-за нехватки места, поэтому, когда вы сворачиваете гамбургер-меню, вы увидите вертикальную навигацию.
• Пользователи также привыкли находить важные вещи в левом вертикальном положении и для продуктов SaaS. Допустим, вы используете Canva, Mailchimp, Adobe Lightroom или даже конструктор страниц Colibri. Это не меню само по себе, но это доказывает тот факт, что не все должно происходить внутри верхней панели.

Вертикальное меню, вдохновленное 7 веб-сайтами

1. На веб-сайте Гран-при Австралии Формулы-1 используется вертикальное меню с дополнительными пунктами меню, поддерживаемыми значками.Это выглядит очень красиво и действительно хорошо видно. Вы не можете его пропустить. 2. Видеть вертикальное меню внутри нижнего колонтитула довольно часто. Некоторые из этих меню довольно скучные, но вот одно привлекло мое внимание:
   Источник: thedvigroup.com

У него есть цель, поэтому он выделяется. Дизайн должен быть путем к цели. Здесь цель, кажется, состоит в том, чтобы облегчить людям поиск контактной информации и предложения о работе. Вот и пример вертикального меню из Британского музея.Ссылки, которые идут в нижнем колонтитуле, являются вторичными и третичными ссылками, они не имеют такого веса, как первичные ссылки, которые находятся внутри основной навигации.

3. Этот сайт не использует липкую горизонтальную навигацию, поэтому он размещает вертикальное меню под содержимым. Кто сказал, что у вас не может быть и горизонтального, и вертикального меню? Источник: www.oxfordhouse.nl

4. В этом примере ссылки не поместились бы в горизонтальное меню. Трудно разместить 7 ссылок на верхней панели навигации.Итак, вертикальное меню было естественным выбором. Он также расширяется, чтобы не занимать слишком много места. Источник: live.harley-davidson.com

5. Поскольку пользователи теперь хорошо знакомы с опцией гамбургер-меню, эту модель также можно воспроизвести на рабочем столе, как это сделали люди из KiteCreative.

6. Ребята из Marme перечисляют свои товары для дома в вертикальном меню. Эти ссылки уместились бы в горизонтальном меню с тремя элементами и двумя раскрывающимися меню.Этот опыт испортил бы вид, который сейчас у вас впереди. Вертикальное меню было более понятным и дружелюбным выбором.

7. Ребята из The Rocks используют вертикальное меню слева, но у них также есть похожее содержимое справа, так что оно почти идеально симметрично.

Заключение

Возвращаясь немного к продолжающимся спорам о вертикальных меню, вот мое скромное мнение. Люди знают, что на сайте должно быть меню. Они будут искать его вверху или слева.Они его найдут, это всего за секунды. Не будем их недооценивать. Мы живем в эпоху, когда дети с раннего возраста проводят пальцем по телефону. И меню в любом случае видимы, потому что они занимают видимое пространство (если у вас нет плохой контрастности).

Взгляните на этот сайт: http://www.artifactproperty.co.nz/. Нашли меню или нет?

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

Если вам понравилась эта статья, и вы хотите узнать больше о том, как создать веб-сайт на WordPress, обязательно подпишитесь на канал Colibri на Youtube и подпишитесь на нас в Twitter и Facebook!

Алина — специалист по цифровому маркетингу, увлеченная веб-дизайном. Когда она не разрабатывает стратегию, она занимается фотографией, слушает подкасты по истории и психологии и играет со своими двумя собаками и кошкой.

5+ плагины раскрывающегося меню WordPress 2021

Хотите, чтобы на вашем веб-сайте отображались гибкие, красивые и настраиваемые раскрывающиеся меню?

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

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

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

1. Mega Main Menu — Плагин раскрывающегося меню WordPress

Mega Main Menu — это легко настраиваемый плагин раскрывающегося меню, с помощью которого вы можете получить адаптивное меню с несколькими раскрывающимися элементами, модулями содержимого и т. Д. Он предлагает множество встроенных функций, таких как липкое меню, значки, раскрывающиеся списки и т. Д.

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

Стоимость: —

• За обычную лицензию на этот плагин будет взиматься плата за 16 долларов.
• Расширенная лицензия обойдется вам в 130 долларов за услуги этого плагина.

Характеристики: —

• Он предоставляет более 600 шрифтов Google, вы можете очень легко изменить шрифты из панели администратора.
• С помощью этого плагина вы можете создавать гибкие раскрывающиеся меню, которые отлично смотрятся на разных устройствах и экранах.
• С помощью этого плагина вы получите более 1600 векторных иконок, которые можно использовать в вашем меню и на веб-сайте.
• Этот плагин на 100% совместим с популярными темами WordPress и многоязычными сайтами.

Подробнее о плагине раскрывающегося меню WordPress

2. Hero Menu — плагин выпадающего меню WordPress

С помощью плагина WordPress Hero menu вы можете создать настраиваемое раскрывающееся меню всего за несколько щелчков мышью. Этот плагин обеспечивает адаптивную сенсорную поддержку для различных устройств Android, iOS и Windows8.

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

Стоимость: —

• Этот плагин доступен по себестоимости 20 долларов США, благодаря чему вы получаете полный доступ к различным функциям и возможностям.

Характеристики: —

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

Подробнее о плагине раскрывающегося меню WordPress

3. Touchy — плагин мобильного меню WordPress

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

С этим плагином вы получаете такие функции, как расположение логотипа, кнопки электронной почты, многоуровневое раскрывающееся меню и многое другое. Кроме того, вы также можете скрыть логотип / меню темы по классу / идентификатору.

Стоимость: —

• Обычный тарифный план этого плагина стоит около 23 долларов за различные функции и услуги.
• Расширенный план будет стоить вам 95 долларов за расширенные версии всех функций и услуг.

Характеристики: —

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

Подробнее о плагине раскрывающегося меню WordPress

4. QuadMenu — Mega Menu разработчика тем

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

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

Стоимость: —

• Первый план этого плагина предлагается по цене 14 долларов США. Он включает в себя различные функции и расширенные услуги.
• Второй план стоит 55 долларов и предоставляет расширенную версию всех его функций.

Характеристики: —

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

Подробнее о плагине раскрывающегося меню WordPress

5.UberMenu — плагин для WordPress

UberMenu — это настраиваемый и удобный плагин премиум-класса для WordPress. Он легко совместим с мобильными устройствами, включая Android и iPhone. Кроме того, UberMenu — очень отзывчивый плагин.

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

Стоимость: —

• Обычная лицензия обойдется вам в 25 долларов с 6-месячной поддержкой и будущими обновлениями.

Характеристики: —

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

Подробнее о плагине раскрывающегося меню WordPress

Наконец, бесплатный плагин, который поможет вам отображать раскрывающееся меню в привлекательном виде.С его помощью вы можете добавить в меню раскрывающееся меню, страницы со списком, категории и т. Д. Он также позволяет преобразовывать меню навигации в раскрывающиеся меню.

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

Стоимость: —

• Это абсолютно бесплатный плагин WordPress, который предлагает различные расширенные функции и услуги бесплатно. Этот плагин содержит более 20 000 активных установок в Интернете.

Характеристики: —

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

Подробнее о плагине раскрывающегося меню WordPress

Заключение

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

Вы можете задать их нам в комментариях ниже. Мы будем рады услышать от вас.

Для других блогов просмотрите блоги, перечисленные ниже: —

Визуализация выпадающих списков в навигации

Спасибо за ответ,

Хотя я уже пробовал это. Мой заголовок вертикальный (в OceanWP) Elementor не позволяет настраивать вертикальный заголовок.Я попытался заменить элементы меню связанными текстовыми сообщениями, чтобы получить желаемый визуальный список (без раскрывающихся списков, поддержание видимых подэлементов)

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

• Этот ответ был изменен 2 года, 11 месяцев назад пользователем ayitskelli.
• Этот ответ был изменен 2 года, 11 месяцев назад пользователем ayitskelli.
• Этот ответ был изменен 2 года, 11 месяцев назад пользователем ayitskelli.
• Этот ответ был изменен 2 года, 11 месяцев назад пользователем ayitskelli.

Создайте собственный шаблон меню с помощью Elementor в разделе «Панель управления»> «Панель тем»> «Моя библиотека». Теперь перейдите в «Настройка»> «Заголовок»> «Меню» и выберите оттуда шаблон меню. Сообщите мне, работает это или нет.

Я внес эти правки и опубликовал их на своем сайте.Вы заметите, что он не реагирует.

Привет,

Используйте стиль вертикального заголовка темы OceanWP в разделе «Настройка»> «заголовок»> «Общие» и добавьте приведенный ниже код в раздел CUstomize> CUstom CSS. Сообщите мне, работает это или нет.

  # site-header.vertical-header # site-navigation-wrap .dropdown-menu .sub-menu {
    отображение: блок! важно;
}  

Чтобы скрыть значок плюса в раскрывающемся списке — добавьте приведенный ниже код также в настраиваемый раздел CSS

  пролет.dropdown-toggle {
    дисплей: нет;
}  

Надеюсь, это вам поможет.

Сработал как шарм! Спасибо!! Хотя я все еще вижу раскрывающийся значок плюса, а раскрывающиеся списки не видны на планшете и мобильном телефоне. Кроме того, возникнут ли конфликты из-за будущих обновлений с этим дополнительным CSS? И есть ли способ избавиться от тонких линий между каждым пунктом меню.

Еще раз спасибо !!

Также было бы здорово редактировать отступы / интервалы между всеми пунктами меню, не могу редактировать это в настройщике.

Если вы добавили код в раздел Customizer> Custom CSS, то с обновлениями проблем не возникнет.

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

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

Здравствуйте,

Попробуйте добавить приведенный ниже код в раздел customize> custom css, чтобы настроить отступы / поля.

  # site-header.vertical-header # site-navigation-wrap .dropdown-menu li {
отступ: 3px 0 3px 0;
маржа: 0;
}  

Измените код в соответствии с вашими потребностями. Вам также нужны эти настройки для мобильного просмотра?

Спасибо за ответ,

Я хочу сделать отступы меньше… это просто увеличивает отступ. Хотелось бы, чтобы эти настройки для планшета, не нужны для мобильных.

• Этот ответ был изменен 2 года, 11 месяцев назад пользователем ayitskelli.
• Этот ответ был изменен 2 года, 11 месяцев назад пользователем ayitskelli.

Используйте медиа-запросы, чтобы сделать его отзывчивым и специфичным для устройства — прочтите здесь

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

  # site-header.vertical-header # site-navigation-wrap .dropdown-menu li {
отступ: 0;
маржа: -5px 0 -5px 0;
}  

Еще раз спасибо за ответ!

Работает как шарм.Есть ли способ сделать так, чтобы значки социальных сетей и панель поиска были видны? Я действительно не хочу, чтобы мне приходилось прокручивать страницу вниз, чтобы увидеть это.

Может быть, есть способ изменить расстояние между навигацией и логотипом? Или панель поиска и социальные сети могут располагаться рядом с пунктами меню?

Заранее спасибо !!

Здравствуйте,

Я только что проверил ваш сайт, и он мне виден. Не могли бы вы перепроверить?

Да, вчера вечером я все поправил, спасибо за вашу помощь !!

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

Что, если бы вы могли упростить пользователям навигацию по вашему веб-сайту?

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

В этой статье мы покажем вам, как это сделать.

Что такое раскрывающееся меню?

Меню по умолчанию, используемое в Интернете, — это стандартное меню. Это простой дизайн, в котором каждый пункт меню отображается рядом друг с другом по горизонтали (иногда по вертикали). Дизайн не содержит вложенных элементов, что придает ему истинный вид: «что видишь, то и получаешь».

Выпадающее меню — это разновидность стандартного веб-меню. Он использует тот же дизайн, только несколько пунктов меню имеют вложенные элементы, которые «выпадают», когда пользователь наводит курсор на родительский элемент.

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

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

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

Кроме того, если ваша тема поставляется с демонстрационным контентом, она, скорее всего, предоставит вам настраиваемое меню, заполненное страницами, которые оно создало для вас, когда вы импортировали демо.

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

Начните с добавления страниц верхнего уровня в меню в любом порядке. Это ваша домашняя страница, страница «О нас», «Блог» и «Контакты». Вы можете перетащить каждый элемент, чтобы переставить их в желаемом порядке.

Теперь предположим, что в нашем блоге много разных категорий. Мы можем добавить эти категории прямо в наше меню как есть или вложить их под элементом «Блог».Это позволяет пользователям просматривать темы, соответствующие типу контента, который они ищут.

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

WordPress называет эти «подпункты», но вы также можете называть их дочерними элементами. Вы даже можете создать внуков, вложив дополнительные элементы в дочерние элементы.

Вот пример этого простого меню в действии:

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

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

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

Если вы хотите добавить родительский пункт меню, который действует как заголовок, а не как фактическая ссылка, вставьте символ решетки # в поле URL и свой заголовок в поле Текст ссылки. Например, если вы продаете продукты в нескольких магазинах с большими коробками, вы можете создать родительский пункт меню под названием «Где купить» и связать каждый магазин как дочерний элемент.

Не стесняйтесь добавлять собственные ссылки в любом месте вашего меню.

Редактирование меню

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

Обязательно сохраните свое меню перед следующей частью.

Если вы хотите видеть изменения, которые вы вносите в свое меню, в реальном времени, перейдите в интерактивный настройщик, откройте раздел «Меню» и откройте раскрывающееся меню. Интерфейс похож на страницу меню в серверной части WordPress, поэтому вы сможете редактировать свое меню отсюда.

Вы даже можете удалить свое меню отсюда, как и на странице меню серверной части.

Мегаменю: альтернатива выпадающему меню

Выпадающее меню

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

Мега-меню — это еще одна форма раскрывающихся меню, только в них используются расширенные ссылки, изображения, поля поиска, карты и многое другое.

Их невероятно легко создать, если использовать специальные плагины мегаменю, особенно такие, как UberMenu и Mega Menu Pro.

Раскрытие информации: Этот пост содержит партнерские ссылки. Это означает, что мы можем получить небольшую комиссию, если вы совершите покупку.

Узнайте о виджете Nav Menu (Pro)

Виджет Nav Menu позволяет вам использовать меню, которые вы создали в WordPress, и оформлять их так, как вы хотите.

Посмотрите это видео, в котором объясняются различные функции этого виджета.

Содержание

Макет

1. Меню : выберите меню, которое вы ранее настроили с помощью Внешний вид > Меню
2. Макет : выберите горизонтальный, вертикальный или раскрывающийся макет
3. Выровнять : установите выравнивание элемента меню, по левому краю, по центру, справа или по ширине
4. Указатель : выберите указатель: «Нет», «Подчеркнутый», «Двойная линия», «В рамке», «Фон» или «Текст»
5. Анимация : выберите анимацию указателя: «Затухание», «Скольжение», «Увеличение» , Drop In, Drop Out или None
6. Индикатор подменю : выберите значок, который указывает, что элемент имеет элементы подменю: None, Classic, Chevron, Angle или Plus

Mobile Dropdown

1. Точка останова : выберите, в какой момент срабатывает раскрывающееся меню мобильного устройства, на мобильном устройстве, планшете или на любом другом устройстве.
2. Полная ширина : выберите, будет ли раскрывающийся список для мобильных устройств покрывать всю ширину устройства: Да или Нет.
3. Выровнять : выберите, будут ли элементы мобильного меню отображаться слева или по центру, выбрав либо в сторону. или по центру
4. Кнопка переключения : Показывать значок гамбургера в качестве переключателя или нет
5. Тумблер Выровнять : Показывать переключатель слева, по центру или справа от экрана

Стиль

Главное меню

Типографика: установите параметры типографики для текста пункта меню.

Следующие элементы можно установить независимо для всех трех состояний: Нормальный, Наведение и Активно.

1. Цвет текста: выберите цвет текста пункта меню.
2. Цвет указателя: выберите цвет наведенного курсора или активного состояния. В нормальном состоянии используется цвет, установленный в качестве основного цвета в настройках цветов по умолчанию.

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

Разделитель

1. Разделитель: переключите параметр, чтобы включить или отключить разделитель между пунктами меню
2. Стиль: в раскрывающемся меню выберите сплошной, двойной, пунктирный, пунктирный или рифленый
3. Ширина: используйте ползунок или введите значение в поле поле в PX
4. Высота: используйте ползунок или введите значение в поле в PX или%
5. Цвет: в палитре цветов выберите цвет для разделителя.

Заполнение и интервал

1. Ширина указателя: установите ширину указателя
2. Горизонтальное заполнение: используйте ползунок или введите значение в поле в PX, чтобы установить горизонтальное заполнение вокруг текста пунктов меню
3. Вертикальное заполнение: используйте ползунок или введите значение в поле в PX для установки вертикального отступа вокруг текста пунктов меню
4. Пространство между: используйте ползунок или введите значение в поле в PX, чтобы установить расстояние между элементами меню

Раскрывающийся список

На рабочем столе это повлияет на подменю.На мобильном телефоне это повлияет на все меню.

Следующие элементы можно установить независимо для всех трех состояний: Нормальный, Наведение и Активно.

1. Цвет текста : выберите цвет текста пункта меню
2. Цвет фона : выберите цвет фона пунктов меню
3. Типографика : установите параметры типографики для пунктов меню
4. Тип границы : Выберите тип границы в раскрывающемся меню, выбрав «Нет», «Сплошная», «Двойная», «Пунктирная», «Пунктирная» или «Канавка»
5. Ширина : Установите ширину границы
6. Цвет : выберите цвет границы
7. Радиус границы : Установите радиус границы для контроля округлости угла
8. Тень блока : Создайте тень блока вокруг раскрывающегося меню
9. Отступы по горизонтали : Установите отступы по горизонтали вокруг текста пунктов меню
10. Вертикально Padding : установите вертикальный отступ вокруг текста пунктов меню

Divider

1. Тип границы : выберите тип границы для разделителя, выбрав «Нет», «Сплошная», «Двойная», «Пунктирная», «Пунктирная» или «Канавка»
2. Цвет : Если выбрана граница разделителя, выберите цвет границы разделителя
3. Ширина границы : если выбрана граница разделителя, установите ширину границы разделителя
4. Расстояние : установите расстояние между переключателем и раскрывающимся меню

Совет: перейдите в элемент Elementor> Настройки> Дополнительно и убедитесь, что для параметра Load Font Awesome 4 Support установлено значение Yes , чтобы индикаторы подменю отображались правильно.

Кнопка переключения

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

1. Цвет : выберите цвет значка переключателя
2. Цвет фона : выберите цвет фона переключателя
3. Размер : установите размер переключателя
4. Ширина границы : Установить ширина границы вокруг кнопки переключения
5. Радиус границы : Установите радиус границы кнопки переключения

Примечание : Кнопка переключения относится к значку меню гамбургера.

Атрибуты доступности

Виджет навигационного меню имеет следующие атрибуты доступности:

• tabindex
• aria-extended
• aria-hidden
• role = «navigation»

Advanced

Установите дополнительные параметры, применимые к этому виджету

Виджет выпадающего меню для WordPress // Shailan.com

Виджет Dropdown Menu добавляет красивое раскрывающееся меню CSS + jQuery, список страниц ИЛИ категории вашего блога.Он даже поддерживает пользовательские меню для WP3 +. Он полностью настраивается через CSS и НАСТОЛЬКО прост в использовании!

Получить виджет раскрывающегося меню для WordPress

Характеристики

• Автоматически создаваемые меню (Страницы / Категории / Пользовательские меню)
• Более 11 красивых тем
• Эффекты jQuery (необходимо включить с панели)
• Настраиваемая цветовая схема
• Виджеты включены
• Вертикальное или горизонтальное меню
• поддерживает несколько экземпляров
• Может быть встроен с помощью тега шаблона PHP

Прежде чем задавать вопросы, обратите внимание на следующее:

• Темы меню используют CSS .Вот почему он не работает одинаково для всех тем. Вам могут потребоваться некоторые исправления CSS из-за вашей темы.
• Эффекты используют jQuery . Если ваша тема изменит jQuery по умолчанию, эффекты могут не работать.
• IE6 не поддерживается. Почему бы не обновить свой браузер до ?

Установка

Виджет выпадающего меню

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

• Войдите в свою панель управления WordPress и перейдите в раздел «Плагины »> «Добавить новый ».
• Если вы скачали плагин, щелкните ссылку «Загрузить» и загрузите плагин.
• Если вы еще не загрузили, введите виджет раскрывающегося меню в поле поиска и нажмите «Поиск».
• Нажмите «Установить» и нажмите «Активировать плагин» после его загрузки.
• Перейдите в «Настройки раскрывающегося меню» в разделе «Настройки», чтобы изменить тему раскрывающегося меню и отредактировать настройки.
• Добавьте раскрывающееся меню на свой сайт, используя «Виджеты» или коды тегов шаблонов.
• Готово.Наслаждаться!

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

Подробнее

Примечания к выпуску

См. Также

«» не имеет подстраниц.

пунктов подменю WordPress разделены на 2 столбца. Легкий способ.

Последнее изменение: 25 января 2019 г.

Допустим, у вас есть длинный список элементов в одном из раскрывающихся подменю WordPress.Это часто происходит с разделами «Продукты» или «Услуги» на сайте. Итак, вы, вероятно, хотите, чтобы эти пункты подменю были разделены на 2 столбца. Но вам нужны 2 столбца только в определенных подменю, и вы не хотите чрезмерно усложнять ситуацию с помощью плагина мегаменю WP. Что ж, есть простой способ добиться этого, используя гибкость и мощность меню WP и селектор CSS: nth-child ().

Вот что мы будем делать:

Вам нужно мегаменю с неограниченным количеством столбцов и изображений? Прочтите эту статью.

Ваше меню может отличаться от изображения, это не имеет значения. Мы ищем два столбца подпунктов в раскрывающемся списке. Решение подходит для любого тематического оформления. Однако у вас должно быть меню навигации WP, созданное вами в разделе Внешний вид -> Меню. Не автоматически сгенерированный список страниц. Это единственное, что нужно.

Допустим, у вас есть главное меню и около 12 подпунктов для пункта меню «Продукты». Вот как их разбить на 2 столбца в подменю:

1.Перейдите в Внешний вид -> Меню и выберите меню, которое хотите отредактировать.

2. Введите столбцы подменю в поле верхнего пункта меню «Классы CSS» (необязательно). В нашем случае — это Товары. См. Изображение для справки.
Если вы не видите поле «Классы CSS (необязательно)» в поле пункта меню, нажмите «Параметры экрана» в правом верхнем углу экрана и установите флажок «Классы CSS».

3. Нажмите кнопку СОХРАНИТЬ МЕНЮ.

4. WordPress назначает подменю класса для ul, содержащего подпункты li-s.В вашем CSS найдите (или добавьте) селектор .sub-menu и добавьте эту строку в объявление: width: 410px; . На самом деле, вы можете установить любую ширину, какую захотите.

5. Затем добавьте этот блок CSS в свою таблицу стилей:

 .sub-menu-columns ul.sub-menu li {
дисплей: встроенный блок;
плыть налево;
ширина: 200 пикселей;
}
.sub-menu-columns ul.sub-menu li: nth-child (odd) {
плыть налево;
маржа справа: 10 пикселей;
}
.sub-menu-columns ul.sub-menu li: nth-child (even) {
float: right;
} 

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