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

menu wordpressПриветствую вас! Мы с вами проделали громадную работу на пути к созданию своего детища (блога) и плавненько подошли к его настройке и к его оформлению. Я знаю, что большинство из вас пользуются популярной и удобной программой WordPress, которая предназначена для управления контентом (СМS). Вот мы и подошли к нашей основной сегодняшней теме, это выпадающее меню wordpress. Как вы думаете, для чего вообще используется меню на сайте? Правильно для удобства, экономии места, ну и конечно же для красоты, без этого никак).

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

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

Способ 1

Топаем в админ панель сайта, затем «Внешний вид» — «Меню».

meny-1

 

meny-2

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

Вам нужно найти в верхнем правом углу вот такой чекбокс. 

meny-3

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

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

meny-4

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

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

meny-5

Давайте разберем каждый блок по отдельности. meny-6

  • «Страницы» — это 1 блок, который позволяет вам добавлять в пункт «Меню страницы», которые уже есть на вашем ресурсе.
  • «Ссылки» — это второй блок, который позволит нам добавить в меню совершенно любую ссылку.
  • «Рубрики» — это третий блок, с помощью которого вы сможете добавить любую рубрику на свой блог. Напротив, нужной рубрики выставляем галочку и нажимаем «Добавить в меню».
  • «Записи» — это четвертый блок, здесь вы сможете добавить ссылку на любой пост, который вы хотите видеть в выпадающем меню WordPress, и жмем «добавить в меню». Что вам это даст? А вот что. Эта функция вам пригодится, если вы хотите, чтобы посетители вашего веб-сайта обратили внимание на какую-нибудь важную статью.

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

«Атрибут title», в это поле вписываем разъяснение к пункту. Оно будет всплывет ели вы наведете курсор мыши на пункт меню. Для открытия пункта в новом окошке браузера, напротив выставляем галочку «Открыть ссылку в новом окне-Вкладке».

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

Способ №2 Плагин Mega Main Menu

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

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

Сначала устанавливаем наш Мега плагин из репозитория. Если не знаете, как установить плагин, то читаем эту статью.  

meny-7

Когда активировался наш плагин, идем «Внешний вид» — «Меню». Создаем новое или уже существующее меню. Чтобы не терять время зря я заранее сделал заготовку, которое имеет 2 уровня сложности в разделе «Каталог»

meny-8

Чтобы на плагин начал свою работу его нужно включить. Делается это в панели управления в левой части, в области «Настройка Max Mega Menu»

meny-9

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

meny-10

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

  • Hover intent – практически тоже самое, что и «Наведение мышки».
  • «Наведение мыши» – откроется при наведении
  • «Клик мыши» – открывается при клике
  • «Эффект» — в этой графе вы можете выбирать эффекты при открытии меню. 

meny-11

С какой скоростью оно будет открываться. 

meny-12

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

meny-13

В открывшемся окошке Mega Menu вы можете проделать следующие действия:

Выбирать способы расположения элементов, это делается в разделе «Режим отображения»

Если вы хотите получить стандартное меню Вордпресс, то это вы легко сделаете в разделе «Выпадающее меню»

meny-14

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

meny-15

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

meny-16

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

meny-17

Вам нужно скрыть надпись, стрелку, или вообще выключить ссылку, отключить отображение элементов на ПК или мобильниках, то это все вы можете сделать во вкладке «Settings»

meny-18

Вкладка «Icon», здесь все понятно из самого названия. 

meny-19

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

На главной странице Вордпресс переходим в раздел «Мега меню». Тут нам нужно следующее:

  • «Темы меню»
  • «Локации меню»

meny-20

Задаем цветовое оформление. 

meny-21

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

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

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

  • «Внешний вид» — «Виджеты»
  • Вам нужно выбрать виджет «Mega Menu» и добавить его в сайт бар. 

meny-22

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

meny-23

Если вы желаете сделать дублирующее menu в футере блога, то проделываем следующие шаги:

 Копируем php функцию в настройках плагина и топаем во вкладочку «Локации меню»

meny-24

С помощью Notepad++ подключаемся к сайту по FTP, открываем файл «footer.php», он как вы наверняка знаете находится в корне оформления вашего проекта. 

meny-25

Скопированную функцию вставляем в соответствующем месте шаблона с новой строки. 

meny-26

Внимание! Верстка у шаблонов разная, то есть самостоятельно определяем блок, в который необходимо вставить код menu.

И последние шаги. Файл сохраняем и выгружаем его на свой хостинг, сочетанием клавиш CTRL+S или нажав на дискету. Ну что посмотрим, что мы наляпали? 

meny-27

Ну что, наше главное menu продублировано в подвале блога.

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

С уважением Вячеслав Коптяков!

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:good:  :bye:  :negative:  :scratch:  :wacko:  :yahoo:  B-)  :heart:  :-)  :rose:  :whistle:  :yes:  :cry:  :mail:  :-( 
:unsure:  ;-) 
 
Мой магазин
Shop
Подарок автора
dvd200
Отличный выбор
Дешевый хостинг. Выбор профессионалов!