Аккордеон jquery вертикальный – Вертикальное меню-аккордеон на jQuery — Уникальные скрипты и готовые решения для сайта

19 Jquery аккордеонов и экспандеров для сайта

1. javascript плагин аккордеон «TinyAccordion»

Отображение информации с эффектом аккордеона. Поддержка нескольких уровней.

2. jQuery плагин «Easy Expand»

Плагин для реализации раскрывающейся области. Контент появляется при нажатии на ссылку.

3. Красивый слайдер-аккордеон на jQuery

4. jQuery плагин аккордеон «Jaws»

Плагин для реализации блока последних новостей с эффектом аккордеона и постраничным разбиением.

5. CSS jQuery аккордеон

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

6. jQuery плагин «liteAccordion»

Создание слайдеров изображений в стиле горизонтального аккордеона. Три различных варианта плагина можете посмотреть на демонстрационной странице.

7. jQuery плагин «Fade and slide»

Легкий плагин для отображения/скрывания информации в блоке.

8. jQuery слайдер-аккордеон

Аккуратный jQuery слайдер в стиле аккордеон. Есть возможность установить автоматическую смену слайдов и время показа для каждого слайда.

9. «Toggle Effect»

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

10. Вертикальный аккордеон на jQuery

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

11. jQuery аккордеон

12. Вертикальный аккордеон на jQuery

Раскрывающаяся область.

13. Горизонтальный и вертикальный javascript аккордеон «Aga»

Плагин для отображения контента и изображений с эффектом аккордеона.

14. Сетка-аккордеон

Вы, наверное, встречались с реализацией меню в виде аккордеона. Когда меню подобно аккордеону растягивается либо вертикально, либо горизонтально. Я предлагаю вам посмотреть расширенную реализацию этой техники, которая представляет собой сетку. При нажатии на какую-нибудь клетку, её границы разъезжаются по горизонтали и вертикали для отображения полного содержимого клетки

15. Динамическая реализация страницы FAQ (вопрос-ответ)

На странице отображается список вопросов. У каждого вопроса имеется кнопка «ответ», по нажатию на которую выплывает ответ на интересующий вопрос. Внешний вид можно отредактировать в файле style.css

16. Вертикальный jQuery аккордеон «Flexible Slide-to-top Accordion»

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

17. jQuery плагин «Facets»

Плагин в стиле аккордеон для реализации необычной навигации на сайте. Для того чтобы посмотреть плагин в действии в различном исполнении, пройдитесь по ссылкам Demo1 — Demo4 на демонстрационной странице.

18. jQuery вкладки-аккордеон

Нет возможности поставить прямую ссылку, поэтому ссылка «Скачать» ведет на страницу, с которой вы сможете загрузить скрипт.

19. JQuery аккордеон 

Вертикальный аккордеон на чистом CSS3

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

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

Здесь можно задействовать или использовать плагины javascript (jQuery) для создания аккордеона, но все варианты идут на чистой стилистике CSS, особенно первый вариант, он собран как по дизайн, так и по оттенку цвета на стилях, но минус в том, что не имеет значений виде кнопок что на других вариациях. Где использовать только CSS3 для достижения того же эффекта.

По умолчанию:

При раскрытие:

HTML

Код

<ul>
  <li>
  <input name=»kuptatem-dausanu» type=»checkbox» />
  <label for=»kuptatem-dausanu1″>Все Категории</label>
  <div>
  <p>Первое описание в разделе</p>
  </div></li>
  <li>
  <input name=»kuptatem-dausanu» type=»checkbox» />
  <label for=»kuptatem-dausanu2″>Вторая категория</label>
  <div>
  <p>Краткое описание по тематике сайта.</p>
  </div></li>
  <li>
  <input name=»kuptatem-dausanu» type=»checkbox» />
  <label for=»kuptatem-dausanu3″>Третья категория</label>
  <div>
  <p>Это мануал, который задействован категорий.</p>
  </div></li>
  <li>
  <input name=»kuptatem-dausanu» type=»checkbox» />
  <label for=»kuptatem-dausanu4″>Четвертая категория</label>
  <div>
  <p>Здесь может быть любое тематическое описание.</p>
  </div></li>
  <li>
  <input name=»kuptatem-dausanu» type=»checkbox» />
  <label for=»kuptatem-dausanu5″>Здесь вся основа находится</label>
  <div>
  <p>Также что то пишем, то что вам нужно донести до пользователя.</p>
  </div></li>
</ul>

CSS

Код

ul {
  width: 532px;
  text-align: center;
}

.kuptatem-dausanu {
  padding: .6em 0;
  list-style-type: none;
  font-size: 14px;;
  background-color: #183d52;
  border: 1px solid #1c5458;
}
.kuptatem-dausanu-label {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #e4e4e4;
}

input,
div {
  display: none;
}

input:checked ~ div {
  display: block;
}

.kuptatem-dausanu-tab {
  background-color: #417C81;
  padding: .3em;
  margin-top: .5em;
}

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

И здесь будет работать только в том случае, если у нас будет ссылка, указывающая на идентификатор, и когда мы нажимаем на эту ссылку, идентификатор становится целевым элементом.

Демонстрация

Вертикальный аккордеон в 2 вариантах на CSS

1. При открытие страницы или сайта:

2. Это при клике открывается одна из категорий:

See the Pen
Pure CSS Accordion by Kocsten (@kocsten)
on CodePen.

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

Важно: Вся документация на них находится в архиве, также можете посмотреть на demo странице, которая привязана к заданному материалу, что представлен здесь.

Вертикальное многоуровневое меню-аккордеон на jQuery

<div>

<ul>

<li><a href=»#»>Home</a></li>

<li><a href=»#»>Products</a>

<ul>

<li><a href=»#»>Mobile Phones & Accessories</a>

<ul>

<li><a href=»#»>Product 1</a>

<ul>

<li><a href=»#»>Part A</a></li>

<li><a href=»#»>Part B</a></li>

<li><a href=»#»>Part C</a></li>

<li><a href=»#»>Part D</a></li>

</ul>

</li>

<li><a href=»#»>Product 2</a>

<ul>

<li><a href=»#»>Part A</a></li>

<li><a href=»#»>Part B</a></li>

<li><a href=»#»>Part C</a></li>

<li><a href=»#»>Part D</a></li>

</ul>

</li>

<li><a href=»#»>Product 3</a>

<ul>

<li><a href=»#»>Part A</a></li>

<li><a href=»#»>Part B</a></li>

<li><a href=»#»>Part C</a></li>

<li><a href=»#»>Part D</a></li>

</ul>

</li>

</ul>

</li>

<li><a href=»#»>Desktop</a>

<ul>

<li><a href=»#»>Product 4</a></li>

<li><a href=»#»>Product 5</a></li>

<li><a href=»#»>Product 6</a></li>

<li><a href=»#»>Product 7</a></li>

<li><a href=»#»>Product 8</a></li>

<li><a href=»#»>Product 9</a></li>

</ul>

</li>

<li><a href=»#»>Laptop</a>

<ul>

<li><a href=»#»>Product 10</a></li>

<li><a href=»#»>Product 11</a>

<ul>

<li><a href=»#»>Part E</a></li>

<li><a href=»#»>Part F</a></li>

<li><a href=»#»>Part G</a></li>

<li><a href=»#»>Part H</a></li>

</ul>

</li>

<li><a href=»#»>Product 12</a></li>

<li><a href=»#»>Product 13</a></li>

</ul>

</li>

<li><a href=»#»>Accessories</a>

<ul>

<li><a href=»#»>Product 14</a></li>

<li><a href=»#»>Product 15</a></li>

</ul>

</li>

<li><a href=»#»>Software</a>

<ul>

<li><a href=»#»>Product 16</a></li>

<li><a href=»#»>Product 17</a></li>

<li><a href=»#»>Product 18</a></li>

<li><a href=»#»>Product 19</a></li>

</ul>

</li>

</ul>

</li>

<li><a href=»#»>About Us</a>

<ul>

<li><a href=»#»>About Page 1</a></li>

<li><a href=»#»>About Page 2</a></li>

</ul>

</li>

<li><a href=»#»>Services</a>

<ul>

<li><a href=»#»>Service 1</a>

<ul>

<li><a href=»#»>Service Detail A</a></li>

<li><a href=»#»>Service Detail B</a></li>

</ul>

</li>

<li><a href=»#»>Service 2</a>

<ul>

<li><a href=»#»>Service Detail C</a></li>

</ul>

</li>

<li><a href=»#»>Service 3</a>

<ul>

<li><a href=»#»>Service Detail D</a></li>

<li><a href=»#»>Service Detail E</a></li>

<li><a href=»#»>Service Detail F</a></li>

</ul>

</li>

<li><a href=»#»>Service 4</a></li>

</ul>

</li>

<li><a href=»#»>Contact us</a></li>

</ul>

</div>

аккордеон » Скрипты для сайтов

31.07.2014 9 516 Скрипты / Accordion

Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.  

30.07.2014 3 323 Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

11.04.2012 2 804 Скрипты / Accordion

Akordeon — плагин аккордеона

Akordeon — jQuery плагин добавляющий на страницу стильно оформленный аккордеон. Полностью настраиваемый с возможностью отображения большого объема информации в ограниченном пространстве.

22.03.2012 2 860 Скрипты / Menu & Nav

Меню аккордеон на CSS3

Меню в стиле аккордеона сделанное на CSS3 с использованием изображений к пунктам навигации.

01.03.2012 3 740 Скрипты / Accordion

Аккордеон на CSS3

Типичный аккордеон, но реализованный только с помощью CSS3 свойств.

17.02.2012 4 708 Скрипты / Accordion

Спойлер — spoiler

Рассмотрим toggleClass атрибут jquery для создания спойлера или аккордеона.

08.12.2011 2 443 Скрипты / Accordion

Гибкий аккордеон

Создадим простой быстрореагирующий аккордеон, который при раскрытии будет перемещаться к верхней области просмотра. Также будет добавлено несколько переходов CSS3 для стрелки. Гибкость заключается в том, что ширина аккордеона будет подстраиваться под размеры экрана.

08.11.2011 1 815 Скрипты / Slider

Slidorion — слайдер и аккордеон в одном

Данный плагин для jquery совмещает в себе и слайдер изображений и аккордеон из описания к ним.

14.10.2011 2 954 Скрипты / Accordion

Эффект раздвижных шторок

Похоже на аккордеон — при наведении происходит, как бы раздвигание шторок и мы видим полное изображение.

05.08.2011 1 571 Скрипты / Slider

Вертикальный раздвижной аккордеон

В этой уроке речь пойдет о вертикальном аккордеоне с возможностью слайдера реализованного конечно же на jQuery. Кусочек аккордеона раздвигается при клике и показывает дополнительную информацию, например текст, а другие кусочки станут прозрачнее и сожмутся. Переход к следующему слайду производится с помощью стрелочек или же колесиком мышки (плагин jQuery Mousewheel от Brandon Aaron).

13.05.2011 2 105 Скрипты / Accordion

Плагин zAccordion — слайдер

Простой плагин zAccordion — слайдер изображений. Замечательно впишется в любой дизайн сайта.

Вертикальное меню-аккордеон на jQuery — Уникальные скрипты и готовые решения для сайта

Добавить в закладки

Скачать [RAR] [1 КБ]

Простенькое вертикальное меню с эффектами аккордеона и плавного исчезания

Для начала посмотрите ДЕМО

Установка:

1#: После </head> на нужных страницах вставляйте:

<link href=»/css/style.css» rel=»stylesheet» type=»text/css» /> <script type=»text/javascript» src=»/js/jQuery.fademenu.js»></script> <script type=»text/javascript» src=»/js/menu.js»></script>

<link href=»/css/style.css» rel=»stylesheet» type=»text/css» /> <script type=»text/javascript» src=»/js/jQuery.fademenu.js»></script> <script type=»text/javascript» src=»/js/menu.js»></script>

2#: Следующий код в то место, где будет само меню:

<div> <dl> <dt><a href=»#»>Parent</a></dt> <dd> <ul> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> </ul> </dd> <dt><a href=»#»>Parent</a></dt> <dd> <ul> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> </ul> </dd> <dt><a href=»#»>Parent</a></dt> <dd> <ul> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> </ul> </dd> </dl> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<div> <dl> <dt><a href=»#»>Parent</a></dt> <dd> <ul> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> </ul> </dd> <dt><a href=»#»>Parent</a></dt> <dd> <ul> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> </ul> </dd> <dt><a href=»#»>Parent</a></dt> <dd> <ul> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> <li><a href=»#»>Child</a></li> </ul> </dd> </dl> </div>

Залейте CSS файл из прикреплённого архива в папку css и два JS файла в папку js

Вертикальный аккордеон со слайдером на jQuery

Если вы хотите объедение приятное с красивым на своем блоге то этот  урок станет вам весьма полезен. Мы рассмотрим процесс создания простого автоматического слайдера с прикрепленным к нему аккордеоном вкладок с плавным раскрытием и выводом дополнительной информации. Для этого мы будем использовать плагин Slidorion. Имеется несколько опций, которые дают возможность настроить время показа слайдов, эффекты переходов между слайдами и включить/выключить автоматическое проигрывание.

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

<link rel=»stylesheet» href=»css/slidorion.css» /> <script src=»js/jquery.min.js»></script> <script src=»js/jquery.easing.js»></script> <script src=»js/jquery.slidorion.js»></script>

Следующим шагом будет создание разметки HTML, которая выглядит следующим образом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div> <div> <div rel=»section1″> <img src=»sample.jpg» /> </div> <div rel=»section2″> <img src=»sample.jpg» /> </div> <div rel=»section3″> <img src=»sample.jpg» /> </div> </div> <div> <div><a rel=»section1″>Кунг Фу Панда 2</a></div> <div> <!— Содержание располагается здесь —> </div> <div><a rel=»section2″>Темный рыцарь</a></div> <div> <!— Содержание располагается здесь —> </div> <div><a rel=»section3″>Типа крутые легавые</a></div> <div> <!— Содержание располагается здесь —> </div> </div> </div>

Теперь инициализируем сам плагин, с помощью следующего скрипта:

<script> $(document).ready(function(){ $(‘#slidorion’).slidorion(); }); </script>

Все достаточно просто, рассмотрев следующие опции можно изменить необходимые параметры под себя:

<script> $(document).ready(function(){ $(‘#slidorion’).slidorion({ speed: 1000, interval: 4000, effect: ‘slideLeft’ }); }); </script>

	Автоматическая смена слайдов (логическая перменная)
	Эффект перехода анимации (строка)
	Эффект смены слайдов (строка)
	Первый слайд для вывода (атрибут rel данного слайда) (строка)
	Включение паузы проигрывания при наведении курсора мыши (логическая перменная)
	Задержка перед сменой слайдов (число)
	Скорость анимации (число)

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

Читайте также: