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

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

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

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

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

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

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

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

из репозитория.

1. 1.Заходим в админку WordPress и переходим в раздел «Плагины» => «Добавить новый».
2. 2.В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».
3. 3.Далее, нам нужно перейти в раздел «Внешний вид» => «Меню» и здесь создать новое, или выбрать уже существующее меню, которое мы хотим сделать выпадающим. Для наглядности и экономии времени я заранее сделала заготовку, которое имеет в разделе «Каталог» два уровня вложенности.
4. 4.Для начала работы с плагином нам нужно включить его в левой панели управления, в разделе
   «Настройка Max Mega Menu»
5. 5.Здесь же мы можем в графе «Событие» выбрать, при каких действиях пользователя будет открываться пункты меню.

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

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

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

   Клик мышки – открывается при клике указателем мышки по пункту

6. 6.В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress

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

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

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

11. 11.Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»
12. 12. На вкладке «Темы меню» нам нужно задать тему цветового оформления для нашего выпадающего меню WordPress, так как в этом плагине нет стандартных заготовок.

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

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

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

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

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

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

1. 1.Переходим на вкладку «Локации меню» в настройках плагина и копируем php-функцию:
2. 2.Далее, при помощи текстового редактора Notepad++ подключаемся к нашему сайту по FTP и открываем файл footer.php, который находится в корне темы оформления вашего сайта.
3. 3.Далее, в соответствующем месте шаблона с новой строки вставляем скопированную функцию: Обратите внимание! Так как вёрстка у разных шаблонов разная, то определить блок в который нужно вставить код меню вам нужно будет самостоятельно.
   В этом вам может помочь следующая статья:
   «Изменение темы WordPress. Определение Class и ID»
4. 4.После чего сохраняем файл и выгружаем его на хостинг, нажив на дискетку или сочетанием клавиш CTRL+S.

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

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

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

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

Выпадающее меню в wordpress: делаем вместе

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

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

Не знаешь о чем создать блог? Выбери тему прямо сейчас

Разбираемся вместе, где и как зарегистрировать домен

Отличный хостинг для Вордпресс — наш выбор Fullspace

Как установить шаблон на WordPress за три простых шага

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

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

Виды меню

На сайте вордпресс можно выделить несколько видов:

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

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

Для чего используют меню

В чем плюс создания такого вида списков? Все просто:

1. Экономия места. Вам не придется умещать в одну основную строку каталога несколько разделов своего сайта. Вы сможете качественно сгруппировать все страницы, при этом сэкономив место.
2. Красота. Просто нажимать на ссылки не на столько интересно, как навести на нее и посмотреть, а что еще есть в разделе.
3. Удобство. Читателю гораздо удобнее сразу перейти на интересующую ссылку, нежели переходить 10 раз со страницы на страницу, чтобы добраться до желаемого результата.

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

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

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

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

 

Нажимаем на «Меню».

 

Нам откроются настройки.

Здесь мы нажимаем на кнопку «Создать новое меню».

 

Вводим название нового каталога (на примере я ввела Главная) и кликаем на «Создать меню».

Нажимаем на стрелку «Ссылки».

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

 

Затем кликаем на вкладку «Страницы».

 

Выбираем те, которые нам нужны, и нажимаем на «Добавить в меню».

 

У нас добавились элементы, которые мы хотим видеть в нашем меню.

Простое меню готово!

Теперь рассмотрим как сделать выпадающее меню.

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

Создаем произвольную ссылку. Для этого в поле «URL» прописываем http://# и называем «Навигация». Затем нажимаем «Добавить в меню».

Появился новый элемент. Теперь мы можем его перетащить под «Главная», чтобы раздел находился в ней, появится надпись «Дочерний элемент».

 

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

Затем, нажав на стрелочку вкладки «Навигация» в поле «URL» удаляем всю информацию.

Таким же образом смещаем все остальные элементы.

У нас готов первый уровень.

Теперь сделаем по этому же принципу второй уровень. Для этого нам понадобится еще один элемент: рубрики. Добавим его сразу также как мы добавляли элемент «Навигация».

Выделим все для нас необходимое и добавим в наше основное.

Теперь все что появилось, переносим в «Рубрики», создаем дочерние элементы.

 

Теперь «Рубрики» добавляем в «Навигацию» и у нас появляется 3-х уровневый выпадающий список.

 

Чтобы посмотреть, что получилось, нужно нажать на «Сохранить».

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

Готово!

Заходим на наш проект, наводим на кнопку «Главная» и у нас всплывает перечень.

Наводим на поле «Навигация» и «Рубрики», и у нас открывается следующие вкладки.

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

Удачи в ваших начинаниях!

Екатерина Калмыкова

меняем вид меню и делаем выпадающее меню « Все о WEB программировании

01.10.2013 Ромчик

10

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

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

Выпадающее меню в WordPress создается в админке. Для этого переходим в «Внешний вид»-> «Меню»

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

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

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

Теперь добавим пункт меню. Например страницу «Главная». Выбираем ее в левой части и жмем «Добавить в меню». Дальше в правой части жмем «Сохранить меню». Все пункт меню добавлен.

Мы можем его подредактировать. Для этого нажмите на стрелочку рядом с надписью «Страница». Мы можем изменить текст ссылки. Для этого в поле «Текст ссылки» укажите необходимый текст. В поле «Атрибут title» мы можем указать title ссылки. Мы можем удалить данный пункт меню, нажав на ссылку «Удалить» или отменить все изменения, нажав по ссылке «Отмена». После внесения всех изменений необходимо нажать «Сохранить меню».

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

Если мы хотим поменять порядок пунктов, то просто перетащите необходимый пункт на необходимую позицию. Так, например, я захотел, чтобы пункт «Без рубрики» стоял после пункта «Главная».

Теперь мы хотим, чтобы пункт «Без рубрики» стал подпунктом пункта «Главная». Для этого просто перетащите пункт «Без рубрики вправо».

После всех изменений не забывайте сохранять меню.

Мы с вами создали меню, создали пункты меню и создали подпункты меню. Теперь самое интересное – будем делать выпадающее меню.

 Шаг 2. Настройка внешнего вида меню.

Давайте посмотрим как выглядит наше меню. Для этого перейдем на наш сайт:

Теперь наведем курсор мыши на пункт «Главная»

Как видим появился выпадающий подпункт «Без рубоики».

Теперь давайте рассмотрим подробнее html код нашего меню:

• Все меню по умолчанию заключено в div с классом menu-menu-container.
• Дальше идет список ul с классом menu.
• Каждый пункт меню заключен в li со многими классами, но нам интересны два класса menu-item и current-menu-item (этот класс только у текущего пункта меню)
• Подпункты определенного пункта заключены в список ul с классом sub-menu.
• Каждый подпункт заключен в li с теми же классами, что и пункты родительского меню.

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

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

Понравилась статья? Поделись с друзьями.

Горизонтальное выпадающее меню Супер плагин WordPress – INFO-EFFECT

На чтение 8 мин. Опубликовано 01.11.2016

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

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

 

 

Установить Супер плагин Max Mega Menu вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

 

Далее, после установки и активации плагина, перейдите на страницу: Mega Menu. Здесь вы сможете настроить основные настройки плагина.

 

 

 General Settings.

– Click Event Behaviour, поведение при клике. Здесь у вас на выбор два варианта:

• First click will open a sub menu, second click will close the sub menu, первый клик открывает подменю, второе нажатие закрывает подменю;
• First click will open a sub menu, second click will follow the link, первый клик открывает подменю, второй клик по ссылке.
• Оставьте по умолчанию, ничего не меняйте.

 

– Mobile Menu Behaviour, поведение на мобильном меню,

• Standard – Open sub menus will remain open until closed by the user, Стандарт – открытое подменю будет оставаться открытым, пока его не закроет пользователь.
• Accordion – Open sub menus will automatically close when another one is opened, Аккордеон – открытые подменю будет автоматически закрываться, когда другое открыто.

 

– CSS Output, оставьте по умолчанию, ничего не надо менять здесь.

– Menu Item Descriptions, включить или отключить описание для пунктов меню.

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

– Сохраните сделанные изменения.

 

 Menu Themes.

– Select theme to edit, здесь указано меню, которое вы будете редактировать. Можно создать и выбрать другое меню.

– Theme Title, заголовок темы меню, оставьте по умолчанию.

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

– Line Height, линия высоты.

– Z Index, показатель Z Index, можно оставить по умолчанию.

– Shadow, можно настроить тень меню.

– Hover Transitions, включить переходы при наведении на пункты меню.

– Reset Widget Styling, отключить стили виджетов Mega Menu.

 

Menu Bar.

– Menu Height, высота меню.

– Menu Background, цвет фона меню.

– Menu Padding, обивка меню.

– Menu Border Radius, радиус границы меню.

– Menu Items Align, расположение пунктов меню.

– Menu Item Background, цвет фона пунктов меню.

– Menu Item Background (Hover), цвет фона пункта меню при наведении.

– Menu Item Spacing, интервал пунктов меню.

– Font, параметры шрифта, цвет, размер, расположение, семейство и т.д.

– Font (Hover), параметры шрифта при наведении.

– Menu Item Padding, обивка пунктов меню.

– Menu Item Border, параметры границы пункта меню.

– Menu Item Border (Hover), параметры границы пункта меню при наведении.

– Menu Item Border Radius, параметры радиуса границы пункта меню.

– Menu Item Divider, разделитель меню.

– Highlight Current Item, выделять текущий пункт меню.

 

Mega Menus.

– Panel Background, цвет фона выпадающего меню.

– Panel Width, ширина окна выпадающего меню.

– Panel Padding, обивка.

– Panel Border, цвет и размер границ.

– Panel Border Radius, радиус границы.

– Item Padding, обивка пункта меню в выпадающем меню.

 

Widgets.

– Heading Font, параметры шрифта заголовка виджета в выпадающем меню.

– Heading Padding, обивка заголовка.

– Heading Margin, отступы от границ заголовка виджета.

– Header Border, параметры границы бордюра.

– Content Font, шрифт в содержании виджета.

 

Second Level Menu Items.

– Font, шрифт пунктов меню второго уровня.

– Font (Hover), шрифт при наведении.

– Background (Hover), цвет фона при наведении.

– Padding, обивка.

– Margin, отступ.

– Border, бордюр, граница.

 

Third Level Menu Items. Те же настройки, только для пунктов меню третьего уровня.

 

Flyout Menus.

– Menu Background, цвет фона выпадающего меню второго или третьего уровня.

– Menu Width, ширина меню.

– Menu Padding, обивка.

– Menu Border, граница.

– Menu Border Radius, радиус границы.

– Item Background, цвет фона пункта меню.

– Item Background (Hover), цвет фона пункта при наведении.

– Item Height, высота пункта меню.

– Item Padding, обивка пункта.

– Item Font, шрифт текста в пункте меню.

– Item Font (Hover), шрифт при наведении.

– Item Divider, разделитель элемента.

 

Mobile menu.

– Toggle Bar Designer, здесь показано как выглядит меню на мобильных устройствах.

– Responsive Breakpoint, ширина для перехода в мобильное меню.

– Toggle Bar Background, цвет фона кнопки открытия мобильного меню.

– Disable Mobile Toggle, можно отключить переключатель меню.

– Toggle Bar Height, высота переключателя мобильного меню.

– Mega Menu Columns, сколько колонок в выпадающем меню на мобильном сайте.

– Menu Background, цвет фона мобильного меню.

– Menu Item Height, высота пункта меню.

 

Custom Styling. Здесь можно добавить свои CSS стили для меню.

– Сохраните сделанные изменения.

 

 Menu Locations.

– Registered Menu Locations, здесь вы сможете создавать области меню, в которые потом сможете добавлять меню. Чтобы создать область для меню, нажмите на кнопку – Add another menu location.

 

 

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

 

 

На странице: Внешний вид – Меню – Управление областями, вы сможете добавить меню для области.

 

 

 Tools.

– Cache, здесь можно очистить кэш CSS, не обязательно, кэш автоматически очищается при каждом сохранении меню.

– Plugin Data, удалить все данные плагина, сохранённые в базе данных WordPress. Только в случае удаления плагина!

– Export Theme, можно экспортировать тему мега меню в формате JSON или PHP.

– Import Theme, можно импортировать тему мега меню.

 

Далее, чтобы создать горизонтальное выпадающее меню, перейдите на страницу: Внешний вид – Меню. Слева у вас появится виджет “Max Mega Menu Settings”.

– Enable, поставьте здесь галочку, чтобы включить мега меню.

– Event, здесь можно выбрать как будет открываться выпадающее меню.

– Effect, можно выбрать эффект для выпадающего меню.

– Theme, тема меню, по умолчанию.

 

После включения мега меню, в каждом виджете страницы, при наведении, появится кнопка – Mega Menu. Нажмите на данную кнопку, чтобы настроить выпадающее меню для данного пункта меню.

 

 

Далее, у вас откроется окно. Вверху справа нажмите по широкому полю, чтобы выбрать виджет и добавить его в меню. Вверху справа вы можете выбрать сколько будет колонок в выпадающем меню. Виджеты можно распределять по выпадающей панели, можно указать какую часть виджет будет занимать, пример 1/2 или 1/3. Жмите по стрелкам вправо и влево, чтобы указать какую часть будет занимать виджет.

 

 

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

 

 

Далее, слева перейдите на вкладку – Settings. Здесь можно настроить дополнительные параметры:

– Hide Text, скрыть текст из пункта меню.

– Hide Arrow, скрыть стрелку.

– Disable Link, отключить ссылку.

– Hide item on Mobile, скрыть пункт меню на мобильных устройствах.

– Hide item on Desktop, скрыть пункт меню на компьютерах.

– Menu item Align, расположение пункта меню.

– Sub Menu Align, расположение меню второго уровня.

– Hide sub menu on Mobile, скрыть меню второго уровня на мобильных устройствах.

– Сохраните изменения.

 

 

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

 

 

Всё готово! Сохраните меню, перейдите на сайт и наслаждайтесь результатом!

Внимание! После включение мега меню, стиль вашего меню по умолчанию будет полностью изменён. Вам нужно будет настраивать стиль меню в настройках, на вкладке “Menu Themes”.

 

Остались вопросы? Напиши комментарий! Удачи!

 

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

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

Зачем нужны выпадающие меню?

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

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

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

Посмотрим, что для этого нужно, и как это сделать на своем ВП-сайте.

Тема с поддержкой выпадающего меню

Отображение выпадающих элементов в ВордПресс полностью зависит от темы. Большинство поддерживает эту функцию. Но все равно вы должны в этом убедиться.

Как проверить?

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

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

1. Astra – бесплатный многоцелевой WordPress-шаблон с несколькими готовыми демо-сайтами.
2. Reboot – современная и быстрая премиальная блоговая/новостная тема со встроенным конструктором главной.
3. Journal X – платная красивая журнальная WP-тема с бесконечной подгрузкой контента.

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

Шаг 1. Создаем меню

Если это уже сделано, то смело переходите ко второму шагу.

Сделаем простое меню.

В админке перейдите Внешний вид > Меню и нажмите создайте новое меню.

Дайте имя новому меню и кликните Создать меню.

В блоке слева отметьте нужные пункты и нажмите Добавить в меню, а затем Сохранить меню.

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

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

Для примера создадим выпадающее меню из категорий постов.

Добавим их.

Если перейти на сайт, то навигация будет выглядеть:

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

После того, как сохраните изменения, на сайте появится выпадающий список:

Выпадающее меню через плагин

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

В каталоге есть несколько решений. Один из популярных – плагин Max Mega Menu. С ним вы создадите структуру меню любой сложности, сможете добавить эффекты при наведении и нажатии и другие полезности.

Установку и работу с ним мы рассматривали в одной из прошлых статей.

Заключение

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

Если Вам понравилась статья — поделитесь с друзьями

Горизонтальное выпадающее меню Супер плагин WordPress

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

 

 

Установить Супер плагин Max Mega Menu вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

 

Далее, после установки и активации плагина, перейдите на страницу: Mega Menu. Здесь вы сможете настроить основные настройки плагина.

 

 

 General Settings.

— Click Event Behaviour, поведение при клике. Здесь у вас на выбор два варианта:

• First click will open a sub menu, second click will close the sub menu, первый клик открывает подменю, второе нажатие закрывает подменю;
• First click will open a sub menu, second click will follow the link, первый клик открывает подменю, второй клик по ссылке.
• Оставьте по умолчанию, ничего не меняйте.

 

— Mobile Menu Behaviour, поведение на мобильном меню,

• Standard — Open sub menus will remain open until closed by the user, Стандарт — открытое подменю будет оставаться открытым, пока его не закроет пользователь.
• Accordion — Open sub menus will automatically close when another one is opened, Аккордеон — открытые подменю будет автоматически закрываться, когда другое открыто.

 

— CSS Output, оставьте по умолчанию, ничего не надо менять здесь.

— Menu Item Descriptions, включить или отключить описание для пунктов меню.

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

— Сохраните сделанные изменения.

 

 Menu Themes.

— Select theme to edit, здесь указано меню, которое вы будете редактировать. Можно создать и выбрать другое меню.

— Theme Title, заголовок темы меню, оставьте по умолчанию.

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

— Line Height, линия высоты.

— Z Index, показатель Z Index, можно оставить по умолчанию.

— Shadow, можно настроить тень меню.

— Hover Transitions, включить переходы при наведении на пункты меню.

— Reset Widget Styling, отключить стили виджетов Mega Menu.

 

Menu Bar.

— Menu Height, высота меню.

— Menu Background, цвет фона меню.

— Menu Padding, обивка меню.

— Menu Border Radius, радиус границы меню.

— Menu Items Align, расположение пунктов меню.

— Menu Item Background, цвет фона пунктов меню.

— Menu Item Background (Hover), цвет фона пункта меню при наведении.

— Menu Item Spacing, интервал пунктов меню.

— Font, параметры шрифта, цвет, размер, расположение, семейство и т.д.

— Font (Hover), параметры шрифта при наведении.

— Menu Item Padding, обивка пунктов меню.

— Menu Item Border, параметры границы пункта меню.

— Menu Item Border (Hover), параметры границы пункта меню при наведении.

— Menu Item Border Radius, параметры радиуса границы пункта меню.

— Menu Item Divider, разделитель меню.

— Highlight Current Item, выделять текущий пункт меню.

 

Mega Menus.

— Panel Background, цвет фона выпадающего меню.

— Panel Width, ширина окна выпадающего меню.

— Panel Padding, обивка.

— Panel Border, цвет и размер границ.

— Panel Border Radius, радиус границы.

— Item Padding, обивка пункта меню в выпадающем меню.

 

Widgets.

— Heading Font, параметры шрифта заголовка виджета в выпадающем меню.

— Heading Padding, обивка заголовка.

— Heading Margin, отступы от границ заголовка виджета.

— Header Border, параметры границы бордюра.

— Content Font, шрифт в содержании виджета.

 

Second Level Menu Items.

— Font, шрифт пунктов меню второго уровня.

— Font (Hover), шрифт при наведении.

— Background (Hover), цвет фона при наведении.

— Padding, обивка.

— Margin, отступ.

— Border, бордюр, граница.

 

Third Level Menu Items. Те же настройки, только для пунктов меню третьего уровня.

 

Flyout Menus.

— Menu Background, цвет фона выпадающего меню второго или третьего уровня.

— Menu Width, ширина меню.

— Menu Padding, обивка.

— Menu Border, граница.

— Menu Border Radius, радиус границы.

— Item Background, цвет фона пункта меню.

— Item Background (Hover), цвет фона пункта при наведении.

— Item Height, высота пункта меню.

— Item Padding, обивка пункта.

— Item Font, шрифт текста в пункте меню.

— Item Font (Hover), шрифт при наведении.

— Item Divider, разделитель элемента.

 

Mobile menu.

— Toggle Bar Designer, здесь показано как выглядит меню на мобильных устройствах.

— Responsive Breakpoint, ширина для перехода в мобильное меню.

— Toggle Bar Background, цвет фона кнопки открытия мобильного меню.

— Disable Mobile Toggle, можно отключить переключатель меню.

— Toggle Bar Height, высота переключателя мобильного меню.

— Mega Menu Columns, сколько колонок в выпадающем меню на мобильном сайте.

— Menu Background, цвет фона мобильного меню.

— Menu Item Height, высота пункта меню.

 

Custom Styling. Здесь можно добавить свои CSS стили для меню.

— Сохраните сделанные изменения.

 

 Menu Locations.

— Registered Menu Locations, здесь вы сможете создавать области меню, в которые потом сможете добавлять меню. Чтобы создать область для меню, нажмите на кнопку — Add another menu location.

 

 

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

 

 

На странице: Внешний вид — Меню — Управление областями, вы сможете добавить меню для области.

 

 

 Tools.

— Cache, здесь можно очистить кэш CSS, не обязательно, кэш автоматически очищается при каждом сохранении меню.

— Plugin Data, удалить все данные плагина, сохранённые в базе данных WordPress. Только в случае удаления плагина !

— Export Theme, можно экспортировать тему мега меню в формате JSON или PHP.

— Import Theme, можно импортировать тему мега меню.

 

Далее, чтобы создать горизонтальное выпадающее меню, перейдите на страницу: Внешний вид — Меню. Слева у вас появится виджет «Max Mega Menu Settings».

— Enable, поставьте здесь галочку, чтобы включить мега меню.

— Event, здесь можно выбрать как будет открываться выпадающее меню.

— Effect, можно выбрать эффект для выпадающего меню.

— Theme, тема меню, по умолчанию.

 

После включения мега меню, в каждом виджете страницы, при наведении, появится кнопка — Mega Menu. Нажмите на данную кнопку, чтобы настроить выпадающее меню для данного пункта меню.

 

 

Далее, у вас откроется окно. Вверху справа нажмите по широкому полю, чтобы выбрать виджет и добавить его в меню. Вверху справа вы можете выбрать сколько будет колонок в выпадающем меню. Виджеты можно распределять по выпадающей панели, можно указать какую часть виджет будет занимать, пример 1/2 или 1/3. Жмите по стрелкам вправо и влево, чтобы указать какую часть будет занимать виджет.

 

 

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

 

 

Далее, слева перейдите на вкладку — Settings. Здесь можно настроить дополнительные параметры:

— Hide Text, скрыть текст из пункта меню.

— Hide Arrow, скрыть стрелку.

— Disable Link, отключить ссылку.

— Hide item on Mobile, скрыть пункт меню на мобильных устройствах.

— Hide item on Desktop, скрыть пункт меню на компьютерах.

— Menu item Align, расположение пункта меню.

— Sub Menu Align, расположение меню второго уровня.

— Hide sub menu on Mobile, скрыть меню второго уровня на мобильных устройствах.

— Сохраните изменения.

 

 

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

 

 

Всё готово ! Сохраните меню, перейдите на сайт и наслаждайтесь результатом !

Внимание ! После включение мега меню, стиль вашего меню по умолчанию будет полностью изменён. Вам нужно будет настраивать стиль меню в настройках, на вкладке «Menu Themes».