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


Содержание материала:

Очередной блог фрилансера

коротко и полезно о веб-разработке

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

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

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

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

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

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

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

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

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

2. Теперь расположим меню ниже заголовка, для этого открываем файл header.php, и после блока «headerimg», вставляем следующие строки:

Здесь параметр title_li=, с пустым значением, означает что меню выведется без предваряющей надписи «Стараницы».

3. Теперь добавим стилей для нашего меню, чтобы оно выглядело соответственно общему дизайну темы, в файле style.css:

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

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

Здесь .current_page_item — текущая активная страница (на скриншоте ниже это страница «партнерам»), .current_page_parent — это ее родительская страница.

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

Далее потребуется подключить jquery, к нашему шаблону. Это можно сделать в разделе head, до функции , файла header.php, следующей строчкой:

Далее код, который позволит отображать дочернее меню, при наведении мыши:

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

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

Можно добавить эффект появления без прозрачности, вертикальный:

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

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

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

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

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

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

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

При помощи штатных инструментов WordPress можно выполнить простую, но лишенную всяких лишних «наворотов» навигацию на сайте.

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

Создаем выпадающее меню при помощи встроенного инструментария 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 файлах вашей темы нужно найти функцию, отвечающую за его вызов, и поставить на ее место указанный выше код.

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

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

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

Выпадающее меню в wordpress. Как его сделать?

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

Топ-пост этого месяца:  Минусинск в Яндексе — за что накладывается фильтра, как проверить нахождение сайта под Минусинском

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

1. Перед тем, как создать выпадающее меню, обязательно удалите стандартное меню. Откройте файл — sidebar.php , найдите в нем строчку:

и смело ее удаляйте;

2. Теперь откройте файл — header.php , найдите окончание блока «headerimg» и после него вставляйте следующие строки код:

Значение «menu» указывает на то, что меню будет для страниц, а если изменить это значение на «categories», то это меню будет выводить все созданные рубрики;

3. Сейчас необходимо зайти в style.css и добавить туда (желательно после блоков, которые отвечают за шапку) эти стили :

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

5. Самый важный и последний шаг, который сделает из меню, выпадающее. Для этого в style.css редактируем последний блок стиля выпадающего меню и делаем его таким:

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

И добавляем код, который позволит показывать меню дочернее при наведении :

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

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

15 бесплатных плагинов меню для WordPress

15 бесплатных плагинов меню для WordPress

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


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, которые являются частью основных характеристик плагина.


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 — это простой плагин, который позволяет в кратчайшие сроки добавить настраиваемое адаптивное меню на любой сайт WordPress, а настройку можно выполнить прямо со страницы настроек, без необходимости кодирования.

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

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

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

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

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

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

20 плагинов мега-меню для WordPress

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

Толчком к развитию концепции мега-меню послужил, вероятно, ленточный интерфейс Microsoft Office 2007. Эта концепция находится как раз посредине между простым статическим меню и динамическим раскрывающимся. С одной стороны, такое меню достаточно информативно и интуитивно понятно, с другой — значительно сокращает необходимые манипуляции мышью. Раскрываясь, оно может использовать все доступное пространство экрана, что позволяет пользователю охватить взглядом все предлагаемые в данном контексте пункты, а при необходимости скрывается.

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

UberMenu: WordPress Mega Menu Plugin

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

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

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

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

Mega Main Menu

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

Liquida Mega Menu

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

Плагин предлагает широкие возможности для создания меню с современным и стильным дизайном: вертикальной или горизонтальной ориентацией, возможностью включать в пункты меню ссылки, изображения и даже карточки товаров WooCommerce или Easy Digital Downloads, что может пригодиться при разработке интернет-магазинов.

Sky Mega Menu

Три варианта дизайна для мобильных устройств, 9 цветовых схем, собственная сетка, формы и 360 векторных иконки. Этот набор позволяет Sky Mega Menu занять достойное место среди себе подобных.

WP Mega Menu

Плагин из категории must have. Множество настроек и опций, работа с категориями, подкатегориями и сообщениями, SEO-оптимизация и две предустановленные цветовые схемы (темная и светлая), которые, впрочем, можно легко изменить по своему вкусу.

NOO Menu

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

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

Hero Menu – Responsive WordPress Mega Menu Plugin

Hero Menu позволяет привязывать к пунктам меню ссылки на сообщения, категории, внешние URL, а также отображать в них записи блога вместе с featured image. В последней версии анонсирована полная поддержка платформы WooCommerce. Для удобной работы имеет встроенный drag-and-drop редактор.

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

Superfly — Responsive WordPress Menu Plugin

Так называемое fly-меню — последний тренд в мире веб-дизайна. Такое меню тихо «дремлет» в углу странички в виде пиктограммы, практически не занимая места, а при наведении курсора раскрывается, смещая элементы страницы, а не перекрывая их.

Топ-пост этого месяца:  Google начал наказывать за неправильные иконки в поисковых сниппетах

Одним из представителей данной разновидности мега-меню является Superfly — Responsive WordPress Menu Plugin. Впечатляющий инструмент как в плане дизайна, так и характеристик.

Toggle Menu

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

Toggle menu — очень простое, минималистическое меню, которое, тем не менее, отлично справляется со своей основной функцией.

WP Floating Menu Pro

WP Floating Menu Pro — это плагин 2 в 1. Меню-навигатор для одностраничного сайта и меню-наклейки. Более того: при помощи этого плагина вы сможете, по крайней мере визуально, превратить свой традиционный сайт в современный одностраничный. WP Floating Menu Pro обеспечит плавную прокрутку от одной части страницы к другой.

В распоряжение разработчика WP Floating Menu Pro предлагает 13 шаблонов и 7 различных вариантов расположения на странице, возможности настройки, цвета, содержимого и количества пунктов.
Для экранов разрешением менее 480px имеется возможность автоматического отключения меню.

Mega Menu by WooRockets.com (Free)

WR Mega Menu — это мощное, адаптивное мега-меню со встроенным, интуитивно понятным редактором, позволяющим в итоге получить именно то, что вы задумывали.

Flexi Menu WordPress Plugin

Flexi Menu — это 5 различных, полностью настраиваемых типа меню: fly-меню, широкое (на ширину страницы), широкое+описания, широкое+изображения и вертикальное.

Max Mega Menu (Free)

Очень неплохой плагин с drag-and-drop редактором меню и возможностью встраивания в пункты меню практически любых виджетов — от контактных форм до карт Google.

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

Side – WordPress Responsive Menu

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

Path style menu

Очень симатичное и оригинальное меню для WordPress. При нажатии на основную кнопку которая, кстати, может располагаться в любом месте страницы, «выскакивают» значки и располагаются вокруг нее. У вас есть полный контроль над месторасположением этих кнопок: в линию горизонтально или вертикально, по окружности вокруг или вдоль более сложной линии, такой как кривая Безье. Иконки внутри объектов можно легко изменять простой заменой файлов-иконок в медиа-галерее.


Morph

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

Tactile

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

Все о WEB программировании

WEB программирование от А до Я

Заказать сайт:

Социальные сети:

Партнеры:

Меню в WordPress: меняем вид меню и делаем выпадающее меню

Доброго времени суток. В одном из проектов мне пришлось создать тему для 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

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

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

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

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

Способ 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Топ-пост этого месяца:  Как работать с Chrome DevTools горячие клавиши и другие нужные функции

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

То, что всегда вызывало у меня сложности – невозможность быстро добавить выпадающий список рубрик к основному меню моей темы через панель управления меню в WordPress. Несмотря на то что система меню обеспечивает средства для добавления рубрик в меню, она не позволяет легко создать выпадающий список рубрик. К счастью, существует простой подход, который помогает добиться этой цели без использования кода. Спасибо Sami Keijonen, который рассказал мне о данной технике на форумах поддержки ThemeHybrid.

В чем заключается суть техники? Начнем с того, что перейдем в раздел Внешний вид – Меню. Выберем меню, в котором мы хотим, чтобы показывались ссылки. Создадим новую ссылку и введем символ «#» в качестве URL. В поле Link Text введем Categories. Затем щелкаем по кнопке Add to Menu.

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

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

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

Горизонтальное выпадающее меню для блога

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

Первое в списке пойдет:

Плавающее (фиксированное) выпадающее многоуровневое меню 3D

Для просмотра этой великолепной менюшки, специально создал ещё один демонстрационный блог, куда вы можете сходить прямо сейчас . Для установки этого меню в блог Blogger нам потребуются пару шагов. Найти в шаблоне такую строчку ]]> и чуть выше добавить код стиля CSS для нашего меню 3D flip:

Сохраните шаблон. Далее, нам нужно найти тег или и ниже его добавляем код HTML:

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

Простое горизонтальное меню для Blogger

Простое горизонтальное меню красное

Такое простое меню красного цвета можно установить с помощью гаджета HTML/Javascript:

Код идет вместе со стилем, для того, чтобы вам не лазить в шаблон блога. не мучиться:

Если вам нужен другой цвет меню,тогда есть другие. Голубой:

Голубое горизонтальное меню

Для этого меню стиль CSS такой:

Поменяйте вверху в коде на этот стиль, а в HTML коде заменить

Зеленый стиль меню:

Зеленый стиль меню

Так же в HTML коде замените на эти строчки

Анимированное выпадающее меню для Blogger

Анимированное выпадающее меню

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

Стиль CSS для этого меню:

Можете совместить стиль и код для вставки в гаджет HTML/Javascript, заключив код CSS в . Конструкция должна иметь такой вид:

Еще предлагаю вам меню Ajax для вашего блога , с различными цветовыми стилями:

Меню Ajax для блога Blogger

Стиль для голубого цвета меню Ajax, который надо вставить чуть выше строчки ]]> в вашем шаблоне:

Затем, вам надо найти такой тег и вставить чуть ниже такой Javascript скрипт:

Дальше, в гаджет HTML/Javascript надо вставить код:

Подставляете вместо ВАШ URL БЛОГА свой адрес, меняете название ярлыков и меню на свои. Если чего не получится, спрашивайте, помогу. Для красного стиля меню код стиля такой:

Код Javascript для меню такой:

Код меню HTML такой же как выше, только надо поменять

    на соответственно

      .

    Зелёный цвет стиля меню:

    Для этого цвета в HTML коде первую строчку меняем на такую

      .

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

    WordPress плагины для меню: 6 лучших бесплатных решений

    Приветствую вас, друзья!

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

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

    1. 5
    2. 4
    3. 3
    4. 2
    5. 1

    12 голосов, в среднем: 4.6 из 5

    18 комментариев к статье «WordPress плагины для меню: 6 лучших бесплатных решений»

    Большое спасибо, добротная статья получилась)

    На счет пункта меню в JQuery Accordion Menu Widget, на днях попробую, если не получиться отпишусь. Я в принципе так же делал, но не срабатывало, сейчас есть подозрение на саму тему. Будет по больше времени проверю ��

    Рад, что мой труд был полезен �� Спасибо за отзыв.

    Спасибо за статью. Много полезного для себя узнал.

    Статья понравилась. С JQuery Accordion Menu Widget у меня тоже проблемка. При клике на пункты меню, страница просто обновляется и все.

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

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

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

    В итоге должно получится что-то вроде этого.

    Спасибо за ответ! Я уже успел удалить JQuery Accordion Menu Widget и теперь пытаюсь настроить Max Mega Menu. Там с настройками более менее все понятно, единственное не нашел где изменить ширину рубрик. Сейчас ширина стоит на авто. Это я нашел в коде благодаря вашей статье о самостоятельном изменении интерфейса сайта. Но в настройках этого плагина нет ширины рубрик. Только ширина выпадающих вкладок. Я делаю вертикальное меню и как-то не очень смотрятся разнокалиберные кирпичики рубрик))

    Если в настройках плагина такой опции нет, то попробуйте в css файле темы (в админке Внешний вид -> Редактор открывает этот файл по умолчанию) прописать для селектора пунктов меню:

    Это, по идее, растянет элементы меню на всю ширину контейнера меню.Или пропишите этот код в уже существующем селекторе, если найдёте, конечно ��

    Хотя, возможно, нужно внимательнее настройки Max Mega Menu, которых просто тьма, на самом деле.

    У меня вопрос, касающийся изменения цвета. В плагине JQuery Accordion Menu Widget меня не устраивают скины. Не гармонируют с цветовой гаммой моего сайта.
    Пытаюсь через Исследование элемента изменить цвет и вставить, скажем измененный вот такой код в таблицы стилей моей темы и ничего не происходит.
    #dc_jqaccordion_widget-3-item ul a.dcjq-parent < padding: 10px 15px; background: #660f0f url(skins/images/bg_clean.png) repeat-x top center; font-weight: bold; text-transform: uppercase; >
    Возможно ли как-то решить этот вопрос?
    Спасибо.

    Добрый день! Вопрос ваш (как и все) решаемый ��

    Способ 1: Исправить стили в файлах используемого скина самого плагина.
    Способ 2: В файле со стилями темы сайта в конце каждого прописанного вами стиля прописать !important.

    Если возникнут ещё вопросы — пишите.

    Здравствуйте!
    Я переношу сайт на Вордпресс и возникла такая проблема: создание дополнительного меню в сайдбаре. Главное, что бы это меню выводилось не везде, а только для этой рубрики. У меня несколько рубрик, поэтому и доп. меню будет несколько.
    Я только начал разбираться с Вордпресс. Если возможно, подскажите, какой плагин лучше подойдет для таких целей.
    Заранее спасибо.
    С уважением, Андрей.

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

    Надеюсь, мой ответ был полезен ��

    Почему в вордпрессе все такое поганое? Ни одного нет нормального.

    А чем Вас Max Mega menu не устроил? Как по мне, достойный вариант среди бесплатных плагинов.

    +1, как раз, то, что искал

    Подскажите пожалуйста по меню навигации, в левом виджете будет перечисление болезней (35-40), мне нужно, чтобы при клике мышки на болезнь, выдвигалось несколько слов-ссылок (названия препаратов для лечения) каким плагином это осуществить ? Искал подходящее решение, но даже не знаю как правильно сформулировать запрос в гугле. Спасибо

    Доброго времени суток �� Вам необходимы плагины меню WordPress для вертикального выпадающего меню. Из представленных в статье плагинов 100% подойдёт JQuery Accordion Menu Widget. Посмотрите видео с демонстрацией его возможностей в статье — там как раз разбирается пример реализации такого меню. Вам останется только подкорректировать его стили под дизайн Вашего сайта.

    Также рекомендую попробовать лидер рейтинга — Max Mega Menu, потому что его функционал действительно впечатляющий. Думаю, в сети можно будет найти примеры реализации Вашей задачи с его использованием, если предыдущий плагин чем-то не устроит.

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

    Есть, конечно �� Тот же JQuery Accordion Menu Widget при всей его архаичности позволяет это делать. Посмотрите видео в статье. На нём показан весь процесс настройки, чтобы получить нужный Вам результат.

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