WordPress выпадающее меню

Создаем структуру WordPress меню

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

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

CSS код выпадающего WordPress меню

Меню в вашем шаблоне выводится с помощью PHP кода:

<?php wp_nav_menu(); ?>

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

<div id="main_menu" role="navigation"><?php wp_nav_menu(); ?></div>

Теперь вам осталось добавить следующий CSS код выпадающего меню в файл style.css и у вас все должно заработать:

/* =Menu  -------------------------------------------------------------- */    #main_menu {  clear: both;  font-size: 11pt;  height: 20px;  padding: 14px 0px;  overflow: hidden;  background: #45aeff;  border: 1px solid #bce2ff;  border-bottom: none;  border-radius: 4px 4px 0 0;  -moz-border-radius: 4px 4px 0 0;  -webkit-border-radius: 4px 4px 0 0;  }    #main_menu ul {  clear: both;  margin: 0;  padding: 0px;  }    #main_menu ul li {  float: left;  list-style: none;  padding: 0 10px;  }    #main_menu a {  color: #fff;  padding: 0 10px;  text-decoration: none;  }    #main_menu .sub-menu {  display: none;  position: absolute;  margin: 0;  padding: 10px !important;  border-radius: 0 0 4px 4px;  -moz-border-radius: 0 0 4px 4px;  -webkit-border-radius: 0 0 4px 4px;  z-index: 999999;  }    #main_menu ul li:hover .sub-menu  {  display: block;  clear: both;  position: absolute;  background: #45aeff;  }    #main_menu .sub-menu li {  clear: both;  }    #main_menu a:hover {  text-decoration: underline;  }

У вас должно получиться что-то наподобие вот такого симпатичного меню 🙂

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

www.onwordpress.ru

Делаем вложенное (выпадающее) меню

Покажу на своем тестовом сайте. Главное уловите суть.

Шаг 1. Идем в Админку блога — Внешний вид — Меню

Шаг 2. Создадим новое меню. Пишем название меню (Любое. Это для вас). Жмем кнопку «Создать меню» (любую кнопку)

Шаг 3. Теперь собираем пункты меню

Слева увидите блок со «Страницами» (в нем будут ссылки на все ваши страницы), «Ссылками» (ссылки на произвольные статьи), «Рубриками» (все ваши рубрики)

Итак, отмечаем галочками те страницы, которые хотим видеть в нашем меню (можете переключить на вкладку «Все»). Если в главное верхнее меню хотите добавить ссылки на рубрики, то переключитесь на «Рубрики» и добавляйте любые рубрики. Если хотите добавить в меню ссылку на любую статью вашего сайта, то соответственно переключитесь на «Ссылки» вставляете нужный URL, прописываете название страницы и жмете «Добавить в меню»

Как видите все не так и сложно.

WordPress вообще прекрасный.

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

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

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

Все!

Удалить или изменить название элемента меню можно кликнув на стрелочку в элементе меню:

Делаем произвольное меню

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

Итак, делаем все абсолютно точно также как и делали выпадающее (вложенное) меню, только тут скорее будут участвовать рубрики и отдельные страницы, сохраняем меню и далее переходим в пункт «Внешний вид — Виджеты»

Находим виджет «Произвольное меню» и перетягиваем его в нужное место сайдбара.

1. Прописываем заголовок виджета
2. Выбираем из списка наших сохраненных меню нужное
3. Жмем «Сохранить»

Все ребята. На этом волшебство закончено.

Я люблю WordPress… Я люблю WordPress… Я люблю WordPress, т.к. больше ничего не знаю… *popcorm*

Сложно?

Если остались вопросы, спрашивайте.

aimblog.ru

Делаем выпадающее меню на WordPress

Чтобы перейти к созданию меню WordPress нужно в админпанели перейти по вкладке «Внешний вид» -> «Меню».

Обращаю Ваше внимание на то, что эта возможность появилась у WordPress, начиная с 3-ей версии. Если у Вас более ранняя версия, то обязательно обновитесь.

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

Жмите, «Настройки экрана» и поставьте галочки так, как у меня.

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

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

В поле для ввода имени меню, пишем любое название. Я назвал — «верхнее_горизонтальное_меню

».

Жмем справа кнопку «Создать меню». Теперь у нас стала активна левая колонка, которая отображает несколько блоков, позволяющие нам добавить пункты в наше меню.

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

Давайте теперь разберем каждый блок:

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


• Второй блок «Ссылки» — позволяет нам добавить в пункт меню любую ссылку. Например, я хочу в меню сделать пункт, который будет вести на мой блог. В поле «URL» я пишу адрес своего блога, а в поле «Текст» — название пункта. Жмем кнопку «Добавить в меню».
• Третий блок «Рубрики» — позволяет в пункт меню добавить любую рубрику Вашего сайта. Опять же ставьте галочку напротив нужной рубрики и жмите «Добавить в меню».
• Четвертый блок «Записи» — можно добавить ссылку на любую статью которую Вы хотите видеть в меню WordPress и нажмите «Добавить в меню». Эта возможность может Вам пригодится тогда, когда Вы хотите обратить внимание Ваших посетителей на какой-то важный или полезный пост.

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

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

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

Теперь давайте вспомним все мои капризы про выпадающее меню на WordPress и посмотрим, что мы еще можем сделать…

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

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

Так мы можем строить многоуровневые выпадающее меню WordPress. Смотрите видео!

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

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

savme.ru

Создаем выпадающее меню при помощи встроенного инструментария WordPress

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

• «Страницы сайта» и «Рубрики» выбираются из уже существующих на вашем WordPress сайте («черновые записи» рубрик и страниц в этот список не попадают);
• «Произвольные ссылки» дают возможность вставить в меню любой URL – ведущий на внешнюю или внутреннюю страницу сайта (к примеру, можно вставить ссылку на главную страницу меню или добавить рекламный линк, ведущий на ресурс партнера).

Пределов на количество меню нет, но практика показывает, что при чрезмерном «злоупотреблении», на ресурсе WordPress могут возникнуть проблемы с нормальной загрузкой страницы и отображением админки. Создавать специальные меню про запас – бессмысленное занятие, ведь есть ограничения по местам для их расположения; каждая тема создается с расчетом определённых мест под меню (как правило, это 1-2 места).

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

На примере можно рассмотреть менюшку с произвольной ссылкой. Первый этап – присвоение имени меню (имя прописываем в «Заголовке меню» и нажимаем «Сохранить»). После того, как меню будет создано, оно будет пустым и совершенно бесполезным, поэтому приступим к наполнению линками.

В роли главной сайта в Вордпресс может быть использована любая статическая страница или же последние записи (вид блога, который установлен по умолчанию). Чтобы создать в «Меню» линк на главную страницу достаточно вписать в поле «Произвольные ссылки» адрес вашего сайта. Там же можно вписать текст, например, «Главная», «Домой» и т.п. После этого нажимаем «Добавить в меню».

При корректном исполнении в «Меню» появится URL под названием «Главная». Рядом с ним будет красоваться опция «Произвольно», при нажатии на которую можно:

• отредактировать этот URL, к примеру, вписать атрибут title;
• сохранить внесенные изменения;
• убрать этот URL;
• можно сменить заголовок URL, на более привлекательный вам.

Мы изменять ничего не будем, у нас так и останется пункт под названием «Главная страница». Меню уже можно считать созданным, но его еще необходимо разместить на ресурсе. На этой же странице из выпадающего меню выбираем пункт Navigation (Main или Top), выбираем созданную нами менюшку и нажимаем «Сохранить». Вот и все, меню было создано и размещено на площадке Вордпресс.

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

Стиль меню всегда будет задаваться дизайном шаблона сайта, и иногда меню может получать не самый удачный вид. Если стандартное решение вас никак не устраивает – ничего страшного, решение есть – установим плагин «Dropdown Menu Widget».

Dropdown Menu Widget – функциональное выпадающее меню для Вордпресс

Этот плагин позволяет сделать выпадающее меню – горизонтальное или вертикальное. Причины установки плагина могут быть разнообразными: когда стандартное выпадающее меню не устраивает по определённым причинам, и хочется сделать что-то оригинальное; когда возникает необходимость в создании, к примеру, дополнительного меню (горизонтальное или вертикальное) для боковой колонки, а штатный виджет выглядит не самым лучшим решением.

Получить плагин можно по URL: https://ru.wordpress.org/plugins/dropdown-menu-widget/. После включения плагина будут доступны его настройки, состоящие из пяти разделов: «General», «Effects», «Custom colors», «Advanced», «Template Tag». На стартовой вкладке «General» необходимо сделать замену слова «Home» на «Главная» (можно присвоить другое имя, на выбор). Раздел «Effects» управляет опциями эффектов и переходами между пунктами меню (можно выставить скорость, продолжительность задержки, а также внешний вид эффекта). «Custom colors» позволяет сделать/оформить без «копания» в коде CSS стили меню, схемы ссылок, разделы меню, фон и т.п.

Благодаря разделу «Template Tag» можно выполнить настройку отображения определённого меню, которое потом можно будет вставить в вашу тему Вордпресс при помощи использования функции:

<?php shailan_dropdown_menu(); ?>

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

Пункт «Menu Tyre» позволяет выбрать тип меню, который будет размещен. Тут также присутствуют дополнительные параметры (можно выбрать, какое меню использовать – вертикальное или горизонтальное выпадающее меню), настроить выравнивание, исключить определённые страницы по ID, настроить показ формы для логина, добавить нового участника и ссылки.

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

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

Похожие статьи

wordpresslib.ru

Недавно я установил новый блог WordPress, подобрал неплохую по дизайну тему, начал уже ставить плагины и подбирать виджеты, словом, доводить тему до ума — но тут оказалось, что горизонтальное выпадающее меню эта тема не поддерживает. Дочерние страницы, в меню не выпадают, и вообще, нигде не появляются. Попробовал я и новое меню сделать в административной панели, в пункте Внешний вид — Меню, но это ничего не дало. Помог плагин Multi-level Navigation Plugin. О нем и пойдет речь.

Итак, давайте разберем по порядку действия, которые нужно выполнить, чтобы получить горизонтальное выпадающее меню для WodrPress. При этом будем рассматривать меню для страниц, потому что меню для рубрик отображается обычно в сайдбаре. Хотя плагин Multi-level Navigation Plugin позволяет делать любые меню — и для страниц, и для рубрик, и для архивов, ссылок и так далее.

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

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

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

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

В пункте Параметры меню поставьте галочку там, где данное меню будет применяться. В моей теме, например, были области Menu1 и Menu2. Одна область была над хедером, вторая — под хедером. Пробуйте добавить к какой-то области меню, и затем смотрите, что из этого получается. Можно при этом использовать закладку Управление областями.

Если и после этого выпадающее меню для WordPress не появилось, тогда остается третий вариант — использование плагина Multi-level Navigation Plugin.

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

Затем идете в Плагины — Добавить новый, в поисковой строке вбиваете Multi-level Navigation Plugin, находите и устанавливаете его.

После этого у Вас в параметрах появляется пункт Multi-level Navigation. Заходите в него. Работаете по вкладкам:

• Home — в этой вкладке находится код, который нужно вставить вместо кода выпадающего меню WordPress, который у Вас стоит сейчас. Вот этот код:
  <?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>
  Идете в пункт Внешний вид — Редактор, выбираете Заголовок (header.php) и ставите вместо кода выпадающего меню, который стоит там, код из вкладки Home. То, что Вы удаляете, на всякий случай копируйте в блокнот, чтобы была возможность вернуть его назад. если что-то не то удалите. В этой же вкладке есть ссылка на CSS генератор, она находится чуть ниже кода: Multi-level Navigation CSS. Там Вы можете подобрать код CSS, который нужно вставить во вкладке Appearance.
• Appearance — здесь находится код CSS. Изменяя его, Вы можете изменить внешний вид выпадающего окна.
• Menu contents — вкладка, в которой Вы подключаете различные элементы выпадающего меню WordPress. Например, я подключил в Menu item #1: Home, а в Menu item #2: Pages. В остальных окнах я поставил None. Если в Вашей теме выпадающих меню несколько, то и в этой вкладке тоже их будет несколько. Ниже. в пункте Titles я прописал в окне Home: Главная. И у меня получился первый пукнт горизонтального выпадающего меню — Главная, а остальные пункты — страницы.
• Settings — настройки выпадающего меню, например, самый первый пункт: скорость появления при наведении мышкой. Можно изменить от slow — медленная, до instant — мгновенная.

В самом низу нажимаете кнопку Update Options, и выпадающее меню WordPress будет готово. Плагин действительно универсальный, и практически всегда срабатывает. Так что желаю Успеха в создании выпадающих окон на своем блоге WordPress!

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

pro444.ru

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

Max Mega Menu

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

Особенности Max Mega Menu:

• Основывается на стандартной системе меню WordPress
• Поддерживает несколько мест меню, каждое со своей конфигурацией
• Конструктор путем перетаскивания элементов
• Показывает виджеты WordPress в меню
• Настраиваются стили меню с помощью встроенного редактора тем
• Переходы подменю Fade, Fade Up, Slide Up или Slide
• Добавление иконок к пунктам меню
• Опции пунктов меню, включая «Скрыть текст», «Отключить ссылку», «Скрыть на мобильном» и т. д.
• Выравнивание пунктов меню

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

Особенности Admin Menus Fixed:

• Работает с WordPress 3.5+
• Имеет три варианта Admin Menus Fixed
• Включает в себя панель инструментов WordPress
• Автоматически встраивается в WordPress
• Показывает элемент окна администратора

Dropdown Menu Widget
Этот бесплатный плагин для меню в WordPress позволяет создавать пользовательские выпадающие навигационные меню, имеет множество тем CSS, которые являются частью основных характеристик плагина.

Особенности Dropdown Menu Widget:

• Выпадающее меню только для CSS
• Страницы листинга
• Вертикальное или горизонтальное расположение
• Выбор тем для виджета

The official plugin for OpenMenu
Создавайте выпадающее меню с помощью плагина The official plugin for OpenMenu, получайте удовольствие от его работы.

Особенности OpenMenu:

• Тип пользовательских записей для OpenMenu
• Пользовательские функции
• Настройки ширины сайта
• Управление просмотром меню

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

Особенности Admin Menu Tree Page View:

• Возможность изменить порядок
• Обзор всех страниц
• Иерархическая древовидная структура
• Совместимость с WPML

JQuery Accordion Menu Widget
Используйте более продвинутые виджеты и шорткоды для создания красивого выпадающего меню с помощью этого бесплатного плагина для меню.

Особенности JQuery Accordion Menu Widget:

• Клик/Наведение
• Автоматическое расширение в зависимости от текущей страницы/пункта
• Отключение родительских ссылок
• Различные меню
• Задержка при наведении

Admin Menu Tree Page View
Удобные меню поиска и редактирования, создание иерархического выпадающего меню и упорядочивание всех меню так, как вам нужно.

Особенности Admin Menu Tree Page View:

• Изменение порядка страниц
• Просмотр всех страниц
• Совместимость с WPML

Responsive Select Menu
Автоматически встраивается в WordPress 3.0 и выше, меню в окне выбора лучшее для мобильных устройств. Этот бесплатный плагин для меню в WordPress весьма интересен в использовании.

Особенности Responsive Select Menu:

• Устойчивая работа на мобильных устройствах
• Более лёгкая навигация для устройств с сенсорным экраном
• Не нуждается в дополнительном PHP-коде

JQuery Mega Menu Widget
Создавайте различные выпадающие меню с использованием меню пользователя в WordPress, просто используя jQuery.

Особенности JQuery Mega Menu:

• Наведение/Клик
• Нумерация элементов в строке
• Несколько обложек
• Эффект анимации
• Скорость анимации
• Набор подменю

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

Особенности WP-Easy Menu:

• Страницы или пользовательские ссылки
• Создание встроенного меню
• Автоматическая работа меню

jQuery Dropdown Menu
Создавайте горизонтальное и вертикальное выпадающего меню с помощью этого известного плагина для меню в WordPress

Особенности jQuery Dropdown Menu:

• Цвет заднего фона в главном меню
• Скруглённые границы (или нет)
• Разделение кнопок
• Указатель мыши поверх цвета заднего фона
• Задаётся размер и цвет шрифта в меню

Ozh’ Admin Drop Down Menu
Создавайте прекрасное горизонтальное выпадающее меню с помощью плагина Ozh’ Admin Drop Down.

Особенности Ozh’ Admin Drop Down Menu:

• Выпадающее меню для CSS
• Интерфейс API для программистов
• Не поддерживаются инсталляции WordPress

JQuery Vertical Mega Menu Widget

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

Особенности JQuery Vertical Mega Menu Widget:

• Нумерация элементов в строке
• Эффект анимации
• Управление анимацией
• Скорость анимации
• 8 различных обложек

WP Responsive Menu

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

Особенности WP Responsive Menu:

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

Custom Taxonomies Menu Widget
Очень простое классификационное меню может быть создано с помощью Custom Taxonomies Menu Widget, также вы можете использовать панель управления виджета для дополнительных опций.

Особенности Custom Taxonomies Menu Widget:

• Выбор классификации пользователя для отображения
• Изменение порядка отображения в пользовательских классификациях
• Возможность выбора, следует ли отображать классификацию
• Возможность выбора, следует ли отображать список терминов в виде иерархии

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

clubwp.ru

Демо-версия

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

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

Создаем меню в WordPress

WordPress 3 имеет простой в использовании drag-and-drop интерфейс для создания структуры меню. Если вы еще не работали с меню, чтобы создать и сохранить пользовательское меню, перейдите Внешний вид > Меню. Задайте для меню название и сохраните его:

Добавление пользовательского Walker-класса в functions.php

Прежде, чем мы сможем вывести меню в файле темы WordPress, нам нужно добавить Walker-класс WordPress в файл functions.php.

Этот код «очистит» выводимую HTML-разметку нашего меню, чтобы мы могли легко создавать CSS. Скопируйте и вставьте код класса Walker в файл functions.php, который располагается в папке темы. Если файл functions.php не существует, создайте его, а затем вставьте в него код класса:

Вывод меню через файл темы

Теперь у нас есть созданное меню и размещенный класс Walker. Пришло время вывести наше меню через файл темы. Для этого мы используем функцию wp_nav_menu(). С помощью PHP мы вызовем эту функцию и передадим ей параметры нашего меню для вывода структуры HTML.

Параметр menu — это название меню, созданного нами в шаге 1. container_id добавляет в HTML-код меню идентификатор CSS, который мы будем использовать позже в стилях CSS. Параметр Walker указывает функции wp_nav_menu() использовать для вывода HTML-разметки наш пользовательский Walker-класс WordPress:

Добавьте этот PHP-код в один из файлов темы. Где бы вы его не поместили, меню будет выводиться в этом месте. Я использую тему WordPress по умолчанию Twenty Thirteen. Она содержит файл header.php, в него я и вставлю этот код.

Если вы сделали все правильно, то сейчас должны увидеть, что в вашей теме отображается HTML-список без заданных стилей:

Добавление CSS

Откройте файл CSS вашей темы styles.css (в папке CSS или в корневом каталоге темы). Вы можете сразу скопировать и вставить весь приведенный ниже код в файл CSS вашей темы. Я буду разбивать CSS-код на части, чтобы пояснять каждый его фрагмент.

Обратите внимание, что мы используем тот же идентификатор, который мы указали в функции wp_nav_menu() — #cssmenu.

Первый фрагмент CSS-кода — это всего лишь несколько строк, чтобы быть уверенными, что все браузеры начинают обработку с той же точки:

Следующий фрагмент CSS-кода — это стили первого уровня выпадающего меню. Если браузер пользователя не поддерживает градиенты, то заполните фон цветом #3c3c3c.

Псевдокласс :after позволяет добавить тонкую цветную рамку вокруг каждого пункта меню:

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

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

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

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

Исходные файлы

По этой ссылке вы можете скачать исходные файлы. ZIP-архив содержит functions.php и styles.css:

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

www.internet-technologies.ru

Установка и настройка плагина выпадающего меню 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.Во вкладке открывшегося окна «Мега Меню» мы можем:
   • В разделе «Режим отображения» выбрать способ расположения элементов. Если мы выберем пункт «Выпадающее меню», то в результате мы получим стандартное выпадающее меню WordPress, где пункты будут открываться при наведении на них указателя мышки, либо клике по ним.

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

   • В раскрывающемся списке, который расположен рядом с настройкой режима отображения мы можем выбрать и добавить в открывающуюся область любой из доступных виджетов
   • В следующем раскрывающемся списке мы можем изменить количество столбцов, в которых будут располагаться наши пункты и добавленные виджеты.
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.Далее, в соответствующем месте шаблона с новой строки вставляем скопированную функцию:
4. 4.После чего сохраняем файл и выгружаем его на хостинг, нажив на дискетку или сочетанием клавиш CTRL+S.

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

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

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

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

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

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

impuls-web.ru