Главная Часть 1. Создание блога Глава 3. Дизайн Урок 129. Как сделать выпадающее меню на WordPress?

Урок 129. Как сделать выпадающее меню на WordPress?

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

Привет!

Сегодня я решил рассказать о том, как сделать выпадающее меню на WordPress. Такое меню приятно в использовании и не занимает много места. Пример его Вы можете видеть на этом блоге. Для начала нам понадобится плагин jQuery Vertical Accordion Menu. Он очень прост, но в то же время очень функционален! В нем присутствуют различные темы оформления: синий, серый, черный, красный. Вообще, если есть знания в css, то это меню можно внедрить в абсолютно любой дизайн, и оно никак не будет выделяться. Собственно что я и сделал у себя.

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

Вот как выглядит это меню в разных стилях:

JQuery Accordion Menu Widget

Настройка выпадающего меню

 

Переходим в: «Внешний вид» -> «Меню». Здесь нам необходимо создать меню из наших рубрик. Создавайте его таким, каким хотите видеть. То есть, Рубрики, которые Вы хотите видеть на сайте ставьте вперед, а подрубрики, которые должны выводиться при нажатии на рубрику, ставьте под этой самой рубрикой. В пример могу показать одну из четырех частей своего меню (я его для удобства разделил на 4 части) :

часть меню wpguru

Как видите, рубрика "Часть 1. Создание блога" выводится в меню, а при нажатии на нее, выводятся подрубрики. Обратите внимание, как они расположены. Не просто внизу основной рубрики, а с отступанием красной строки. Берете нужную подрубрику, зажимая левую кнопку мыши, затем подводите ее к основной рубрике, и увидите, что появилась разметка пунктирная, которая указывает, куда можно вставить подрубрику.

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

После того, как Вы настроили меню нужным образом, сохраните его (только название запомните), и переходите во «Внешний вид» -> «Виджеты». Там Вы выбираете jQuery Vertical Accordion Menu и перетаскиваете его в нужный блок:

4

Теперь разберем настройки по порядку:

5

 

  1. Заголовок - здесь Вы указываете название, которое будет отображаться на блоге, перед нашим меню.
  2. Выберите меню - тут Вы выбираете созданное Вами меню. Если Вы его, как и я, разделили на несколько частей, то сначала выбираете первую часть.
  3. Click, Hower  - в переводе "Открыть по клику" , "Открыть по наведению мыши". У меня открывается по клику, поэтому я выбрал click.
  4. Auto close open menus - автоматическое закрытие открытого меню. Мне оно не нужно.
  5. Save menu state - Сохранить положение меню. Если у Вас включены куки, то информация об открытом меню будет сохраняться. И когда Вы в следующий раз зайдете на блог, меню уже будет открыто там, где Вы его открывали в прошлый раз.
  6. - автоматическое растягивание на страницу. По мне так это лишнее, его я тоже выбирать не стал.
  7. - вот здесь необходимо поставить флажок. Переводится как: "отключить ссылку на рубрику". То есть, если здесь Вы галочку не поставите, то при нажатии на рубрику, Вы будете переходить в нее, а подрубрики открываться не будут. Поэтому советую галочку все же установить.
  8. Close menu (hower only) - закрытие меню простым наведением курсора. И здесь я думаю, это лишнее. Но на вкус и цвет...
  9. Show count - отображать цифры. С ними все выглядит некрасиво, уж поверьте. Но тем не менее лучше проверьте. Может быть Вам понравится.
  10. Menu class, Disable class - здесь прописываются стили для любителей css. Я тут ничего не прописывал, я работал напрямую с файлом плагина.
  11. Hower delay - задержка при открытии меню. То есть, Вы можете поставить задержку в 1 секунду, и когда нажмете на рубрику, меню раскроется только через секунду. По мне так, если Вы придерживаетесь юзабилити, ставьте no delay (без задержки).
  12. Animation Speed - Скорость анимации раскрывания рубрики. Ну я поставил Slow (медленно) и не сказал бы, что слишком медленно раскрываются рубрики. Скорее даже приятнее.
  13. Ну и последнее - Skin - это, как многие знают, внешний вид. То, о чем я говорил в начале. Можно выбрать красный, серый.....

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

На этом урок подошел к концу, всем успехов!

P.S. предлагаю отдохнуть и расслабиться под новый выпуск фейлов за август этого года!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Anna
0

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

30.08.2013
Sly
0

Попробуйте. Если возникнут проблемы, пишите 🙂

30.08.2013
василий
0

Данный плагин кроме выбора цвета не работает-

01.10.2013
Sly
0

В смысле не работает? Вы можете наблюдать его работу на этом блоге. Где именно у Вас возникла проблема?

01.10.2013
skif
0

Не работает это плагин

24.01.2014
Sly
-1

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

24.01.2014
Андрей
0

Интересно, что на одном сайте у меня работает, а на другом и на этом же хостинге и с этой же темой работает не полностью. Не работает как бы сам аккордеон.
http://vipbrend.in.ua/
http://mod.kh.ua/

26.01.2014
Sly
0

Возможно на одном шаблоне Вы удалили из header.php строчку, которая подключала библиотеку jquery? Поэтому на этом шаблоне плагин работает.

Я проверил на денвере утром, на 2-х рандомных шаблонах, все работает. Насчет библиотеки: сам плагин подключает библиотеку jquery, для того, чтобы меню работало. Если библиотека уже подключена, по идее, он должен это учесть, но может быть такое, что он второй раз ее подключит. Нельзя библиотеку одну и ту же подключать более одного раза, иначе скрипты на ней работать не будут.
Пока других объяснений проблеме, я, к сожалению, найти не могу..

27.01.2014
Дима
0

Что то подразделы не всплывает, вчем может быть проблема? HELP

02.02.2014
Дима
0

Вот мой headr.php

?php global $theme; ?>
<html xmlns="http://www.w3.org/1999/xhtml&quot; >

<meta http-equiv="Content-Type" content="; charset=" />
meta_title(); ?>

hook('meta'); ?>

<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/css/defaults.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="" type="text/css" media="screen, projection" />

hook('head'); ?>

02.02.2014
Sly
0

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

03.02.2014
Hovo
0

Добрый день! Сделал все по примеру но меню по прежнему осталось старым. В чем может быть проблема
http://photojazz.url.ph/
Очень прошу помочь!

08.04.2014
наташа
0

Все отлично работает. Спасибо. Проблем вообще не было.

02.06.2014
Sly
0

Спасибо за отзыв 🙂

02.06.2014
Анастасия
0

Отличный плагин! Установила у себя на сайте, все работает без проблем! Спасибо 🙂

07.06.2014
Sly
0

Здорово 🙂

07.06.2014
Инесса
0

Добрый день! 🙂 Подскажите, пожалуйста, можно ли сделать следующее с применением этого плагина:
В созданном меню имеются Разделы и их Подразделы. Как сделать так, чтоб с помощью данного виджета при клике или наведении на Раздел выпадали его подразделы, но при этом сам Раздел не переходил на страницу? Т.е. чтоб страницы открывались только при нажатии на выбранный Подраздел.

30.06.2014
Sly
0

День добрый 🙂

Делайте так, как написано в статье, только с таким нюансом. Заходите во "Внешний вид" - "Меню". И там составляете меню, какое хотите, только вместо разделов вставляете ссылку, например, "Рыбалка". Когда ссылку добавили, можете из нее удалить http адрес.

Теперь к этой ссылке приделывайте подразделы 🙂

В результате будет так, как Вам надо.

01.07.2014
Инесса
0

Добрый день! 🙂 Вчера, поиграв с комбинациями галочек в виджете, все-таки добилась того, чего хотела! Но все равно, спасибо большое за ответ, попробую поэкспериментировать вашими способами тоже:) И отдельное спасибо за ваши статьи и уроки. Очень много полезной информации. Вы молодец!:)

01.07.2014
Sly
0

Спасибо большое :))) Такие отзывы очень мотивируют 😀

02.07.2014
Елена
0

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

08.08.2014
Sly
0

Проблема в стилях. В файле style.css измените параметры на нужные.

09.08.2014
Дмитрий
0

У меня плагин не перекрывает созданное (во внешний вид-меню) меню, а находится под ним. Т.е получается 2 меню (1 стандартное, второе с плагином). Шаблон Твенти Фортин.

11.09.2014
Sly
0

Тогда необходимо удалить в коде вывод того стандартного меню. Значит оно выводится сторонней функцией.

21.09.2014
Борис
0

Здравствуйте. Все сделал по описанию, но меню отображается без цветов и т.д., отображается, как стандартное меню wordpress. Подскажите пожалуйста, в чем может быть проблема? Причем этот плагин и аналогичный плагин jquery-vertical-mega-menu работают одинаково, то есть не работают. Спасибо.

28.09.2014
Валентин
0

добавь wp_head перед

31.07.2015
Валентин
0

и wp_footer()

31.07.2015
Анатолий
0

Добрый день. Я поставил этот плагин "jQuery Vertical Mega Menu" на свой сайт _saitinpro.ru и все замечательно работает. Разобрался с настройками, заменил картинку кнопки, подогнал все размеры и все прекрасно. Когда меню стало большим появился неприятный визуальный эффект. При открытии сайта меню сначала вводится в виде списка, а через секунду принимает нормальный вид, т.к. как мне надо. Вроде ерунда, но не эстетично. Можно ли тут что то исправить?

19.08.2015
Sly
0

А у Вас это так во всех браузерах? У меня все отлично, сайт загружается сразу же с Вашим меню. Обновлял несколько раз.

20.08.2015
Анатолий
0

Похоже во всех браузерах по ХР. На виновс 7 и выше везде более или менее.

20.08.2015
Sly
0

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

20.08.2015
Виктор
0

Здравствуйте!
Спасибо огромное за данную статью и за плагин, все поставил, все работает.
Только есть одно но - у меня подключается меню только в сайдбаре, а необходимо сделать выпадающее меню в главном горизонтальном меню.
Знаниями HTML CSS обладаю, но с PHP и прочей динамикой не знаком.
Не подскажете ли, как можно привязать данный плагин к горизонтальному меню, на подобии как у Вас сделано в "Обзоре курсов"?

11.09.2015
Sly
0

Если я Вас правильно понял, Вы просто хотите, чтобы в горизонтальном меню выпадал список, как у меня в "обзоры плагинов", верно? Если да, то это делается не столько php, сколько html + css. Отпишите, если Вы это имеете ввиду, попробую Вам помочь. Главное - адрес Вашего сайта, чтобы я видел.

17.09.2015
Андрей Николаев
0

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

27.11.2015
Дарья
4

Вот-вот. Все работает идеально 🙂

20.12.2015

Добрый вечер!
У меня такая проблема с плагином jquery-vertical-mega-menu.
На странице он работает как надо, а при переходе на страницу ЗАПИСЬ он полностью распускается и на этом всё. Опять переходишь на страницу он нормально работает

17.01.2016
0

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

19.01.2016

Спасибо! Он с сапой конфликтовал, но заработало только после того как со всего сайта скрипт убрал.

19.01.2016
0

Спасибо за информацию 🙂

20.01.2016

А как настроить этот плагин, если меню уже создано давно, а не создается под плагин?

05.03.2016

вопрос решен, спасибо за плагин

05.03.2016

только красного я там не нашла оформления.

06.03.2016
0

Добрый вечер. А разве там есть красное оформление? Изначально, вроде, синее, серое, и черное, кажется. Уже даже не помню. Но в любом случае, в какой бы цвет Вы не решили окрасить - css-код поможет.

06.03.2016
Александр
0

У Меня странная проблема. Устанавливал плагин, все работало. Сохранил копию сайта на локалку, и там тоже не было проблем. В какой-то момент появилась необходимость подправить шаблон на хостинге, после чего все-таки решил вернуться на предыдущую (рабочую) версию шаблона, перезалив его, после чего плагин перестал работать. Я уже и шаблон и сам плагин перезаливал с сохраненной локальной копии, и переустанавливал плагин, а он все не работает. Как так? Такое ощущение, что не подключаются скины - так, как будто я не выбирал скин.

17.05.2016
0

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

17.06.2016
Евгений
1

Все сделал как в статье, Но отображается сразу все меню в развернутом виде, хоть klick хоть hover. Подскажите как исправить?

15.06.2016
0

Здравствуйте.
Покажите, пожалуйста, сайт. И я постараюсь помочь.

17.06.2016
Виталий
0

Плагин толковый, но есть один недочет в этом плагине, при переходе по пункту меню, плагин не выделяет пункт на котором находится пользователь, к примеру перешел по вкладке в меню "Книги" - и перешел на страницу "Книги" а в меню данная вкладка не как не выделилась.
Пробовал различными скриптами, играясь с эффетками и прочим что-то сделать, к сожалению нечего не получилось. Как добавить такой эффект ? скрипты есть в сети, вот только не получается его внедрить в данный плагин. Если сможете помочь буду очень благодарен, заранее спасибо!

24.11.2016
0

Ознакомьтесь вот с этой статьей: http://wpguru.ru/sozdanie-bloga/kak-vydelit-aktivnyj-punkt-menyu.html . Должна помочь.

28.11.2016
Виталий
0

Пробовал - не получилось, там проблема в самом плагине если не ошибаюсь.

29.11.2016

Здравствуйте. У меня в боковой колонке 4 блока. В одном из блоков я хочу объединить страницы в такое меню. Можно старые страницы сделать таким меню? Когда я захожу в раздел меню, у меня там менюшки которые вверху страницы (их мне нельзя удалять), а нужные меню/страницы находятся в разделе виджеты/боковая колонка 1. Мне нужно как написано создавать новую структуру меню в разделе меню? Потом как-то к новому меню приделывать старые страницы из виджетов?

06.01.2017
0

Если честно - я мало что понял из вопроса) Не могли бы Вы по порядку описать задачу? Желательно с живым примером сайта

14.03.2017

Здравствуйте! А можно ли сделать так, чтобы при открытии определенной страницы открывался определенный пункт меню?

19.03.2017
1

Добрый день!
Обычно это делается через js. При загруженной странице (document.ready) парсится урл из адресной строки. Далее идет поиск ссылок в меню, если ссылка в меню совпадает со ссылкой в адресной строки - эта ссылка становится active. Если я Вас правильно понял.
P.S. получил Ваше письмо относительно outline в форме поиска. Добавил, спасибо!

21.03.2017

Спасибо за статью!)
P.S. У Вас классная форма для комментариев!

15.05.2017

Оставить комментарий

Поделиться