Accordion Slider — вероятно, лучший слайдер-аккордеон jQuery на рынке. Облегченная версия Accordion Slider позволяет создавать простые слайдеры изображений, которые полностью адаптивны и удобны для мобильных устройств. Accordion Slider позволяет изменять раскладку аккордеона для разных размеров экрана.

Дизайнерам

• Он предоставляет 2 полностью адаптивных режима: автоматический и пользовательский.

• С функцией Touch-enabled вы можете легко провести пальцем по экрану и жестами касания на мобильных устройствах и перетащить мышь на настольных устройствах.

• Динамическая компоновка автоматически меняет ориентацию с горизонтальной на вертикальную и наоборот.

• Поддерживает 2 типа слоев: анимированные и статические.

• Когда панель открыта, вы можете легко изменить фоновое изображение с помощью Image swap.

Для разработчиков

• Вы можете легко удалить модули, чтобы уменьшить размер файла, поскольку плагин модульной архитектуры состоит из ядра и 12 дополнительных модулей.

• Переходы CSS3 и RequestAnimationFrame, который разработан с использованием современных методов анимации, используются для обеспечения плавной анимации.

• Аккордеон предоставляет несколько общедоступных методов и функций обратного вызова, а также возможность изменять свойства во время выполнения с помощью мощного API.

Нажмите здесь, чтобы узнать подробнее

Другой — jQuery Accordion, компонент аккордеона, основанный на Javascript и CSS.Он имеет адаптивный и плавный макет, имеет систему сеток, 8 предустановленных стилей и многое другое. Лучшее в этом плагине то, что он также обеспечивает эффекты затухания содержимого.

Нажмите здесь, чтобы узнать больше

«jQuery Accordion Menu» — это меню с аккордеонным поведением. Плагин имеет несколько параметров, которые можно настроить, чтобы помочь настроить вертикальное меню аккордеона.Их можно установить через панель управления виджетами или путем передачи параметров в шорткоде.

• Простота использования и настройки

Нажмите здесь, чтобы узнать подробнее

Accordion — это современный визуальный композитор. Он имеет 26+ стилей с огромными возможностями. В плагине вы получите множество аккордеонов, которые вы можете выбрать в соответствии с требованиями вашего веб-сайта.

• 26+ уникальных стилей * Скоро появятся новые стили!

• Совместимая последняя версия WordPress

• Чистое кодирование, проверка W3c

• Шаг за шагом с хорошей документацией

Нажмите здесь, чтобы узнать подробнее

Бесплатные плагины Accordion

Адаптивные вкладки для аккордеона — это тонкий плагин jQuery для аккордеона, который оптимизирует обычные вертикальные и горизонтальные вкладки на нескольких устройствах, таких как Интернет, планшеты, мобильные устройства (IPad и iPhone.Плагин адаптирует размер экрана и при этом соответственно меняет свое действие.

• Горизонтальные / вертикальные вкладки к гармошке.

• Аккордеон и вкладки полностью разработаны с использованием jQuery.

• Поддерживает несколько наборов вкладок на одной странице.

• Кроссбраузерная совместимость (IE7 +, Chrome, Firefox, Safari и Opera).

• Поддержка нескольких устройств (Интернет, планшеты и мобильные устройства).

• (Работает с несколькими экземплярами) Ссылка непосредственно на указанную вкладку.

• Плагин обрабатывает все состояния вкладок при переходе со страницы и последующем возврате с использованием перемотки вперед / назад (если браузер поддерживает History API).

Нажмите здесь, чтобы узнать подробнее

Этот плагин jQuery Bootstrap обеспечивает адаптивную функциональность вкладок. Вкладки трансформируются в гармошку при достижении точки останова CSS.Аккордеон, сформированный с помощью этого плагина, имеет горизонтальный характер. Вы можете использовать этот плагин как решение для элегантного отображения вкладок на настольных компьютерах, планшетах и ​​мобильных устройствах.

• Вкладки преобразуются в аккордеон на основе точки останова.

• Для переключения технических вкладок (на основе классов) вы можете использовать jQuery / javascript.

• Использует CSS для рабочего стола / планшета / мобильного устройства.

• Имеет события обратного вызова для событий вкладки.

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

• Вкладки управляются с помощью методов API.

• Кроссбраузерная совместимость (IE7 +, Chrome, Firefox, Safari и Opera).

• Поддержка нескольких устройств (Интернет, планшеты, мобильные устройства и т. Д.).

Нажмите здесь, чтобы узнать подробнее

Это 5+ [Бесплатных + Платных] лучших плагинов для Accordion для вашего веб-сайта.Надеемся, что вы нашли продукт, который соответствует вашим потребностям и требованиям.

Вам также может понравиться —

Похожие сообщения:

WPPlugins / jquery-vertical-accordion-menu: это зеркало репозитория svn: https://plugins.svn.wordpress.org/jquery-vertical-accordion-menu/, главным всегда является последняя версия.

Файлы

Тип

Имя

Последнее сообщение фиксации

Время фиксации

 === Виджет двухуровневого меню JQuery ===
Авторы: remix4
Ссылка для пожертвований: http: // www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/#form-donate
Теги: jquery, раскрывающийся список, меню, вертикальный аккордеон, анимированный, css, навигация, виджет
Требуется минимум: 3.0
Проверено до: 3.4.2
Стабильный тег: 3.1.2

Создает вертикальные аккордеонные меню из любого настраиваемого меню WordPress с помощью jQuery. Добавляйте меню с помощью виджетов или шорткодов.

== Описание ==

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

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

= Параметры виджета для меню =

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

* Щелчок / наведение - выбирает тип события, при котором меню будет открываться / закрываться.
* Автоматически закрывать открытые меню - если этот флажок установлен, только один пункт меню может быть раскрыт в любой момент.Щелчок по новому пункту меню автоматически закрывает предыдущий.
* Сохранить состояние меню (использует файлы cookie) - выбор этого параметра позволит меню запоминать свое открытое / закрытое состояние при переходе на новую страницу.
* Автоматическое расширение на основе текущей страницы / элемента - если этот флажок установлен, этот параметр будет автоматически расширять подменю на основе текущей страницы / публикации на основе встроенных классов CSS для настраиваемого меню WordPress - например, выберите этот параметр, если вы хотите, чтобы меню автоматически расширялось, когда пользователь щелкает ссылку, отличную от меню аккордеона.* Отключить родительские ссылки - если этот параметр выбран, для любых пунктов меню, имеющих дочерние элементы, будут отключены их ссылки, и будут открываться / закрываться только соответствующие подменю. Не выбирайте это, если вы хотите, чтобы пользователь по-прежнему мог просматривать страницу этого элемента.
* Закрыть меню (только при наведении) - если этот флажок установлен, меню автоматически полностью закроется через 1 секунду, когда указатель мыши покинет меню - доступно только в том случае, если тип события - «наведение».
* Показать счетчик - если этот флажок установлен, в меню будет автоматически добавлен счетчик, показывающий количество ссылок под каждым родительским элементом меню.
* Меню классов - установите класс CSS для меню WordPress.Если пусто, будет использоваться класс по умолчанию "меню".
* Отключение класса - введите класс CSS для элементов родительского меню, которые должны быть отключены, т. Е. Дочернее подменю остается открытым.
* Задержка при наведении - этот параметр добавляет задержку к событию наведения, чтобы предотвратить случайное открытие / закрытие меню. Более высокое число означает, что курсор должен останавливаться на более длительное время, прежде чем сработает действие меню.
* Скорость анимации - скорость, с которой меню открывается / закрывается.
* Кожа - доступно несколько образцов скинов, чтобы дать примеры CSS, которые можно использовать для стилизации вашего аккордеонного меню.

Примечание: следует проявлять осторожность при выборе события наведения, так как это может повлиять на удобство использования - добавление задержки наведения и снижение скорости анимации может помочь уменьшить проблемы с удобством использования.

= Использование шорткодов =

Минимальное требование для использования шорткода - включить имя меню, которое вы хотите использовать для аккордеона - имя должно соответствовать одному из меню, созданных на странице администратора меню WordPress.Чтобы добавить меню с помощью шорткодов, используйте следующий код:

[dcwp-jquery-accordion menu = "Тестовое меню"]

Необязательные параметры шорткода для настройки меню (информацию см. В настройках виджета выше):

событие - щелчок / наведение (по умолчанию = щелчок)
auto_close - true / false (по умолчанию = false)
save - true / false (по умолчанию = false)
развернуть - истина / ложь (по умолчанию = ложь)
disable - истина / ложь (по умолчанию = ложь)
закрыть - истина / ложь (по умолчанию = ложь)
count - true / false (по умолчанию = false)
menu_class - необязательно (по умолчанию = меню)
disable_class - необязательно (не по умолчанию)
зависать - 600
анимация - медленная / нормальная / быстрая (по умолчанию = медленная)
скин - черный / синий / чистый / демонстрационный / графитовый / серый (по умолчанию = без темы)

Для получения дополнительной информации посетите домашнюю страницу плагина:

[__Plugin Home Page__] (http: // www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/)

[__См. Демонстрацию__] (http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/)

== Установка ==

1. Загрузите плагин через интерфейс «Plugins> Add New> Upload» или загрузите папку jquery-vertical-accordion-menu в каталог / wp-content / plugins /.
2. Активируйте плагин через меню «Плагины» в WordPress.
3. В разделе виджетов выберите виджет меню аккордеона jQuery и добавьте его в одну из областей виджетов.
4.Выберите одно из меню WP, установите необходимые настройки и сохраните виджет.

== Часто задаваемые вопросы ==

= Меню появляется на странице, но не работает. Почему? знак равно

Во-первых, убедитесь, что ваше пользовательское меню имеет как минимум 2 уровня. Если у него только один уровень, эффект открытия / закрытия не активен.

Одна из основных причин того, что меню не загружается должным образом, связана с отсутствием необходимого кода в нижнем колонтитуле страницы. Плагин добавляет необходимый код jQuery в нижний колонтитул вашего шаблона. Убедитесь, что ваши файлы шаблонов содержат функцию wp_footer ().Другая вероятная причина связана с другими нефункционирующими плагинами, которые могут иметь ошибки и приводить к тому, что javascript плагина не загружается. Удалите ненужные плагины и попробуйте еще раз. Проверка с помощью Firebug покажет, где возникают эти ошибки.

[__Также посетите нашу страницу часто задаваемых вопросов о меню аккордеона jquery__] (http://www.designchemical.com/blog/index.php/frequent-asked-questions/jquery-vertical-accordion-menu/)


== Скриншоты ==

1. Виджет в режиме редактирования
2. Примеры вертикальных меню-гармошек

== Журнал изменений ==

= 3.1,2 =
* Обновлено: шорткод аккордеона

= 3.1.1 =
* Обновлено: хук wp_enqueue_script

= 3,1 =
* Исправлено: Функция автоматического закрытия с несколькими меню

= 3,0 =
* Добавлено: возможность добавлять меню с помощью шорткодов.

= 2,6 =
* Добавлено: возможность отключать элементы родительского меню с помощью класса CSS.
* Добавлено: Возможность установить меню CSS Class - по умолчанию «меню».
* Обновление: версия для автоматического расширения системы
* Обновление: jquery.dcjqaccordion.2.8.js

= 2.5.4 =
* Fix: Ошибка с опцией сохранения состояния

= 2.5.3 =
* Добавлено: плагин jQuery accordion включает проверку файлов cookie.

= 2.5.2 =
* Обновление: jquery.dcjqaccordion.2.7.js - исправлена ​​ошибка с опцией подсчета

= 2.5.1 =
* Fix: Ошибка при использовании опции «Без темы»

= 2,5 =
* Добавлено: автоматическое расширение теперь не зависит от параметра состояния сохранения.

= 2,4 =
* Добавлено: возможность автоматического раскрытия меню на основе классов текущей страницы / пунктов меню WordPress.

= 2.3 =
* Edit: плагин теперь работает с текстом Cufon

= 2,2 =
* Добавлено: возможность показывать количество дочерних ссылок.
* Изменить: плагин обновлен для использования плагина jquery версии 2.3.
* Изменить: имя файла cookie устанавливается на основе идентификатора виджета

= 2.1 =
* Изменить: безопасность для динамических скинов

= 2,0 =
* Добавлено: возможность выбора либо наведения, либо щелчка для активации меню.
* Добавлено: настройка задержки наведения для события наведения.
* Добавлено: опция закрытия меню при наведении курсора.

= 1,1 =
* Исправлено: Повторяющийся идентификатор с темами, добавляющими идентификатор в контейнер виджета
* Исправлено: Установить путь для файлов cookie

= 1.0 =
* Первый выпуск 

Легко реагирующие вкладки для аккордеона

Селектор месяца jQuery

Виджет jQueryUI, который позволяет отображать и выбирать месяц и год с помощью виджета mm.itemselector

Адаптивные вкладки

Этот плагин jQuery обеспечивает функциональность адаптивных вкладок. Вкладки трансформируются в гармошку, когда…

Меню DD ScrollSpy

DD ScrollSpy Menu позволяет определить меню, элементы которого автоматически выделяются на основе …

tabbedContent

jQuery TabbedContent — это легкий плагин вкладок со всем необходимым, например, навигацией по истории …

DD Mega Меню

DD Mega Menu — идеальный сценарий меню, который можно использовать, когда вам нужна система выпадающего меню, которая поддерживает…

Селектор элементов jQuery

Виджет jQueryUI, позволяющий отображать и выбирать элементы с помощью виджета «аккордеон»

jQuery Quiccordion

Чрезвычайно быстрый, простой, легкий, рекурсивный плагин для аккордеонного меню

Меню изображения аккордеона

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

Меню значков DD

DD Icon Menu создает вертикальное меню на основе значков, которое фиксируется на левом краю браузера…

rl Аккордеон

Плагин jQuery для аккордеона, отзывчивый, гибкий и адаптируемый со знаками плюс и минус …

jQuery ShiftyNav

ShiftyNav предоставляет уникальный набор анимаций для навигации по веб-сайтам, вдохновленный Android …

Multi-Screen.js

Простой плагин jQuery, который превращает одну страницу в набор экранов с анимацией…

Шаги jQuery

Мощный плагин мастера jQuery, поддерживающий специальные возможности и HTML5.

Подменю jQuery Slight

Плагин jQuery для автоматизации управления вложенными меню (развернуть / свернуть) с широкими возможностями настройки …

Слайды jQuery

Довольно гибкий и настраиваемый плагин слайд-шоу / аккордеона для jQuery.

25+ примеров аккордеона JQuery, которые можно попробовать для организации вашего сайта

Есть причина, по которой популярность аккордеонов стремительно растет с годами! Для более крупного и насыщенного текстом содержания простой и эффективный способ сделать его более привлекательным и менее скучным — это гармошки или складные элементы.По сути, он работает, ограничивая отображение содержимого сворачиваемыми меню, которые пользователи могут включать или отключать. Базовая структура обычно состоит из нескольких элементов, включая заголовок / заголовки и тело, которое расширяется по команде. Это чрезвычайно полезный шаблон для выделения важных деталей определенного раздела с использованием прогрессивного раскрытия информации.

Но кто сказал, что они должны быть простыми и скучными? Имея доступ к анимации и стилизации с помощью пользовательских кодов, владельцы сайтов могут работать настолько креативно или упрощенно, насколько захотят! И если вы ищете толчок к появлению удивительных и новаторских идей, то этот список сегодня, несомненно, отличное место.Объединив все бесплатные онлайн-варианты, где вы можете почерпнуть идеи для смелых, профессионально выглядящих и потрясающих примеров, сегодня у нас есть список лучших из возможных jQuery Accordions, которые вам понравятся! Выбирая эти варианты вручную, вы получаете доступ к полной структуре кодирования. А если вас интересует больше элементов CSS, таких как карточки, кнопки, разделители и т. Д., Вы можете ознакомиться с другими нашими сообщениями в блоге.

JQuery Accordion Navigation

В верхней части нашего списка находится простое и удобное меню навигации аккордеона jQuery, которое впечатляет и плавно перемещается.Замечательно, что в этом конкретном примере вы найдете возможность добавить любое количество категорий и подкатегорий. Цветовые схемы сведены к минимуму, поэтому основное внимание здесь уделяется заголовкам. Если щелкнуть значок рядом с заголовком, он будет анимирован, чтобы отобразить аккордеон и содержимое внутри. Элегантный, темный и чистый, это отличный способ добавить навигацию поверх вашего сайта. Поскольку сама структура довольно гибкая, вы можете начать с этого холста и в дальнейшем настраивать его по своему усмотрению.

Информация / Скачать

Ручка Duke

Еще одно расширенное навигационное меню, разработанное с использованием jQuery acccordion, — это ручка Duke на codepen. Это довольно визуально впечатляющий дизайн, поскольку создатель здесь абсолютно не оставил камня на камне. Каждый компонент разработан с определенной целью и анимирован таким плавным переходом. Он имеет простое меню и яркий цвет для его представления. Даже тени добавлены, чтобы добавить еще больше реалистичности.На каждой вкладке есть значок и заголовок, а для вкладок с гармошками внутри — другой значок с левой стороны. При нажатии на анимированный значок вместе с переходом он также показывает категории внутри. Категории также отображают изменение цвета фона, когда оно проявляется. В целом довольно впечатляющий подход к простой концепции меню навигации, если вы спросите нас, мы определенно думаем, что об этом стоит упомянуть здесь.

Информация / Скачать

jQuery (без пользовательского интерфейса) Accordion

Следующим в очереди у нас есть еще один дизайн аккордеона, который разработан с простым и минимальным акцентом на него.Он в основном содержит различные тексты в виде разделов для заголовка, подзаголовка и раскрытия другого абзаца в качестве содержимого внутри аккордеона. Использование привлекательной цветовой схемы с простым дизайном для текстов обязательно привлечет внимание ваших пользователей. Каждая из категорий также анимирована для демонстрации по одной, что означает, что когда вы выбираете одну, остальные убираются.

Информация / Скачать

JQuery Accordion от Викаса Вермы

Начнем наш список с простого примера Викаса Вермы.Разработанный с учетом простоты и чистой эстетики, все в этом нравится пользователям. От серо-белого цветового узора до использования упрощенных значков — это отличный способ стилизовать компоненты вашего сайта. HTML используется для определения структур, содержимого и форм, в то время как простые JS и CSS используются для добавления плавных переходов. Теперь, когда аккордеон нажимается на определенные разделы, он расширяется, чтобы отобразить содержимое внутри. Маленькие детали с изменением цвета и изменением формы значка — вот что делает его таким интересным.Тонкий, но полностью ориентированный на конкретную цель, это в целом делает дизайн более профессиональным и чистым.

Информация / Скачать

Простой SASS jQuery Accordion

Теперь, что касается более сложного дизайна как такового, это более продвинутый и стильный анимированный дизайн аккордеона jQuery. В этом дизайне, созданном Джоном Стуэбе, используются коды SASS, а также JQuery для реализации плавного перехода и размещения компонентов. В отличие от традиционного дизайна, в котором аккордеон начинается со скрытого содержимого, в этом дизайне используется эффект, аналогичный переключателю.Если щелкнуть один из заголовков, чтобы открыть содержимое внутри, предыдущий параметр автоматически уберется. Все в этом завораживает, поскольку создатель серьезно отнесся к тонким деталям. В зависимости от заголовка, по которому щелкнули, меню перемещается вверх или вниз, чтобы отобразить содержимое. Значки рядом с цветовой схемой выбранного заголовка также изменятся, чтобы выделить выделение. Даже тени и освещение играют роль в создании более материалистичного ощущения.

Информация / Скачать

4Line jQuery Accordion

Теперь это более минималистичный и простой дизайн jquery-гармошки, если вы его ищете.Создатель дал каждому фору, если они хотят добавить что-то свое, поскольку общий стиль и дизайн довольно просты. А вот аккордеон работает довольно плавно. И, как следует из названия, вся структура основана на 4 простых линиях, которые служат границами для каждого заголовка или содержимого. Легко реализовать и воспроизвести, если хотите, с помощью нескольких настроек здесь и там вы можете превратить это в свой собственный дизайн. Перейдите по ссылке ниже, чтобы получить доступ к их полной структуре кодирования.

Информация / Скачать

Вращающиеся стрелки

Еще один в черно-белой цветовой гамме, это более продвинутый и сложный вариант.Простой аккордеон определяется четырьмя черными прямоугольниками, каждое из которых раскрывается щелчком, чтобы открыть содержимое внутри. Но, как следует из названия, фокус здесь — вращающиеся стрелки, которые меняют свое положение при выделении. Разделы также разделены на несколько частей с разделителями между каждой точкой. В целом, дизайн остается минимальным, но в то же время современным со шрифтами, цветовыми схемами и всей структурой. Сочетая HTML, CSS и jQuery, создатель этого примера поиграл с упрощенными функциями, чтобы получить этот потрясающий вариант.

Информация / Скачать

Сексуальный аккордеон

Если говорить о чистом и аккуратном дизайне с черно-белыми цветовыми схемами, то этот попадает в ту же нишу. Однако вместо дизайна коробки, как в большинстве наших примеров, перечисленных сегодня, здесь также используются 4 линии для обозначения каждой складной секции. Вращение на левой стороне также добавляет этот тонкий намек на творчество. Сочетая простоту со всем гармошкой, этот дизайн универсален и работает практически со всеми возможными сайтами.Хотя все элементы и их стиль предопределены, вы можете легко добавить свой собственный штрих, немного изменив здесь и там. Так зачем начинать полностью с чистого листа, если эта бесплатная опция может дать вам фору.

Информация / Скачать

Адаптивный синий аккордеон

Одно из главных достоинств аккордеона — это, конечно, его отзывчивость. И этот дизайн, несомненно, является отличным воплощением этого. Этот синий аккордеон, подходящий к любому размеру экрана, маленькому или большому, придает ему стильный внешний вид.Ящики, представляющие расширяемые разделы, также содержат места для размещения изображений, что является уникальной концепцией. Хотя синие и белые цветовые схемы довольно привлекательны, вы можете легко изменить их в соответствии со своими предпочтениями. Вращающаяся стрелка для более интересной детали помещена внутри квадрата. В целом, довольно впечатляюще, легко получить полный доступ к кодам по ссылке внизу.

Информация / Скачать

Простой аккордеон jQuery

Используя классический дизайн на основе вкладок, этот jquery-аккордеон прост, эффективен и выглядит довольно профессионально.Простой фон с серой кнопкой в ​​виде вкладок работает как держатель заголовка для аккордеона. Эти вкладки при нажатии на них анимируются и расширяются, как аккордеон. Используя простой HTML и CSS, стиль остается эстетически приятным и гибким, так что вы также можете добавить свой собственный штрих. Получите доступ к их полной структуре кодирования ниже по ссылке, которую мы перечислили ниже.

Информация / Скачать

Адаптивный jQuery Accordion

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

Информация / Скачать

3D Аккордеон

Это более интересный и впечатляющий дизайн, созданный для имитации трехмерного дизайна. И если вы предпочитаете более творческий и стильный подход, то этот вариант определенно для вас. Создатель использовал изображения в качестве разделов аккордеона, которые разворачиваются в трехмерном эффекте, чтобы раскрыть содержимое внутри.Еще одна небольшая деталь, которая делает вещи интересными, — это эффект наведения, который показывает дополнительные детали, добавленные в заголовок. Разделы контента также разработаны с материальным дизайном, что придает им почти реалистичное ощущение бумаги. Каждое из изображений размещается горизонтально одно над другим. Вся структура основана на CSS, HTML и JS для достижения конечного результата. Чтобы подробнее узнать об используемых кодах, перейдите по ссылке ниже.

Информация / Скачать

Супер простой аккордеон

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

Информация / Скачать

jQuery Accordion Автор Эндрю Ходжсон

Используя простоту и понятный дизайн, это еще один потрясающий вариант для реализации аккордеона jquery на вашей стороне.Несмотря на то, что стиль довольно минималистичен, это отличный вариант. Почему? Потому что каждый из разделов стилизован и анимирован до совершенства для плавного воспроизведения. Секция в рамке скользит вверх и вниз, открывая содержимое внутри. С правой стороны значок информации также изменится на выход или поперечное сечение, что вернет всю конструкцию в исходное положение. С помощью некоторых настроек здесь и там вы можете легко изменить шрифты, цветовые схемы и размеры, если хотите.

Информация / Скачать

Действительно просто jQuery Accordion от Jen

Еще один интересный пример — это замечательный пример jquery-аккордеона от Jen.Сохраняя его действительно простым и минимальным, это идеальный пример, демонстрирующий, как что-то настолько простое может быть таким эффективным. Черные ящики выделяются на белом фоне, и плавный переход с их размещением действительно впечатляет. Даже тексты анимированы, чтобы изменить свою цветовую схему, чтобы выделить выделение, в то время как остальной контент отображается сам. Используя HTML, CSS и немного JQuery, вы тоже можете создать тот же эффект. Просто перейдите к коду по ссылке ниже и начните работу над проектом!

Информация / Скачать

Аккордеон Майкла Хоффмана

Этот аккордеон Майкла Хоффмана — еще один профессионально выглядящий образец, к которому вы можете легко получить доступ, перейдя по ссылке ниже.Для синего и гармошки используются черные шрифты на каждом из квадратов. Однако выбранный раздел меняет цвет шрифта на белый. Довольно простой в использовании, это более простой вариант, с которого вы можете начать. Все коды чистые и хорошо прокомментированы, так что вы можете легко понять всю структуру. Еще одна тонкая добавленная деталь — это изменение цвета от более светлого до более темного при нажатии, чтобы выделить выделение.

Информация / Скачать

CSS JSS Многоуровневый аккордеон

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

Информация / Скачать

Нахальный Аккордеон

Красочный и привлекательный во всех смыслах, это более привлекательный дизайн, который можно добавить с помощью аккордеонов jquery на любой сайт. Если вы хотите использовать его для брендов, рекламных или творческих целей, это отличный вариант. Кто бы мог подумать, что простой дизайн можно поднять на совершенно другой уровень, используя только несколько цветов? В дополнение к этому, различные инновационные компоненты, включая кнопку, область текста, а также значки, добавляют привлекательности.При нажатии эти разделы расширяются или сдвигаются вниз, открывая остальной контент. Используя HTML, CSS и немного JS, конечный результат, безусловно, стоит попробовать.

Информация / Скачать

Простой jQuery Accordion от Виктора Диаса де Леона

Еще один стиль Виктора Диаса де Леона под простой и элегантной нишей аккордеона. Коробки, основанные на материальном дизайне, анимированы таким образом, что визуально выглядят потрясающе. Серовато-белый на красном фоне также очень хорошо сочетается.Используя CSS и JS, каждый из разделов выполняет потрясающее движение аккордеона и переход. Все факторы стиля, включая цветовые схемы, используемые шрифты и даже шаблоны, предварительно определены. Однако вы можете сделать этот дизайн своим и добавить собственные детали с небольшими изменениями здесь и там.

Информация / Скачать

Переключатель аккордеона

Использование стиля переключения с аккордеоном — еще один отличный способ добавить аккордеон на ваш веб-сайт. Элегантный и чистый дизайн, сине-белая цветовая гамма делает его еще более привлекательным.Дизайн в стиле переключателя расширяется за счет эффекта плавного выдвижения, открывая содержимое внутри. Шрифты и общие факторы стилизации сведены к минимуму, чтобы сосредоточиться на отображаемом контенте. И в отличие от большинства примеров в нашем списке, здесь используется простая структура из 4 строк, а не прямоугольников.

Информация / Скачать

Легкий аккордеон

Еще один более креативный аккордеон — супер простой, но стильный jquery-аккордеон от Расмуса Биля Ларсена. Контрастный цвет с черным на желтом делает его более стильным и ретро.Каждая вкладка аккордеона представлена ​​отдельными полями, содержащими содержимое внутри. При щелчке по нему остальная часть содержимого превращается в эффект плавного слайда. Вращающиеся значки справа также добавляют привлекательности. Принимая во внимание мельчайшие детали, дизайн также основан на материальном каркасе, что придает ему более реалистичный вид.

Информация / Скачать

Горизонтальный аккордеон Easy CSS jQuery

Если вертикальные гармошки вам не подходят, то этот пример — отличный вариант для вас.Уникальная концепция в сочетании с инновационными элементами дизайна позволила создателю сохранить визуально привлекательный внешний вид. Каждая вкладка-гармошка различается по цвету, всего используется 5 цветов. И в отличие от традиционного аккордеона, этот дизайн имеет наклон в сторону горизонтального движения. Он в основном действует, скользя в и из поля зрения в зависимости от нажатой вкладки. При открытии содержимое затем переключается на вертикальный вид, чтобы соответствовать просмотру пользователей. Использование CSS, HTML и JS, хотя это сложно сделать с первого раза, тем не менее стоит попробовать, если вы хотите выделиться.

Информация / Скачать

Аккордеон и поиск

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

Информация / Скачать

Простой аккордеон JQuery с неограниченным вложением

Если вы хотите что-то более минималистичное и простое, то это еще один отличный способ реализовать на своем сайте аккордеон jQuery. Вся конструкция визуально чистая и элегантная. С рядом кнопок-переключателей, которые расширяются при нажатии, чтобы показать содержимое внутри, это довольно простой дизайн.Разделы контента предназначены для простого скольжения вниз и работают как традиционный переключатель. Это означает, что одновременно может отображаться только одна категория. Кнопки также имеют легкий намек на эффект наведения с легким переходом цвета. Замечательно то, что шаблон также довольно отзывчив и реагирует в соответствии с размером экрана устройств, которые используют ваши пользователи.

Информация / Скачать

Адаптивный аккордеон

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

Информация / Скачать

Аккордеон Material Design

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

Информация / Скачать

JQuery Accordion от Elen

На очереди еще один минималистичный и упрощенный подход к дизайну аккордеона jQuery. Это базовая конструкция с чистым движением и простым дизайном. Даже использование цветовых схем сведено к минимуму, а общий вид выглядит профессионально.Как и любой другой аккордеон, при нажатии на любую из вкладок он показывает содержимое внутри, удобно расположенное в соответствии с вашими потребностями. Поскольку он основан на структуре кода HTML, CSS и JS, вы можете сделать еще один шаг и настроить детали по своему вкусу. Вы можете легко ознакомиться со структурой, перейдя по ссылке ниже. Еще одна тонкая деталь — это плавная отзывчивость, которую он предлагает. В общем, отличный способ начать добавлять креативные элементы на ваш сайт, это отличное дополнение к нашему списку.

Информация / Скачать

Аккордеон JQuery со стрелкой

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

Другой дизайн здесь — это аккордеон, похожий на окно чата, который также работает с простым движением при наведении и щелчке. Здесь вместо стрелки вы найдете выпадающее окно чата, похожее на дизайн, чтобы продемонстрировать содержимое внутри.