wordpress меню раскрывающееся меню
Выпадающее меню для WordPress на CSS
Примечание: я буду использовать WordPress 3.9 и тему Twenty Thirteen, но все действия аналогичны для любого сайта на WordPress 3.
Демо-версия
Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)
Создаем меню в WordPress
Добавление пользовательского Walker-класса в functions.php
Вывод меню через файл темы
Если вы сделали все правильно, то сейчас должны увидеть, что в вашей теме отображается HTML-список без заданных стилей:
Добавление CSS
Откройте файл CSS вашей темы styles.css ( в папке CSS или в корневом каталоге темы ). Вы можете сразу скопировать и вставить весь приведенный ниже код в файл CSS вашей темы. Я буду разбивать CSS-код на части, чтобы пояснять каждый его фрагмент.
Обратите внимание, что мы используем тот же идентификатор, который мы указали в функции wp_nav_menu() — #cssmenu.
Первый фрагмент CSS-кода — это всего лишь несколько строк, чтобы быть уверенными, что все браузеры начинают обработку с той же точки:
Псевдокласс :after позволяет добавить тонкую цветную рамку вокруг каждого пункта меню:
На данный момент ваше меню должно выглядеть так, как показано на рисунке ниже:
Далее нам нужно задать стили для подменю. Нужно, чтобы они по умолчанию были скрыты, а затем выводились, когда пользователь наводит курсор мыши на родительский элемент.
Исходные файлы
По этой ссылке вы можете скачать исходные файлы. ZIP-архив содержит functions.php и styles.css :
Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)
Устранение неполадок
Единственный способ решить эту проблему — определить эти стили CSS и удалить их. Лучше всего использовать для этого расширение Firebug для Firefox и проинспектировать стили CSS вручную. Как только вы найдете конфликтующие стили, удалите их.
Простое раскрывающееся вертикальное меню в WordPress
Для некоторых веб-проектов разработчики используют раскрывающееся вертикальное меню, где изначально все подразделы скрыты и отображаются только при клике на родительский элемент. Несколько раз я сталкивался с данной задачей, но, убеждал заказчиков отказаться от подобной реализации. Дело в том, что для небольшого числа страниц на сайте эффективность такого решения минимальна — намного лучше, когда посетитель сразу видит все доступные ссылки.
Итак, если у вас в проекте имеется сложная структура меню со множеством подразделов и страниц в них, то в целях экономии места вполне можно использовать раскрывающийся эффект. Рассмотрим его реализацию для WP с помощью CSS и JavaScript.
Нашел для вас два варианта, хотя, думаю, в сети «подобного добра» гораздо больше. Первый — целиком и полностью связан с WordPress, второй — общая статья про вертикальное раскрывающееся меню на CSS. Главное здесь понять логику и дальше сможете легко их внедрять самостоятельно. Кстати, для сложной горизонтальной навигации советую Max Mega Menu в WordPress со множеством настроек и классных фишек.
Шаг1. Создание меню в админке Wordpress
Об этом я уже когда-то рассказывал процесс предельно прост. Логинитесь в систему и заходите в раздел «Внешний вид» — «Меню». Там добавляете раздел с подпунктами, где для родительского элемента указываете:
Если у вас на странице не отображается последний пункт, то в самом ее верху есть закладка «Настройки экрана» (Screen Options). В открывающейся форме при клике нужно будет поставить галочку возле надписи «Классы CSS».
После создания / внесения изменений жмете «Сохранить меню». Выводить его на сайте вы можете с помощью функции wp_nav_menu или виджета «Произвольное меню».
Шаг2. Скрытие подразделов с помощью CSS.
Теперь нужно визуально скрыть подпукнты раздела. Для этого заходим во «Внешний вид» — «Редактор» и выбираем файл стилей вашей темы style.css (или другой). Добавляем код:
Можно его также разместить через настройки темы, если у вас профессиональный шаблон с поддержкой пользовательских стилей (как правило, опция называется Custom CSS в общих настройках темы).
Шаг3. Javascript для раскрывающиеся меню в WordPress
Сохраняем и проверяем работает ли созданное вами раскрывающееся вертикальное меню на вордпресс сайте. Если ничего не происходит, попробуйте еще раз внимательно пошагово выполнить все действия — я код тестировал, все ок. Если не будет работать переход по ссылкам, попробуйте заменить строку:
Вертикальное раскрывающееся меню на CSS
Как и обещал выше, привожу еще один вариант как сделать раскрывающееся вертикальное меню. Оно немного другое по принципу и реализации, плюс здесь будет общий пример на HTML, не связанный конкретно с WordPress. Вы можете применить его для любого сайта. Начинающим разработчикам должно пригодится. Описание метода на английском можете найти тут. Вот как выглядит данное меню.
HTML
Простой HTML код для его внедрения:
При этом используются следующие CSS стили:
Учтите, что пути к картинкам-стрелочкам (icons/arrow.png) могут быть другие + не забудьте сами изображения. В целом оформление раскрывающегося вертикального меню можно представить в виде следующей схемы (для тех, кто не особо хорошо разбирается в отступах).
JavaScript
Для WordPress вам, конечно, больше пригодится первый вариант. Он максимально прост в реализации и использовании (даже рядовой юзер сможет добавлять новые разделы в данное меню).
WordPress плагины для меню: 6 лучших бесплатных решений
Приветствую вас, друзья!
Не так давно в комментариях к статье о выделении активного пункта меню с помощью JQuery один из посетителей попросил меня помочь разобраться с плагином меню для WordPress Jquery Vertical Accordion Menu, где подсветка текущего пункта меню не работала.
Я пообещал разобраться с этой проблемой, но, к сожалению, затянул с выполнением обещанного. Новогодние праздники, авралы на работе постоянно мешали мне заняться блогом. В итоге пришлось всту ‘
24 комментария к статье «WordPress плагины для меню: 6 лучших бесплатных решений»
Большое спасибо, добротная статья получилась)
На счет пункта меню в JQuery Accordion Menu Widget, на днях попробую, если не получиться отпишусь. Я в принципе так же делал, но не срабатывало, сейчас есть подозрение на саму тему. Будет по больше времени проверю 🙂
Рад, что мой труд был полезен 🙂 Спасибо за отзыв.
Спасибо за статью. Много полезного для себя узнал.
Статья понравилась. С JQuery Accordion Menu Widget у меня тоже проблемка. При клике на пункты меню, страница просто обновляется и все.
Хм… Про такой баг впервые слышу. При написании статьи устанавливал плагин на чистом WordPress, тестировал, никаких проблем не возникало. Скорее всего причиной может послужить неправильная структура меню либо неправильные ссылки, заданные в пунктах.
Если вдруг не в курсе, что это такое, и как этим пользоваться, то прочитайте статью о самостоятельном изменении интерфейса сайта. И чтобы обязательно пункты меню были развёрнуты и было видно ссылки в них.
В итоге должно получится что-то вроде этого.
Спасибо за ответ! Я уже успел удалить JQuery Accordion Menu Widget и теперь пытаюсь настроить Max Mega Menu. Там с настройками более менее все понятно, единственное не нашел где изменить ширину рубрик. Сейчас ширина стоит на авто. Это я нашел в коде благодаря вашей статье о самостоятельном изменении интерфейса сайта. Но в настройках этого плагина нет ширины рубрик. Только ширина выпадающих вкладок. Я делаю вертикальное меню и как-то не очень смотрятся разнокалиберные кирпичики рубрик))
Это, по идее, растянет элементы меню на всю ширину контейнера меню.Или пропишите этот код в уже существующем селекторе, если найдёте, конечно 🙂
Хотя, возможно, нужно внимательнее настройки 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; >
Возможно ли как-то решить этот вопрос?
Спасибо.
Добрый день! Вопрос ваш (как и все) решаемый 🙂
Если возникнут ещё вопросы — пишите.
Здравствуйте!
Я переношу сайт на Вордпресс и возникла такая проблема: создание дополнительного меню в сайдбаре. Главное, что бы это меню выводилось не везде, а только для этой рубрики. У меня несколько рубрик, поэтому и доп. меню будет несколько.
Я только начал разбираться с Вордпресс. Если возможно, подскажите, какой плагин лучше подойдет для таких целей.
Заранее спасибо.
С уважением, Андрей.
Добрый вечер. Сам я на практике таким не занимался, но могу порекомендовать плагин Conditional Menus. По описанию, это то, что нужно в вашей ситуации.
Надеюсь, мой ответ был полезен 🙂
Почему в вордпрессе все такое поганое? Ни одного нет нормального.
А чем Вас Max Mega menu не устроил? Как по мне, достойный вариант среди бесплатных плагинов.
+1, как раз, то, что искал
Доброго времени суток 🙂 Вам необходимы плагины меню WordPress для вертикального выпадающего меню. Из представленных в статье плагинов 100% подойдёт JQuery Accordion Menu Widget. Посмотрите видео с демонстрацией его возможностей в статье — там как раз разбирается пример реализации такого меню. Вам останется только подкорректировать его стили под дизайн Вашего сайта.
Также рекомендую попробовать лидер рейтинга — Max Mega Menu, потому что его функционал действительно впечатляющий. Думаю, в сети можно будет найти примеры реализации Вашей задачи с его использованием, если предыдущий плагин чем-то не устроит.
А есть такие плагины меню, чтобы можно было создать вертикальный аккордеон с немногими рубриками, при нажатии на которые раскрывались бы многопунктные подрубрики (закрывая другие раскрытые рубрики), при наведении на которые справа появлялся бы список под-подрубрик? То есть, совместить функционал аккордеона и выпадающего меню.
Есть, конечно 🙂 Тот же JQuery Accordion Menu Widget при всей его архаичности позволяет это делать. Посмотрите видео в статье. На нём показан весь процесс настройки, чтобы получить нужный Вам результат.
Здравствуйте!
Приобрёл плагин Jet menu, после установки на сайт возникла внутренняя ошибка сервера 500
Здравствуйте. Какой подробный текст ошибки? Что пишется в логах? И, я думаю, в любом случае лучше обратиться к поставщику плагина — официальному производителю или диллеру, у которого Вы непосредственно купили плагин.
Хорошая статья, но сейчас стандарт мега меню это Groovy Menu
За ссылку спасибо, но говорить о том, что плагин с 200+ активных установок — стандарт — это смело 🙂
Добрый день. С интересом прочитал ваш обзор. Интересно было бы в деле посмотреть Max Mega Menu, о котором вы пишете. В заголовках плагина написано, что есть русская версия, но при инсталяции идет стандартная английская, или я не могу до нее добраться? Бьюсь несколько дней, начитался много чего, что-то поставил, но путем ничего не получилось, все прибил и вернулся к началу. Из моей писанины ясно, что я гуманитарий, но ручки шаловливые хотят большего. Изначально искал ответа на потребность создать в главном правом вертикальном меню два предмета с дочерними файлами, желательно, чтобы они открывались или выпадали при нажатии. Речь идет о двух книгах — в одной 29 глав, в другой 6 глав. Хотелось бы, чтобы родительское меню отражалось на всех страницах каждой книги. Следует иметь в виду, что и сейчас вертикальное меню большое, а засунуть еще список такой это ужас. Сайт личный — итоги творческой деятельности за много-много лет. Контент интересный, на мой взгляд. Делаю это не для большой аудитории. Продвижение мне не нужно и неинтересно. Извините за длинное письмо. Буду рад вашему ответу.
Здравствуйте. У Max Mega Menu интерфейс в админке на английском, но меню на сайте Вы можете создавать на любых языках.
Как сделать для WordPress выпадающее меню?
Приветствую вас на сайте Impuls-Web!
В этой статье я расскажу вам, как можно сделать для сайта на WordPress выпадающее меню с помощью плагина. Данный способ создания меню пригодится вам в случае, если вы делаете сайт на базе темы, в которой не предусмотрено выпадающее меню, и у вас не получается его сделать с помощью стандартного средств WordPress, а так же если вас не устраивает его работа или оформление.
Еще это может быть полезно, если у вас возникла необходимость сделать дублирующее меню, например, внизу страницы.
Навигация по статье:
Установка и настройка плагина выпадающего меню WordPress
Итак, для создания выпадающего меню WordPress нам для начала нужно установить плагин Mega Main Menu из репозитория.
Доступно для выбора три варианта:
Hover intent – тоже самое, что и «Наведение мышки»
Наведение мышки — открывается при наведении указателя мышки на пункте
И скорость, с которой оно будет открываться:
Если же мы выберем пункт «Мега Меню» то в раскрывающейся области подпункты будут располагаться в столбик:
В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.
Переключаясь по вкладкам раздела вам нужно задать настройки цвета, отступы, высоту, шрифты, рамки, тени и другие визуальные настройки в соответствии с цветовым оформлением вашего сайта. После того, как вы зададите все настройки, не забудьте нажать на кнопку «Сохранить изменения».
Добавление выпадающего меню WordPress на сайт
После того как мы закончили настройку выпадающего меню WordPress, нам нужно его как-то добавить на сайт. В случае, если мы используем данное меню в качестве главного, то здесь все просто, ничего менять или добавлять не нужно, все настройки применяются по умолчанию.
Для добавления выпадающего меню WordPress в область виджетов нам нужно:
Если же вам нужно сделать дублирующее выпадающее меню WordPress в футере сайта, то для этого нужно:
Вот что у нас получилось:
Теперь у нас главное меню сайта продублировано в футере. Осталось его немного подправить css-стилями.
Как я уже говорила, плагин Max Mega Menu дает огромные возможности, и с его помощью вы можете создать для WordPress выпадающее меню любой сложности, хоть горизонтально, хоть вертикальное, и вставить его в любом месте на своем сайте. Но, к сожалению, у этого плагина есть и недостатки, основным из которых является необходимость дописывать стили для нормального вывода в виджетах.
На этом я закончу эту статью. В одной из следующих я расскажу, как сделать выпадающее меню WordPress без использования плагинов. Если вам эта тема интересна, пожалуйста, оставляйте комментарии под статьей, и делитесь ею в социальных сетях.
Как создать меню WordPress, простое и выпадающее меню WP
Вступление
С помощью инструментов WordPress можно сделать очень хорошую навигацию по своему сайту. Одним из элементов навигации по сайту WP является специально созданные меню сайта. Меню WordPress можно создавать как внутренними инструментами администрирования WP, так и при помощи плагинов.
Создать меню WordPress при помощи встроенных инструментов администрирования
Для администрирования сайта WordPress, авторизуемся и входим в административную панель, консоль сайта. В меню панели нас интересует вкладка: Внешний вид → Меню.
Немного о принципах организации и структуре меню WordPress
Основной код WordPress позволяет создавать меню из трех составляющих: Произвольные ссылки, Рубрики сайта и Страницы сайта.
Количество меню, которые можно сделать ограничивается только здравым смыслом. При большом количестве неиспользуемых меню, возможны проблемы с загрузкой этой страницы административной панели. Кроме этого, делать запасные меню особого смысла нет, так как в шаблоне ограничены выделенные места для их размещения. Каждый шаблон сверстан с определенным количеством выделенных мест для размещения меню. Обычно это одно или две области меню.
На странице настроек «Меню», места для размещения меню шаблона нужно выбрать в левой верхней части страницы, заголовок «Область темы».
На странице «Меню» есть две кнопки : Редактировать меню и Управление областями. Изменение внешнего вида страницы не коим образом не меняет ее функциональность. Меню «собирается» по прежним принципам : пункты меню выбираются из внешних ссылок, страниц и рубрик.
Для примера создадим меню WordPress из главной страницы сайта и разветвленного меню рубрик и страниц сайта.
Создать меню WordPress с произвольной ссылкой
Скриншоты для версии ниже WP 3.8.
Чтобы создать меню WordPress, дадим ему имя. В правой верхней части окна вписываем «Заголовок меню» и нажимаем «Сохранить меню». Меню создано, теперь нужно наполнить его нужными пунктами.
Примечание: Можно создать любое количество меню WordPress, однако разместить их на сайте можно только в специально отведенных в шаблоне местах.
В WordPress в качестве главной страницы можно выбрать:
В этом примере, в качестве главной страницы выберем страницу, открывающаяся по основному домену сайта. Для создания пункта меню «Главная страница» в части «Произвольные ссылки» вписываем URL сайта. В пункте «Текст» вписываем название, например «Главная». Нажимаем «Добавить в меню».
После добавления в меню появляется новый пункт с названием «Главная».
Интересен пункт произвольно. При нажатии на «Произвольно» появится форма в которой
В примере, изменять ничего не нужно, поэтому сохраняем меню с добавленным пунктом «Главная страница».
Меню создано остается поместить его на сайте. Это можно сделать в части «Область темы». Из выпадающих меню Navigation (это могут быть Main и Top Navigation) выбираем созданное меню «Главная» и нажимаем сохранить.
создать меню WordPress готово
Меню создано и размещено на сайте Worpress.
Примечание. Таким же образом можно создать и наполнить любое меню нужными пунктами с произвольными ссылками на любые посты сайта по их URL адресам.
Создадим еще одно меню с рубриками и страницами сайта
Создаем меню с названием «Рубрики». Для этого сначала создадим меню дав ему имя. Нажимаем знак плюс [+], вписываем произвольное название меню в появившейся форме и нажимаем «Создать меню». Меню под новым названием создается и сохраняется. Остается собрать его,то есть наполнить нужными пунктами.
В окнах «Страницы» и «Рубрики» выбираем нужные рубрики и/или страницы для добавления в меню. Для добавления нажимаем кнопку «Добавить в меню».
В центральной части страницы настроек «Структура меню», отражаются все выбранные пункты меню, которые можно выстроить в нужную вам структуру. Здесь можно менять порядковое расположение пунктов простым перетаскиванием левой кнопкой мыши. Также можно создать родительские и дочерние пункты.
Не забывайте «Сохранять меню». Как видите создать меню WordPress не сложно. Однако, внешний вид меню, созданных при помощи внутреннего администрирования WordPress, полностью определяется дизайном шаблона сайта. Иногда это не самый привлекательный вид. Для создания меню индивидуального дизайна, в том числе с эффектом выпадения подпунктов можно использовать неплохой плагин Dropdown Menu widget.
Оригинальное выпадающее меню WordPress плагином Dropdown Menu widget
Этот плагин не был протестирован с последними 3 основными версиями WordPress. Он может больше не поддерживаться и не поддерживаться и может иметь проблемы с совместимостью при использовании с более свежими версиями WordPress.
После активации плагина в меню «Параметры» появляется новый пункт «Dropdown Menu». Двумя кликами открываем его для настройки.
Основные настройки плагина делаем по своему усмотрению. Остановлюсь на нескольких из них.
В пункте «Темы» выбираем одну из 10 тем нового меню.
В пункте «Эффекты» ставим галочку «Использовать эффект выпадения»;
В пункте «Template Tag» (Шаблон тегов) выбираем из выпадающего списка, меню, которое нужно отображать. Здесь же копируем код, который нужно вставить в шаблон своего сайта, чтобы появилось новое меню на сайте.
Вставляем код меню Dropdown Menu в шаблон сайта
Чтобы вставить код(ниже) меню в шаблон, открываем в консоли Внешний вид >>> Редактор.
Перед проверкой нового меню нужно удалить старое меню. Если созданное меню имеет пункты и подпункты, то подпункты будут выпадать.
После установки плагина Dropdown Menu widget в списках виджетов появляется новый виджет Dropdown Menu. С его помощью также можно сделать выпадающее меню в боковой части сайта.
Рабочий плагин меню
Плагин Max Mega Menu автоматически преобразует ваше существующее меню или меню в мега меню. Затем вы можете добавить любой виджет WordPress в свое меню, изменить стиль своего меню с помощью редактора тем и изменить поведение меню с помощью встроенных настроек. Последний тест на версии 5.4.1.
На этом про то, как создать простое и выпадающее меню WordPress все!