Menu accordion: Accordion меню на чистом CSS / Хабр
Accordeon Menu CK — Плагин для WordPress
Accordeon Menu CK shows an accordion menu in any sidebar position. Just create a WordPress menu, select this menu in a Accordeon Menu CK widget and that’s it.
Features
- Styling from the plugin settings interface with color pickers and other fields
- Open with custom animation and duration
- Instant preview of your design in the interface
- Multiple use on the same page
- Widget to use in your website anywhere
- Description for each menu link
- Unlimited levels
- Click or mouseover behavior
- Custom +/- images
- 20+ themes preinstalled
- Import / Export of styles to save and share
- Custom CSS option
- French translation included
- Compatible multilanguage with the POT file
- French translation included
Get more informations and see the demo on https://www.ceikay.com
- Styling interface with direct preview. Style your menu without coding
- Widget options to place in any sidebar
- Styling presets to apply a design to your menu with one click
- Unzip the package
accordeon-menu-ck.zip
- Upload the folder
accordeon-menu-ck
to the/wp-content/plugins/
directory - Activate the plugin through the ‘Plugins’ menu in WordPress
Allows a huge number of settings, yet the frontend code is minimalistic. Uses the jQuery of WP for transitions / easing, so own JS is very small. The only problem is that it includes CSS styling directly in the head of each page, but you can first style the menu using the plugins great facilities, then copy the CSS to Custom CSS in WordPress or your theme, and finally select «No styling» in the accordeon widget. The absolutely best choice for performance freaks — improves your ranking on Google PageSpeed Insights! Knocks the stuffing out of bloated products with more users and reviews — small is beautiful.
It’s super powerful and worth every minute of time to learn how to use them all!
Had some minor issues and the developer fixed it almost instantly. It does exactly what I want and offers plenty of options to style it, or not. Its very flexible and thats why I use this plugin instead of the other big ones. I use it to collect links in a very tidy way in my sidebar. 5 stars from me.
I needed to replicate a vertical sidebar menu on my client’s previous site, which they wanted to carry on to their new site. This plugin’s easy customizability made it a snap. I did have to write a bit of custom css for positioning and separator lines, I think because my theme’s css was overriding some of the plugin’s settings. Thanks for the great plugin!
Посмотреть все 4 отзыва«Accordeon Menu CK» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники1.1.10 — 12 october 2020
1.1.9 — 05 march 2020
- Fix PHP error when using copy/delete action
1.1.8 — 17 november 2019
- Fix PHP warning with WordPress 5.3
1.1.7 — 29 september 2019
- [Pro] Fix issue with license page
- Fix issue with menu using products
1.1.6 — 20 may 2019
- Add option to show or not the active item
- Add option to show or not the active submenu
1.1.5 — 26 april 2019
- Fix issue with 3rd level background color
1.1.4 — 16 april 2019
- Fix issue with click on parent item if no url
1.1.3 — 08 april 2019
- Fix issue with opening on active submenu
1.1.2
- Fix issue with opening on active submenu
- Fix issue with jquery loading
1.1.1
1.1.0
- Refactor and update for ceikay.com
1.0.4
- Fix issue with image selection
1.0.3
- Open automatically the menu at the current submenu item
1.0.2
- Add option to open on mouseover
1.0.1
1.0.0
JQuery плагин вертикального аккордеон меню для блога WordPress
Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu Widget. Я сам пользуюсь этим плагинов, и естественно Вы его можете посмотреть в действии справа в рубриках. Очень удобный плагин, просто вставляешь через админку виджет и радуйся.
Плагин
Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.
Ещё огромный плюс плагина — это простота установки. Всего лишь нужно его скачать, затем установить, после плагин создаст виджет, который Вам просто нужно будет добавить в сайдбар Вашего блога.
Ну а теперь давайте перейдём к процессу установки и настройки плагина.
Установка плагина
Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый
Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.
На рисунке выше я подчеркнул название самого виджета.
После Вам всего лишь понадобится перетащить его в сайдбар, который находится сплава, в нужно Вам место.
Настройки плагина
После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу. А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.
Важный момент: рубрики и подрубрики.
Если на Вашем блоге есть подрубрики к рубрикам, Вам нужно создать произвольное меню. Это нужно для того, чтобы плагин меню корректно их отображал и вообще работал.
Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.
Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку
Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.
После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.
Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях. До скорых встреч, друзья.
Accordeon Menu CK v3.0.0 — аккордеонное меню joomla 3
Accordeon Menu CK Light v3.0.0
Особенности Accordeon Menu CK от joomlack:
- Анимированные эффекты для открытия подменю (используется библиотека Joomla — по умолчанию)
- Многократное использование на одной странице
- Описание под каждой ссылкой меню
- Загрузка других модулей в меню
- Структура MVC
- Отображение изображения с текстом или без текста
- Неограниченные уровни
- Поведение при щелчке мышью
- Пользовательские +/- изображения
- Скомпилируйте CSS, чтобы улучшить SEO и нагрузку на сервер
- Варианты стилей
- Возможно использование темы для дизайнеров
- Дружественный дизайн интерфейса для настройки стилей (с Accordeon CK Params)
- Предустановлено более 20 тем (с Accordeon CK Params)
- Импорт / экспорт стилей для сохранения и обмена (с помощью Accordeon CK Params)
- Свои параметр CSS (с параметрами Accordeon CK)
- Специальное мобильное меню (с Mobile Menu CK)
Меню Accordeon CK — это расширенная система меню, которая позволяет вставлять некоторые описания для каждой ссылки в меню, загружать любой модуль в структуре меню и отображать некоторые изображения рядом с текстом или без текста.
Добавление описания по ссылке меню.
Title of the link||Description of the link
Добавление модуля в меню.
Чтобы загрузить модуль, вам просто нужно вызвать его с идентификатором. Вы должны создать пункт меню «разделитель» и написать в заголовке вызов модуля. Пример:
[Modid=ID_OF_MODULE]
Чтобы найти идентификатор загружаемого модуля, зайдите в менеджере модулей в вашей Joomla. Последний столбец дает вам информацию.
СОВЕТЫ: вы можете загрузить модуль в фиктивную позицию (которой нет в шаблоне), просто набрав имя (ici ‘maximenuCK’) в поле ‘position’.
С Accordeon CK Params вы можете легко управлять дизайном меню и создавать свои собственные стили, используя интерфейс мгновенного просмотра! Установите Accordeon CK Params и управляйте стилями меню непосредственно из модуля администрирования, не требуя технических знаний и не редактируя файлы.
Проверен на Joomla 3.9.13
Супер аккордеон HTML CSS3 плагин WordPress Accordion – info-effect.ru
На чтение 2 мин. Опубликовано
Привет! Сегодня я покажу вам Супер полезный плагин WordPress! Вы сможете очень просто и быстро создавать Стильные аккордеоны. Можно создать один спойлер, а можно создать связку спойлеров, это и есть аккордеон. Внутрь спойлера можно добавлять любой контент с помощью визуального редактора WordPress. Можно настроить внешний вид аккордеона, выбрать цвета, размер и т.д. Есть 5 готовых стилей. Очень простой и полезный плагин!
Установить плагин Accordion вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, установите и активируйте найденный плагин.
Далее, после установки и активации плагина, перейдите на страницу: Accordion. Здесь будут отображаться все созданные аккордеоны. Чтобы создать новый, нажмите вверху на кнопку Add New Accordion.
Далее, на странице создания укажите название нового аккордеона. Чтобы добавить спойлер в аккордеон, нажмите на кнопку Add New Item. В настройках вы можете:
– Accordion Themes, можно выбрать готовый стиль.
– Title BG Color, цвет фона спойлера.
– Title Font Color, цвет заголовка спойлера.
– Title Font Size, размер заголовка.
– Content BG Color, цвет фона содержания.
– Content Font Color, цвет текста содержания.
– Content Font Size, размер текста содержания.
– Content Padding, размер отступа.
– Сохраните настройки.
Далее, внутрь каждого спойлера вы можете добавить любой контент, текст, фото, видео, форму и т.д. Для каждого спойлера укажите свой заголовок. Чтобы создать несколько вкладок внутри аккордеона, жмите на кнопку Add New Item.
Нажмите на вкладку SHORTCODE, чтобы скопировать шорткод или php код для вставки аккордеона на страницу, запись, виджет или php файлы темы.
Самый простой вариант, вставить шорткод в содержание записи или страницы.
Всё готово! На сайте будет отображаться готовый аккордеон, как показано на скриншотах в начале записи!
– Супер плагины WordPress, более 500, смотри Здесь!
Остались вопросы? Напиши комментарий! Удачи!
Accordeon Menu CK — Плагин для WordPress
Accordeon Menu CK показывает меню аккордеона в любой позиции боковой панели. Просто создайте меню WordPress, выберите это меню в виджете Accordeon Menu CK и все.
Характеристики
- Стилизация из интерфейса настроек плагина с палитрой цветов и другими полями
- Открыть с настраиваемой анимацией и длительностью
- Мгновенный просмотр вашего дизайна в интерфейсе
- Многократное использование на одной странице
- Виджет для использования на вашем сайте в любом месте
- Описание каждой ссылки меню
- Безлимитные уровни
- Поведение при щелчке или наведении указателя мыши
- Пользовательские +/- изображения
- 20+ предустановленных тем
- Импорт / экспорт стилей для сохранения и обмена
- Пользовательский параметр CSS
- Включен французский перевод
- Мультиязычность, совместимая с файлом POT
- Включен французский перевод
Получите дополнительную информацию и посмотрите демонстрацию на https: // www.ceikay.com
- Стильный интерфейс с прямым предварительным просмотром. Создайте стиль меню без кодирования
- Параметры виджета для размещения на любой боковой панели
- Предустановки стиля для применения дизайна к вашему меню одним щелчком мыши
- Распаковать пакет
accordeon-menu-ck.zip
- Загрузите папку
accordeon-menu-ck
в каталог/ wp-content / plugins /
- Активируйте плагин через меню «Плагины» в WordPress
Позволяет огромное количество настроек, но код внешнего интерфейса минималистичный.Использует jQuery WP для переходов / замедления, поэтому собственный JS очень мал. Единственная проблема заключается в том, что он включает стили CSS прямо в заголовке каждой страницы, но вы можете сначала стилизовать меню, используя отличные возможности плагинов, затем скопировать CSS в Custom CSS в WordPress или вашей теме и, наконец, выбрать «Без стиля» в виджете аккордеона. Абсолютно лучший выбор для фанатов производительности — улучшает ваш рейтинг в Google PageSpeed Insights! Выбивает начинку из раздутых продуктов большим количеством пользователей и обзоров — маленький — красивый.
Он очень мощный и стоит каждой минуты времени, чтобы научиться ими пользоваться!
Были небольшие проблемы, и разработчик исправил их почти мгновенно. Он делает именно то, что я хочу, и предлагает множество вариантов стилизации или нет. Он очень гибкий, поэтому я использую этот плагин вместо других крупных. Я использую его для аккуратного сбора ссылок на боковой панели. 5 звезд от меня.
Мне нужно было воспроизвести вертикальное меню боковой панели на предыдущем сайте моего клиента, которое они хотели перенести на свой новый сайт.Простая настройка этого плагина сделала его несложным. Мне пришлось написать немного настраиваемого CSS для позиционирования и разделительных линий, я думаю, потому что CSS моей темы переопределял некоторые настройки плагина. Спасибо за отличный плагин!
Посмотреть все 4 отзыва«Accordeon Menu CK» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники1.1.10 — 12 октября 2020
1.1.9 — 05 марта 2020
- Исправить ошибку PHP при использовании действия копирования / удаления
1.1.8 — 17 ноября 2019
- Исправить предупреждение PHP в WordPress 5.3
1.1.7 — 29 сентября 2019
- [Pro] Исправить проблему со страницей лицензии
- Исправить проблему с меню с использованием продуктов
1.1.6 — 20 мая 2019
- Добавить параметр, отображать или не отображать активный элемент
- Добавить параметр для отображения или отключения активного подменю
1.1.5 — 26 апреля 2019
- Исправить проблему с цветом фона 3-го уровня
1.1.4 — 16 апреля 2019
- Исправить проблему с щелчком по родительскому элементу при отсутствии URL-адреса
1.1.3 — 08 апреля 2019
- Исправить проблему с открытием в активном подменю
1.1.2
- Исправить проблему с открытием в активном подменю
- Исправить проблему с загрузкой jquery
1.1.1
- Исправить проблему с версией стиля
1.1.0
- Рефакторинг и обновление для ceikay.com
1.0,4
- Исправить проблему с выбором изображения
1.0.3
- Автоматическое открытие меню в текущем пункте подменю
1.0.2
- Добавить возможность открывать при наведении указателя мыши
1.0.1
1.0.0
.JQuery плагин вертикального аккордеон меню для блога WordPress
Здравствуйте, дорогие читатели блога. В этот день расскажу Вам превосходный плагин, который создаст на блоге WordPress классное меню аккордеон — JQuery Accordion Menu Widget . Я сам пользуюсь этим плагинов, и естественно Вы его можете посмотреть в действии справа в рубриках. Очень удобный плагин, просто вставляешь через админку виджет и радуйся.
Плагин
Плагин JQuery Accordion Menu Widget легок в установке, к тому же очень функционален.В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.
Ещё огромный плюс плагина — это простота установки. Всего лишь нужно его скачать, затем установить, после плагин создать виджет, который Вам просто нужно добавить в сайдбар Вашего блога.
Ну а теперь давайте перейдём к процессу установки и настройки плагина.
Установка плагина
Теперь нужно, в админке блога, зайти во вкладку плагины , затем выбрать Добавить новый и в поле для поиска вписать Виджет JQuery Accordion Menu далее нажмите поиск .
Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин . После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.
На рисунке выше я это название самого виджета.
После Вам всего лишь понадобится перетащить его в сайдбар, который находится сплавом, в нужно Вам место.
Настройки плагина
После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу.А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.
Важный момент: рубрики и подрубрики.
Если на вашем блоге есть подрубрики к рубрикам, Вам нужно создать произвольное меню. Это нужно для того, чтобы плагин меню корректно их отображал и вообще работал.
Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид , а затем в Меню .Далее нужно придумать название меню, какое Вам понравится 🙂 после нажимаем на кнопочку Создать меню.
Когда меню будет создано нужно выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все , затем нажать Выделить все , а после нажатия Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на нижнем конце.RU.
Теперь нужно создать подрубрики. В данном случае у рубрики WordPres s будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.
После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.
Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях.До скорых встреч, друзья.
.Accordeon Menu CK v3.0.0 — аккордеонное меню joomla 3
Accordeon Menu CK Light v3.0.0
Добавьте аккордеонное меню на свой сайт Joomla. Анимированные эффекты, несколько вариантов открытия подменю и загрузка модулей внутри меню.
Особенности Accordeon Menu CK от joomlack:
- Анимированные эффекты для открытия подменю (используется библиотека Joomla — по умолчанию)
- Многократное использование на одной странице
- Описание под каждую ссылку меню
- Загрузка других модулей в меню
- Структура MVC
- Отображение изображения с текстом или без текста
- Неограниченные уровни
- Поведение при щелчке мышью
- Пользовательские +/- изображения
- Скомпилируйте CSS, чтобы улучшить SEO и нагрузку на сервер
- Варианты стилей
- Возможно использование темы для дизайнеров
- Дружественный дизайн интерфейса для настройки стилей (с Accordeon CK Params)
- Предустановлено более 20 тем (с Accordeon CK Params)
- Импорт / экспорт стилей для сохранения и обмена (с помощью Accordeon CK Params)
- Свои параметр CSS (с включением Accordeon CK)
- Специальное мобильное меню (с Mobile Menu CK)
Меню Accordeon CK — это расширенная система меню, которая позволяет вставлять некоторые описания для каждой ссылки в меню, загружать любой модуль в структуре меню и отображать некоторые изображения рядом с текстом или без текста.
Добавление описания по ссылке меню.
Чтобы добавить описание, вы должны поставить два вертикального разделителя «||». Вы можете добавить описание к любому элементу ссылки в меню. Пример:
Название ссылки || Описание ссылки
Добавление модуля в меню.
Чтобы загрузить модуль, вам просто нужно вызвать его с помощью координататором. Вы должны создать пункт меню «разделитель» и написать в заголовке вызов модуля.Пример:
[Modid = ID_OF_MODULE]
Чтобы найти идентификатор загружаемого модуля, установите в менеджере модули в вашей Joomla. Последний столбец дает вам информацию.
СОВЕТЫ: вы можете загрузить модуль в фиктивную цель (которой нет в шаблоне), просто набрав имя (ici ‘maximenuCK’) в поле ‘position’.
С Accordeon CK Params вы можете легко управлять дизайном меню и создать свои собственные стили, используя интерфейс мгновенного просмотра! Установите Accordeon CK Params и управляйте стилями меню непосредственно из модуля администрирования, не требуя технических знаний и не редактируя файлы.
Проверен на Joomla 3.9.13
.Супер аккордеон HTML CSS3 плагин WordPress Accordion — info-effect.ru
На чтение 2 мин. Опубликовано
Привет! Сегодня я покажу вам Супер полезный плагин WordPress! Вы сможете очень просто и быстро создать Стильные аккордеоны. Можно создать один спойлер, можно создать связку спойлеров, это и есть аккордеон. Внутрь спойлера можно любой контент с помощью визуального редактора WordPress.Можно внешний вид аккордеона, выбрать цвет, размер и т.д. Есть 5 готовых стилей. Очень простой и полезный плагин!
Установить плагин Accordion вы сможете прямо из админ-панели WordPress. Переключитесь на: Плагины — Добавить новый, введите название плагина в форму поиска, активируйте найденный плагин.
Далее, после установки и активации плагина, направить на страницу: Accordion. Здесь будут созданы все созданные аккордеоны. Чтобы создать новый, нажмите вверху на кнопку Добавить новый аккордеон.
Далее, на странице укажите название нового аккордеона. Чтобы добавить спойлер в аккордеон, нажмите на кнопку Добавить новый элемент. В настройках вы можете:
— Аккордеонные темы, можно выбрать готовый стиль.
— Title BG Color, цвет фона спойлера.
— Цвет шрифта заголовка, цвет заголовка спойлера.
— Размер шрифта заголовка, размер заголовка.
— Content BG Color, цвет фона содержания.
— Content Font Color, цвет текста содержания.
— Размер шрифта содержимого, размер текста содержания.
— Content Padding, размер отступа.
— Сохраните настройки.
Далее, внутрь каждого спойлера вы можете добавить любой контент, текст, фото, видео, форму и т.д. Для каждого спойлера укажите свой заголовок. Чтобы создать несколько вкладок внутри аккордеона, нажмите кнопку «Добавить новый элемент».
Нажмите на вкладку SHORTCODE, чтобы скопировать шорткод или php-код для вставки аккордеона на страницу, запись, виджет или php файлы темы.
Самый простой вариант, вставить шорткод в содержание записи или страницы.
Всё готово! На сайте будет готовый аккордеон, как показано на скриншотах в начале записи!
— Супер плагины WordPress, более 500, смотри Здесь!
Остались вопросы? Напиши комментарий! Удачи!
.