Привет!

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

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

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

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

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

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

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

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

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

1. Заголовок - здесь Вы указываете название, которое будет отображаться на блоге, перед нашим меню.
2. Выберите меню - тут Вы выбираете созданное Вами меню. Если Вы его, как и я, разделили на несколько частей, то сначала выбираете первую часть.
3. Click, Hower  - в переводе "Открыть по клику" , "Открыть по наведению мыши". У меня открывается по клику, поэтому я выбрал click.
4. Auto close open menus - автоматическое закрытие открытого меню. Мне оно не нужно.
5. Save menu state - Сохранить положение меню. Если у Вас включены куки, то информация об открытом меню будет сохраняться. И когда Вы в следующий раз зайдете на блог, меню уже будет открыто там, где Вы его открывали в прошлый раз.
6. Auto Expand Based on Current Page/Item - автоматическое растягивание на страницу. По мне так это лишнее, его я тоже выбирать не стал.
7. Disable Parent Links - вот здесь необходимо поставить флажок. Переводится как: "отключить ссылку на рубрику". То есть, если здесь Вы галочку не поставите, то при нажатии на рубрику, Вы будете переходить в нее, а подрубрики открываться не будут. Поэтому советую галочку все же установить.
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. предлагаю отдохнуть и расслабиться под новый выпуск фейлов за август этого года!