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

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

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

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

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

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

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

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

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

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

и удаляем ее

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

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

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; }

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

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

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

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

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

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

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

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

jQuery(document).ready(function(){ jQuery("#menu li").hover(function(){ jQuery(this).find("ul").show("slow"); }, function(){ jQuery(this).find("ul").hide(); }); });

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

jQuery(document).ready(function(){ jQuery("#menu li").hover(function(){ jQuery(this).find("ul").slideDown(); }, function(){ jQuery(this).find("ul").slideUp(); }); });

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

jQuery(document).ready(function(){ if(jQuery("#menu li").hasClass("current_page_parent")){ jQuery("#menu li ul").show(); } jQuery("#menu li").hover(function(){ jQuery(this).find("ul").show("slow"); }, function(){ if (!jQuery(this).hasClass("current_page_parent")){ jQuery(this).find("ul").hide(); } }); });

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

Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» - «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.

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

• Главная
• Отзывы клиентов
• Услуги
  • Подбор оборудования
  • Монтаж и прокладка ЛВС
  • Виртуализация
  • IP-телефония
  • Видеонаблюдение
  • Мониторинг
• Контакты

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

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

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

Заходим в раздел «Внешний вид» - «Меню»:

Создаём новый набор меню или используем уже существующий.

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

Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки - #, а в поле «Текст ссылки» вставляем нужную нам фразу.

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

Добавляем остальные пункты в меню

Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:

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

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

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

Результат должен получиться следующий:

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

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

По аналогии сделаем и другие пункты:

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

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

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

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

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

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

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

и удаляем ее

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

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

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; }

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

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

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

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

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

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

jQuery(document).ready(function(){ jQuery("#menu li").hover(function(){ jQuery(this).find("ul").show("slow"); }, function(){ jQuery(this).find("ul").hide(); }); });

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

jQuery(document).ready(function(){ jQuery("#menu li").hover(function(){ jQuery(this).find("ul").slideDown(); }, function(){ jQuery(this).find("ul").slideUp(); }); });

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

jQuery(document).ready(function(){ if(jQuery("#menu li").hasClass("current_page_parent")){ jQuery("#menu li ul").show(); } jQuery("#menu li").hover(function(){ jQuery(this).find("ul").show("slow"); }, function(){ if (!jQuery(this).hasClass("current_page_parent")){ jQuery(this).find("ul").hide(); } }); });

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

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