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

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

JQuery Vertical Mega Menu Widget

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

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

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

Admin Menus Fixed

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

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

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

JQuery Mega Menu Widget

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

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

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

WP-Easy Menu

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

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

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

jQuery Dropdown Menu

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

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

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

Dropdown Menu Widget

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

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

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

Ozh’ Admin Drop Down Menu

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

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

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

WordPress Menu Vertical

Изменяйте расположение меню с вертикального на горизонтальное, плагин совместим с WordPress 3.0 и выше.

Особенности WordPress Menu Vertical:

• Индивидуальное меню с использованием различных параметров
• Фиксация положения меню во время прокрутки
• Хорошие Flash эффекты
• Интерфейс полностью интегрирован в администрирование WordPress

The official plugin for OpenMenu

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

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

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

Admin Menu Tree Page View

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

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

Custom Taxonomies Menu Widget

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

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

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

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-коде

20.10.2012

admin

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

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

Установка бокового меню в wordpress

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

Видео установка плагина jQuery Slick Menu

Создание вертикального меню с помощью плагина jQuery Vertical Accordion Menu

Данный бесплатный плагин позволяет создать вертикальное раздвижное меню. Причем по умолчанию, уже есть пару готовых вариантов шаблонов меню, причем с различными цветами. Самая главная особенность данного плагина в том, что он позволяет создавать именно раздвижное меню. Это очень удобно, если скажем, в одном пункте меню у вас есть несколько подпунктов. При наведении мышкой на первый раздел будет раскрываться дополнительный список пункта. Еще одной приятной особенностью, которой обладает Vertical Accordion Menu, является наличие специального шорт-кода плагина. Который можно разместить в самих записях сайта, тем самым создав там меню.

плагин позволяет создавать различного цвета и стиля меню

Установить плагин можно через саму админку вордпресса, набрав там «jQuery Vertical Accordion Menu» или же скачать с официального сайта автора. После установки плагина, вам нужно зайти в «Виджеты», найти там виджет плагина, и перетянуть его в сайдбар. В самом виджете вы найдете все необходимые настройки плагина. Хочется добавить, что у автора jQuery Vertical Accordion Menu есть и другие специальные плагины, которые позволяют создавать различные многоуровневые меню, как вертикальные, так и горизонтальные.

Таким образом, создать вертикальное выпадающие (раздвижное) меню в wordpress, не так уж сложно, если использовать специальные плагины.

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

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

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

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

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

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

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

/*отвечает за общий стиль блока меню*/ #menu { height: 30px; background: #4182b8; margin: 5px 20px 100px 20px; clear: both; font-size: 14px; } /*отвечает за стиль ссылок в меню*/ #menu li a{ color: #fff; display: block; line-height: 27px; padding: 0 10px; } #menu li a:hover { background: #07599d; text-decoration: none; } /*отвечает за стиль для элементов первого уровня, т.е. дочерних страниц*/ #menu li { list-style: none; float: left; } /*отвечает за стиль для элементов дочернего меню*/ #menu li ul li { float: none; } #menu ul { background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; }

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

.current_page_item, .current_page_parent{ background: #07599d; text-decoration: none; }

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

/*строка display:none прячет выпадающее меню*/ #menu ul{ display: none; background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; }

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

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

jQuery(document).ready(function(){ jQuery(«#menu li»).hover( function(){ jQuery(this).find(‘ul’).show(); }, function(){ jQuery(this).find(‘ul’).hide(); } ); });

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

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

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

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

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

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

Виды меню

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

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

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

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

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

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

Красота. Просто нажимать на ссылки не на столько интересно, как навести на нее и посмотреть, а что еще есть в разделе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

01.10.2013 Ромчик

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