Создаем на сайте меню аккордеон средствами CSS

Что такое аккордеон и с чем его едят?

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

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

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

Создаем аккордеон на базе CSS

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

Однако не стоит забывать о неповторимом Internet Explorer. Даже при использовании общепринятых правил CSS он требует особого внимания в виде js-кода, который нормализует его работу с таким кодом. В прочем если Вас не сильно волнуют 7 и более ранние версии этого браузера, можете не обращать внимания на это замечание.

Принцип работы этого способа создания меню не имеет ничего сложного. Двумя основными столбами, на которых держится гармошка, написанная средствами CSS, являются свойства :target (больше о нем можно узнать в статье о псевдоклассах CSS) и transition.

Ниже показан пример реализации метода:

HTML

<div>
      <section>
              <h2><a href="#first">Раздел 1</a></h2>
              <div>
                      <p>Выплывающий контент или дополнительные ссылки
 для перехода в соответствующие подразделы</p>
              </div>
      </section>
	  <section>
              <h2><a href="#second">Раздел 2</a></h2>
              <div>
                      <p>Выплывающий контент или дополнительные ссылки
 для перехода в соответствующие подразделы</p>
              </div>
      </section>
	  <section>
              <h2><a href="#third">Раздел 2</a></h2>
              <div>
                      <p>Выплывающий контент или дополнительные ссылки
 для перехода в соответствующие подразделы</p>
              </div>
      </section>
</div>

CSS

.accordMenu h2 + div{
      height: 0;
      overflow: hidden;
      -moz-transition: height 0.3s ease-in-out;
      -webkit-transition: height 0.3s ease-in-out;
      -o-transition: height 0.3s ease-in-out;
      transition: height 0.3s ease-in-out;
}
.accordMenu :target h2 + div{
      height: 100px;
}
h2 a, h2{
      font-size:17px;
      color:#444;
      font-weight:lighter;
      text-transform:uppercase;
      text-decoration:none;
      padding:5px;
}
section {
     background:#eee;
     border:1px solid #c9c9c9c;
}
p {
    padding:5px;
}

Не стоит забывать про особенность работы метода в Internet Explorer. Для так называемого «костыля» для нашего дедушки подойдет множество средств, все зависит от Вашего энтузиазма и фантазии. В указанном примере костыль не используется.

Вот так будет выглядеть работа кода на практике

В каких браузерах работает?

Подводя итог

Использование верстки меню нетипичными способами на основе CSS позволяет эргономично организовать контент Вашего интернет-ресурса.

Также важно не упустить момент подключения html5shiv для браузера, так как был использован HTML5.

Оценок: 8 (средняя 4.5 из 5)

• 2167 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Исследование. Какую иконку выбрать для обозначения аккордеонов?

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

Вопрос, который часто задают на наших курсах Mobile UX и Application Design: какую иконку следует использовать, чтобы лучше всего сигнализировать о том, что контент может разворачиваться? Другими словами, какая иконка лучше подходит для аккордеонов?

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

• Карет или символ вставки (стрелка, направленная вниз)
• Плюс
• Стрелка, указывающая вправо
• Отсутствие иконки

Есть небольшие различия в том, для чего обычно используются эти иконки – в то время, как плюс и символ вставки обычно предназначены для обозначения открытия аккордеона, дизайнеры использовали иконку стрелки вправо, чтобы обозначить два разных действия: либо раскрыть контент и остаться на этой же странице, либо перейти на другую страницу. Кроме того, после расширения символ вставки обычно будет поворачиваться (возможно, в быстрой анимации), а знак плюс превратится в минус, чтобы стать обозначением обратного действия – сворачивания только что развернутого содержимого.

Предстоящие воркшопы

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

Методология

Материалы. Мы решили изучить аккордеоны в контексте мобильной навигации, поэтому создали 11 прототипов мобильных веб-сайтов, каждый из которых относится к разным отраслям: интернет-магазины одежды, розничная торговля большими коробками, автозапчасти, финансы, новости, местное самоуправление, высшее образование, Домашние проекты своими руками, обзоры товаров народного потребления, здравоохранение и путешествия. Прототипы не были интерактивными; это были простые макеты с уже открытым меню и списком категорий, видимым на экране, чтобы гарантировать, что мы измеряем только взаимодействие с аккордеонами, а не усилия пользователей по поиску меню, просмотру содержимого домашней страницы и т. д.

Для каждого прототипа мы создали задачу, которая заключалась в поиске информации в одном из аккордеонов, видимых в прототипе. Например, на прототипе веб-сайта с обзорами товаров народного потребления была поставлена ​​задача «Найти отзывы о посудомоечных машинах».

Мы также создали 5 разных вариантов для каждого прототипа; в каждом варианте использовалась одна из 4 возможных иконок (стрелка, символ вставки, плюс, foil) или иконка вообще отсутствовала. Мы создали иконку foil (которая раньше не использовалась для аккордеонов), чтобы увидеть, имеет ли значение тип иконки вообще или ее наличия рядом с названием аккордеона было достаточно, чтобы сигнализировать об аккордеоне (но сама иконка не имела значения).

Поскольку длина текстовых меток может повлиять на то, куда пользователи смотрят или кликают, мы обеспечили, чтобы длина меток в каждом прототипе была распределена одинаково и что «правильный» ответ для каждой задачи (то есть вариант меню, который, вероятно, будет выбран пользователями) был разной длины в каждом прототипе.

Мы также провели несколько пилотных исследований, чтобы убедиться, что показатель успешности задачи был высоким (более 90%) и чтобы люди могли легко определить «правильную» категорию меню, которую нужно было выбрать для выполнения задачи. После каждого пилотного исследования мы уточняли формулировку задач и названия пунктов меню. Таким образом, мы фактически провели несколько исследований юзабилити  информационной архитектуры наших прототипов, прежде чем собрать количественные данные. Этот процесс гарантировал, что определение правильной категории было относительно тривиальным для большинства участников – так как целью нашего исследования было протестировать иконки аккордеонов, а не сложность поиска информации в задачах, которые мы давали пользователям.

Участники. В нашем исследовании приняло участие 136 человек. Все участники видели экземпляры всех иконок (в разных прототипах и в разном порядке).

Процедура. Тестирование проводилось в UserZoom в виде серии задач по первому клику, выполняемых на мобильных устройствах. Всем участникам в случайном порядке показали по одной версии каждого из 11 прототипов и связанной с ними задачи. После того, как участники указали, где они будут нажимать, чтобы найти ответ, они должны были ответить на вопрос, выбрав один из нескольких вариантов ответа. Мы спрашивали их, чего они ожидали (переход непосредственно на новую страницу, просмотр дополнительных параметров меню на той же странице или что-то еще).

Мы собрали данные по:

• Области тапа: там, где участник нажимал (непосредственно на текстовую метку, непосредственно на иконку, на пространство между меткой и иконкой или в любом другом месте прототипа)
• Ожидания участников: ответ на вопрос об ожиданиях после выполнения задания (переход непосредственно на новую страницу, просмотр дополнительного списка ссылок на той же странице или что-то еще)

Где участники нажимают

Нажатий вне области, связанной с аккордеоном, было относительно немного (5-8%), и большинство нажатий приходилось либо на метку, либо на иконку, связанную с аккордеоном (а не на пространство между ними).

Дисперсионный анализ (ANOVA) данных, когда пользователи нажимали на текстовую метку, обнаружил значительное влияние типа иконки, когда участники или прототипы рассматривались как случайный фактор. Парные контрасты показали, что условие отсутствия иконки значительно отличалось от остальных вариантов. В частности, вероятность нажатия на метку при отсутствии иконки была выше – это совсем не удивительно, поскольку в этом варианте «область иконки» была просто пустым пространством (мы следили, нажимали люди на этом месте или нет). Однако, это важное напоминание о том, что пользователи обычно предпочитают взаимодействовать с очевидными указателями.

Ни с одним из вариантов иконки не было статистически значимой тенденции нажатия на иконку чаще, чем на метку, за исключением символа вставки (p <0,01) – другими словами, когда о наличии аккордеона сигнализировал символ вставки, люди чаще нажимали на иконку, чем на метку. Для остальных иконок не было статистически значимого предпочтения.

Чего ожидают участники

Чтобы проанализировать ответы на вопрос после задания (ожидали ли они, что останутся на странице) мы определили ожидание перехода на новую страницу, как двоичную переменную, количественно определяющую, ожидали ли участники остаться на той же странице (0) или перейти на новую страницу (1). Показатель более 50% для определенного признака означает, что в целом люди ожидали перехода на новую страницу. Для аккордеона, при нажатии на который страница не изменится, в идеале показатель должен быть менее 50%.

Пользователи не связывали стандартные иконки аккордеона (символ вставки, плюс и стрелка) с переходом на новую страницу (так как коэффициент ожидания новой страницы незначительно отличается от 50%, p> 0,05). Среди стандартных иконок с символом вставки люди чаще ожидали, что останутся на странице, чем с иконкой foil (p <0,05) или при отсутствии иконки (p <0,05), а плюс показал лучшие показатели, чем foil (p <0,05), но не при отсутствии иконки. Показатель стрелки вправо статистически не отличается от иконки foil или при отсутствии иконки, поэтому ее не следует использовать для аккордеонов.

Основные выводы

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

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

• Люди, как правило, с одинаковой частотой нажимают на метку и на большинство стандартных иконок. Единственное исключение – символ вставки, тогда пользователи чаще нажимают на иконку, но все равно 29% нажатий приходится на метку. Это говорит о том, что нельзя использовать сплит-кнопки для аккордеонов – текстовая метка указывает прямо на целевую страницу, а иконка открывает аккордеон.
• Создание новых иконок для обозначения аккордеонов или их отсутствие – не лучшая идея, поскольку они нарушают ожидания пользователей (которые заключаются в том, что они перейдут на новую страницу).
• Ни один из стандартных указателей не имеет прочной связи с пребыванием на странице. Следовательно:
  • Использование символа вставки определенно лучше, чем отсутствие иконки или нестандартная иконка.
  • Использование стрелки или плюса не лучше, чем отсутствие иконки.
• Когда иконка отсутствовала, пользователи имели тенденцию нажимать на текстовую метку, а не на пустое место в этой строке. Несмотря на очевидность подобного вывода, это еще одно свидетельство того, что пользователи склонны взаимодействовать с сильными и понятными указателями.
• Интересно, что использование иконки со стрелкой вправо (в отличие от плюса или символа вставки) НЕ было связано с ожиданием перехода непосредственно на новую страницу. Хотя многие дизайнеры могут подумать, что стрелка вправо означает «перейти на новую страницу», а стрелка вниз, означает «открыть аккордеон на этой странице», наши исследования не подтвердили эту гипотезу.

Дизайн-рекомендации

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

Вывод

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

Содержимое в виде аккордеона на CSS

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

Когда я писал урок о том как сделать меню в виде аккордеона. Возможно кого-то заинтересует:

Пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Структура документа будет состоять из контейнеров <div>, внутри которых находится блок <section>. В этом уроке мы создадим 5 вкладок:

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

<div>
    <section>
        <h3><a href="#about">О нас</a></h3>
        <p>Текст о нас ...</p>
    </section>
    <section>
        <h3><a href="#services">Сервисы</a></h3>
        <p>Текст про сервисы ...</p>
    </section>
    <section>
        <h3><a href="#blog">Блог</a></h3>
        <p>Текст о блоге ...</p>
    </section>
    <section>
        <h3><a href="#portfolio">Портфолио</a></h3>
        <p>Ваше портфолио ...</p>
    </section>
    <section>
        <h3><a href="#contact">Контакты</a></h3>
        <p>Наши контакты ...</p>
    </section>
</div>

Вы добавляете столько блоков <section>, сколько вкладок вам необходимо.

CSS часть

Сначала зададим стиль для основного контейнера:

1
2
3
4
5
6
7
8

.accordion {   
     width:830px;  
     overflow:hidden;   
     margin:10px auto;   
     color:#474747;   
     background:#414141;   
     padding:10px;   
}

Затем для каждой вкладки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.accordion section{   
      float:left;  
      overflow:hidden;   
      color:#333;   
      cursor:pointer;   
      background: #333;   
      margin:3px;   
}  
.accordion section:hover {  
      background:#444;  
} 
.accordion section p {   
      display:none;   
}

Так как открыто обычно одна вкладка, или все закрыты, то необходимо все остальные скрыть, что мы делаем следующим образом:

1
2
3
4
5
6
7
8
9
10
11

.accordion section:after{  
      position:relative;  
      font-size:24px;  
      color:#000;  
      font-weight:bold;  
}  
.accordion section:nth-child(1):after{ content:'1'; }  
.accordion section:nth-child(2):after{ content:'2'; }  
.accordion section:nth-child(3):after{ content:'3'; }  
.accordion section:nth-child(4):after{ content:'4'; }  
.accordion section:nth-child(5):after{ content:'5'; }

С помощью псевдо-селектора :target можно определить выбранную вкладку, а также задать ей стиль:

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

.accordion section:target {   
      background:#FFF;   
      padding:10px;  
}  
.accordion section:target:hover {   
      background:#FFF;   
}  
.accordion section:target h3 {  
      width:100%;  
}  
.accordion section:target h3 a{   
      color:#333;   
      padding:0;  
}  
.accordion section:target p {  
      display:block;  
}  
.accordion section h3 a{  
      padding:8px 10px;  
      display:block;   
      font-size:16px;   
      font-weight:normal;  
      color:#eee;   
      text-decoration:none;   
}

В этом примере у нас горизонтальный слайдер. Изначально он скрыт и имеет ширину 5%:

1
2
3
4
5
6
7
8

.horizontal section{   
      width:5%;   
      height:250px;   
      -moz-transition: width 0.2s ease-out;   
      -webkit-transition:width 0.2s ease-out;  
      -o-transition:width 0.2s ease-out;  
      transition:width 0.2s ease-out;  
}

Также необходимо позиционировать номера вкладок:

1
2
3
4

.horizontal section:after{  
      top:140px;  
      left:15px;  
}

Затем вкладка раскрывается, т.е. ширина становится 243 пикселя:

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

.horizontal section h3 {   
     -webkit-transform:rotate(90deg);  
     -moz-transform:rotate(90deg);  
     -o-transform: rotate(90deg);  
     transform: rotate(90deg);  
     width:240px;   
     position:relative;   
     left:-100px;   
     top:85px;  
}   
 
.horizontal :target{   
     width:73%;  
     height:230px;   
}  
.horizontal :target h3{   
     top:0px;  
     left:0;  
     -webkit-transform:rotate(0deg);  
     -moz-transform:rotate(0deg);  
     -o-transform: rotate(0deg);  
     transform: rotate(0deg);   
}

Для вертикального аккордеона стили немного отличаются:

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

.vertical section{   
    width:100%;   
    height:40px;   
    -webkit-transition:height 0.2s ease-out;  
    -moz-transition:height 0.2s ease-out;  
    -o-transition:height 0.2s ease-out;  
    transition:height 0.2s ease-out;  
}  
 
.vertical :target{   
    height:250px;   
    width:97%;  
}  
 
.vertical section h3 {   
     position:relative;   
     left:0;   
     top:-15px;   
}  
 
.vertical section:after{   
      top:-60px;  
      left:810px;  
}  
 
.vertical section:target:after{   
      left:-9999px;  
}

Вывод

Интересный способ компактно расположить текст. Также некоторые используют на сайтах-визитках такой аккордеон.

Успехов!

Источник: http://www.hongkiat.com/blog/css-content-accordion/

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

Меню аккордеон – это удобный способ представления контента. Он представляет собой что-то вроде гармошки, которая состоит из вкладок. При клике на ту или иную вкладку появляется какой-то текст. Изначально все вкладки скрывают текст.

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

Меню аккордеон также помогает упорядочить текст, скрыв ненужное с глаз. Каждый, кому пригодится скрытая информация, сможет открыть её в этом меню.

Меню аккордеон с плагином

Вот такое незамысловатое и простое называние у плагина, который создаёт меню аккордеон в WordPress. И работает он так же просто.

Скачайте плагин Accordions, установите его на свой сайт и активируйте. После этого в консоли появится новый пункт «Accordions». Перейдите в подпункт «New Accordions», чтобы добавить новое меню. Здесь вам потребуется написать называние для этого меню, и потом нужно будет рассмотреть опции во вкладках ниже. Есть шесть вкладок:

• Shortcode. Здесь есть шорткоды, которые можно установить в записи или страницы, а также PHP коды, которые можно поместить в файлы шаблона. Эти коды выводят создаваемое меню аккордеон.
• Accordion options. Здесь небольшие настройки для меню. Всё на английском. Кому интересно, могут поэкспериментировать. Можно оставить всё по умолчанию.
• Style. Здесь настройки внешнего вида меню аккордеона. Настроек очень много, и благодаря им можно подогнать дизайн меню под тему, которая установлена на сайте, таким образом, что оно будет выглядеть, как элемент шаблона. В общем, можно проявить творчество.
• Content. В этой вкладке можно добавлять контент для меню аккордеона. Можно добавлять любое количество вкладок. У каждой вкладки может быть заголовок и тело контента. Единственный недостаток, который тут есть – это отсутствие визуального редактора. Поэтому при необходимости форматирования текста придётся пользоваться HTML тегами.
• Custom CSS. Для тех, кто знает хотя бы основы CSS, здесь открываются дополнительные возможности в дизайне. Можно задавать собственные стили для меню.
• Tabs options. Здесь можно настроить вкладки.

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

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

Iks Menu — Аккордеон Меню для WordPress Рубрик — Плагин для WordPress

Описание

Iks Menu is a WordPress plugin that provides powerful customizable system and has loads of settings for creating WordPress accordion menus.

All previews|WooCommerce sidebar menu|User-friendly documentation with screenshots

Iks Menu — это лучший выбор меню для боковой панели. Этот плагин позволяет выбрать в качестве источника данных произвольные WordPress-меню или любые рубрики/таксономии (категории, теги записей, категории товаров WooCommerce и т.д.).
Он также предоставляет возможность добавлять изображения, как для произвольных меню, так и для рубрик (и поддерживает изображения категорий товаров WooCommerce).
Вы можете отобразить ваши меню на сайте с помощью виджетов WordPress, а также шорткода или PHP-кода.

And you do not need to learn coding to use Iks Menu! Just set all the settings using a specially designed super fast live editor with instant changes and no pages reloading! It will speed up your developing process.
Iks Menu has more than 15 starter skins (6 FREE) — so it’s super easy to use for beginners and very customizable for advanced users.

Plans

Iks Menu has 2 plans: FREE and PRO (Pricing and Features).

FREE Version Features

• Supports Taxonomies (Categories, Tags, WooCommerce products, any other)
• Supports Custom WordPress Menus (created in «Appearance» > «Menus»)
• Supports images for all taxonomies and for custom WordPress menus
• Supports showing posts for a taxonomy source
• Fast and usable menu editor with instant preview!
• Customize appearance for any part of menu (colors, fonts, margins, paddings, heights and widths without any coding)
• Customize appearance for multiple states (like Hover, Current and Children)
• Supports exporting and importing settings to reuse it again (all settings or just for appearance)
• Provides various unique settings for your menus
• Provides 6 free awesome looking skins out of the box: start using skins with clean design right now with just one click.
• Supports keyboard accessibility: «Tab» & «Enter» navigation + «Focus» state for all elements in menu
• … Just take a look at screenshots to see all features!

PRO Version Features

• All features from the FREE plan
• Settings «Initial Expansion» to expand some items, when page loads
• Expand and collapse animations for submenus
• Ability to display Posts count
• «Custom styles» setting
• Setting to use parents as sub-menu toggles
• Toggle: 50+ icons and 5+ animations for expanding
• 20+ skins
• … Take a look at pricing

Settings

Using taxonomy menu you can configure the next settings:

• Hide empty terms — Whether to hide terms not assigned to any posts.
• Order by — Field to order terms by.
• Order — Whether to order terms in ascending or descending order.
• Hierarchical — Whether to include terms that have non-empty descendants (even if ‘hide_empty’ is set to true)
• Include terms — Comma/space-separated string of term ids to include.
• Exclude terms — Comma/space-separated string of term ids to exclude.
• Search — Search criteria to match terms. Will be SQL-formatted with wildcards before and after.
• Child of — Term ID to retrieve child terms of.
• Parent — Parent term ID to retrieve direct-child terms of.
• Childless — True to limit results to terms that have no children. This parameter has no effect on non-hierarchical taxonomies.

Usage

3 variants of how to use plugin. You’ll see menu publishing guide inside the plugin.

• Widget – Use it directly in widget area
• Shortcode – Use it anywhere with shortcode
• PHP code injection – Use it anywhere in your theme with PHP code

Help

• Get help anytime 24/7 — Ask your question and we will help you anyway
• See documentation for plugin — Super detailed docs for better understanding of how plugin works
• Does not suit for you? — Suggest a new features for plugin and we will provide it soon

Установка

Check installation process with screenshots in official documentation.

Automatic installation

Automatic installation is the easiest option — WordPress will handles the file transfer, and you won’t need to leave your web browser. To do an automatic install of Iks Menu, log in to your WordPress dashboard, navigate to the Plugins menu, and click “Add New.”

In the search field type “Iks Menu” then click “Search Plugins.” Once you’ve found us, you can view details about it such as the point release, rating, and description. Most importantly of course, you can install it by! Click “Install Now” and WordPress will take it from there.

Manual installation

Manual installation method requires downloading the Iks Menu plugin and uploading it to your web server via your favorite FTP application. The WordPress codex contains instructions on how to do this here.

Отзывы

I am very happy with this menu plugin, it delivers my clients exact need – and for visual adjustments I could receive PERFECT and very friendly help! Will follow this developer on any updates and possible other plugins – they are great people. Thank you!

tried many many ways how to make my product category menu usable… this plugin finally solved all my requirements 🙂 However, the biggest feature for me is that the selected category stays visible, this is only available in the pro-version… BUT its absolute worthwile to purchase. Also ultra-fast and friendly support :-))))

Perfect, Incredible, awesome plug ins!!!

Great plugin, great support, money well spent. Thanks!

I needed a decent menu designer for woocommerce and tried a few but they didn’t have what I wanted. This plugin does it all in spades with even the free version. I bought the pro version in the end with added functionality and design options without the need to dive into the CSS. I will also be migrating my site to a new domain and found out that I can simply deactivate on my old site then reactivate on the new site. On contacting customer service they were really helpful and happy to help which is not always the case. Thanks for making this process a pleasure.

The support answer my questions instantly!

Участники и разработчики

«Iks Menu — Аккордеон Меню для WordPress Рубрик» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

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

SCHEDULED

• Ability to sort custom WP menus
• Ability to order content (link, image, toggle, etc.)
• Ability to add badges for menu items
• Search for terms
• Customizing widget area (header, content, etc.)
• Shortcode attributes
• Loading menus by AJAX
• Group skins by tags (like flat, white, colored, etc.)
• Translate plugin into other languages

1.9.0 — 2021-02-20

• Added: New setting «Icon Tag» for Toggle
• Added: Freemius SDK was updated to the latest version

1.8.9 — 2021-01-03

• Fixed: Keyboard accessibility «freeze» bug
• Fixed: https for loading Skins
• Fixed: DELETE method was changed to POST due to problems of some users

1.8.8 — 2020-11-13

• Added: Keyboard accessibility: «Tab» & «Enter» navigation + «Focus» state for all elements in menu
• Added: Some optimizations for loading posts when terms are specified in the «Include terms» setting

1.8.7 — 2020-11-05

• Fixed: Some problems with detecting current term
• Added: Freemius SDK was updated to the latest version

1.8.6 — 2020-10-16

• Added: Ability to use hooks for adding custom content (PRO only)
• Fixed: Current taxonomy’s term did not work for Custom WP menus

1.8.5 — 2020-10-14

• Added: Taxonomy’s terms at Custom WP menu can be marked as current (automatically)
• Fixed: Some problems with menu items’ alignment with shifts
• Fixed: Some problems with Freemius Pricing page

1.8.4 — 2020-09-18

• Fixed: Plugin crash when using incorrect menu in widget
• Added: Reduced the size of Freemius Pricing page

1.8.3 — 2020-09-02

• Fixed: Some problems with WP menus custom fields (WordPress 5.4+)
• Added: Freemius SDK was updated to the latest version

1.8.2 — 2020-05-20

• Fixed: Internet Explorer compatibility
• Fixed: Some problems with detecting item as current

1.8.1 — 2020-05-20

• Fixed: Image-picker duplicates for Custom WP menus (WordPress 5.4+)
• Fixed: Current item not worked at not first page of taxonomy archives
• Added: «target» attribute for links of Custom WP menus

1.8.0 — 2020-02-28

• Added: Now terms, that includes current post will be also marked as «Current» (for «taxonomy» source only)
• Added: New setting «Expand pages, that includes current page» inside «Initial expansion» settings
• Added: New setting «Exclude terms (without children)»
• Added: Special CSS class added for posts items
• Fixed: Titles’ and descriptions’ improvements of some settings

1.7.9 — 2020-02-22

• Fixed: Some users had problems with saving settings

1.7.8 — 2020-02-17

• Fixed: Cache plugins compatibility (i.e. Swift Performance)

1.7.7 — 2020-02-11

• Fixed: Toggle’s icon by default is «Chevron-1» again, not «Custom text»
• Fixed: The «Include» setting did not work properly
• Fixed: Opacity for color input did not change when changing through a picker
• Fixed: Empty input values were sometimes treated as zeros
• Mass code refactoring (core separation)

1.7.6 — 2020-01-04

• Added: New option «Menu order» for «Order by» setting
• Added: New setting «Icon — custom text» for toggle icon
• Added: New 4 animations: Fade Up, Fade Right, Fade Left, Zoom Fade

1.7.5 — 2020-01-02

• Fixed: WPML Compatibility regarding to posts
• Fixed: Checkbox displaying for latest WordPress
• Added: Freemius SDK was updated to the latest version

1.7.4 — 2019-11-06

• Added: Button to tie quad-values for Padding, Margin and Border-radius settings
• Fixed: Minor errors
• Changed: Admin Page design improvements

1.7.3 — 2019-10-21

• Fixed: Not all Toggle icons were enabled for the PRO plan

1.7.2 — 2019-10-20

• Fixed: Sometimes menu items were not ordered correctly
• Fixed: «Level shift» setting did not work correctly

1.7.1 — 2019-10-18

• Added: Freemius SDK was updated to the latest version
• Fixed: Some problems with caching plugins

1.7.0 — 2019-10-16

• Added: Ability to show posts for a taxonomy source
• Fixed: Flickering of editor width and modals
• Fixed: «Current» term expansion was not working sometimes
• Fixed: PHP 5.4 compatibility
• Changed: ul and li were replaced by div to avoid bad themes styles

1.6.2 — 2019-10-09

• Fixed: Removed basic browser’s margin and padding for UL element
• Fixed: Sometimes the display of the admin page was incorrect
• Fixed: Sometimes the «Initial expansion» settings did not work

1.6.1 — 2019-09-26

• Fixed: Custom styles did not worked for skins

1.6.0 — 2019-09-25

• Added: Freemius
• Fixed: Sometimes menu items were not displayed as current
• Fixed: Sometimes preview was crushing with invalid «Initial expansion» setting

1.5.1 — 2019-09-17

• Changed: «Hide empty terms» is now false by default
• Fixed: Not smooth expanding for submenus with multiline items texts
• Fixed: Appearance of skin #14 without image

1.5.0 — 2019-09-12

• Added: Ability to set images for all taxonomies and custom WordPress menus
• Added: New setting «Placeholder» for images

1.4.0 — 2019-09-05

• Added: Ability to display posts count for terms
• Added: Ability to set custom «class name» for Toogle Icon to use any other icons pack included in your theme
• Added: Containers of each menu now have unique IDs
• Added: New design for modal window of menus creation
• Fixed: Setting «Initial expansion — Disable» works better
• Fixed: Now some settings like «Animation», «Transition», «Image type / position» and some others are not «Appearance settings» and it won\’t be imported with skins

1.3.0 — 2019-07-24

• Added: Settings «Initial Expansion» (allows you to expand certain terms when the page loads)
• Fixed: Menu collapsing bug

1.2.0 — 2019-07-18

• Added: Setting «border-radius» for all menu elements
• Fixed: Sub-menus are now expanded immediately after the page loads
• Fixed: Errors with verifying license
• Fixed: Added check for the widget\’s empty title
• Improvements inside the «Skins» tab
• Editor now loads a little faster
• Other minor improvements

1.1.0 — 2019-07-10

• Added: Now you can press CTRL+SHIFT+S or CTRL+ALT+S to save currently editing menu
• Added: Setting for changing editor\’s preview type (hide or show underlay background)
• Added: Settings «width» and «max-width» for Container
• Added: Inputs of type «Size» now can be set with percentage value
• Added: Better design for inputs in admin editor (focus added)
• Added: Better design editor tabs
• Fixed: Removed unnecessary div container for widget

1.0.0 — 2019-07-04

CS-Cart модуль «Меню Аккордеон» от Alt-team

Компактное, вертикальное меню категорий в стиле Аккордеон — это полезный элемент в навигации по Вашему онлайн магазину. CS-Cart модуль «Меню Аккордеон» поможет Вашим посетителям легко и просто ориентироваться в многочисленных вкладках Вашего меню.

Особенности:

• Отображает Меню Категорий на странице онлайн магазина в виде раскрывающегося списка;
• Позволяет отображать подкатегории любого уровня вложенности;
• Совместим с адаптивными темами;
• Возможность разместить Аккордео Меню на любую страницу онлайн магазина.

Совместимость:

Модуль корректно работает в браузерах — Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera (последние версии).

Модуль совместим с CS-Cart 4.х.х. и адаптивным дизайном.

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

Для корректной работы CS-Cart модуля «Меню аккордеон», Вам необходимо создать новый блок для вертикального меню,после установки модуля.

1. В административной панели онлайн магазина откройте  Дизайн>Макеты.

2. Выберите страницу, где должен размещаться новый блок.

3. Создайте новый вертикальный блок и назовите его.

4. В поле Шаблон выберите Вертикальный выпадающий список.

5. Сохраните.

Установка

1. Скачайте архив с модулем Accordion Menu.

2. Распакуйте архив и загрузите файлы на свой сервер в корневую папку с установленной CS-Cart.

3. Залогиньтесь в администраторскую часть магазина, перейдите в “Модули” → “Управление модулями”.

4. Найдите модуль Alt-team:Accordion Menu в списке модулей и нажмите на ссылку “Установить”напротив названия.

5. Все, модуль установлен.

После устновки, выполните ряд настроек, описанных в табе Документация.

Попробуйте демо

Модуль Меню категорий аккордеон в OpenCart

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

Возможности и характеристики

• Возможность создать меню категорий с аккордеоном в боковой панели.

• Возможность установить цвет меню.

• Очень простой в использовании.

• Не перезаписывает файлы.

• Поддержка Русского и Английского языков.

Инструкция по установке:

1. Перейдите в раздел “Установка дополнений/расширений” и нажмите кнопку “Загрузить”; 

2. Выберите скачанный файл, и дождитесь появления текста “Дополнение успешно установлено”;

3. Затем перейдите в “Менеджер дополнений”, и нажмите кнопку “Обновить”.

После этих действий модуль будет установлен, и вы сможете приступить к его использованию!

Аккордеонное меню — Максимальное мегаменю

Демо

Проверьте меню слева на этой странице, чтобы увидеть живую демонстрацию меню Accordion.

Совет. Если вы пытаетесь добавить аккордеонное меню к боковой панели или содержимому страницы, вы можете использовать метод виджета или шорткода, чтобы добавить новое меню на свой сайт.

Аккордеонные меню построены точно так же, как и стандартное меню WordPress.

Чтобы переключить ваше меню с горизонтального (по умолчанию) на вертикальное аккордеонное меню, выберите «Аккордеон» в раскрывающемся списке «Ориентация» в настройках Max Mega Menu:

Меню аккордеона будет соответствовать порядку и иерархии меню.

Как и любое другое меню, созданное с помощью Max Mega Menu, у вас есть полный контроль над стилем меню с помощью редактора тем.

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

Поведение аккордеона

Новая опция — Accordion Behavior — появится, когда ориентация установлена ​​на «Accordion». Есть два варианта:

• Оставить активными подменю открытыми — это автоматически открывает подменю, когда вы находитесь на подстранице.Это настройка, которую мы используем для демонстрации слева (обратите внимание, как подменю «Pro Features» автоматически раскрывается, потому что мы находимся на дополнительной странице).
• Всегда закрывать подменю — все подменю закрываются при загрузке страницы. Пользователи должны щелкнуть или навести указатель мыши на заголовок, чтобы открыть подменю.

Рекомендуемые настройки

Чтобы избежать ужасного дизайна меню, Событие должно быть установлено на « Click » для меню гармошки.

Двухуровневые меню соответствуют настройке «Поведение при втором щелчке », определенной в Мега Мега> Общие настройки .Вы можете выбрать «Первый щелчок открывает подменю, второй щелчок закрывает подменю» или «Первый щелчок открывает подменю, второй щелчок — переход по ссылке». Независимо от выбранной опции, индикатор со стрелкой всегда будет переключать подменю.

«Аккордеон» также учитывает настройку « Mobile Menu Behavior », определенную в Mega Mega> Общие настройки . В меню документации слева у нас установлено значение «Стандартное — Открытые меню остаются открытыми, пока не будут закрыты пользователем». Также можно установить его на «Аккордеон — открывать меню автоматически закрывается при открытии другого».

Нравится то, что вы видите? Эта функция доступна в Max Mega Menu Pro

10 лучших компонентов аккордеонного меню в jQuery / JavaScript / CSS (обновление 2021)

Компонент меню «аккордеон» позволяет посетителю разворачивать / сворачивать элементы подменю по вертикали, как с помощью гармошки.

В этом посте вы найдете 10 лучших компонентов аккордеонного меню jQuery / JavaScript / CSS для элегантной организации и отображения вашей большой многоуровневой системы навигации.

Первоначально опубликовано 19 мая 2019 г., обновлено 11 февраля 2021 г.

Содержание:

• Плагины аккордеонного меню jQuery
• Библиотеки аккордеонного меню Vanilla JS
• Аккордеонное меню на чистом CSS

Плагин jQuery Accordion Menu для Bootstrap 4/3 — metisMenu

metisMenu — это простой плагин меню jQuery для Bootstrap 3, который поможет вам создать сворачиваемое меню с анимированными эффектами аккордеона и поддержкой автоматического сворачивания.

[Демо] [Скачать]

Вертикальное двухкоординатное меню в стиле начальной загрузки с jQuery и CSS3 — bs_leftnavi

Плагин jQuery для создания вертикального навигационного меню в стиле Bootstrap, которое позволяет расширять / сворачивать категории меню с плавными эффектами скольжения.

[Демо] [Скачать]

Легкий, удобный для SEO плагин переключения содержимого jQuery для создания иерархического дерева или многоуровневого аккордеонного меню из вложенных неупорядоченных списков HTML.

[Демо] [Скачать]

Выпадающее меню Super Smooth Accordion с использованием jQuery и CSS3

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

[Демо] [Скачать]

Плагин адаптивного и многоуровневого двухуровневого меню

Простой плагин jQuery для создания многоуровневого и полностью адаптивного аккордеонного меню (раскрывающийся список) из любых вложенных элементов Html.

[Демо] [Скачать]

Библиотеки аккордеонного меню Vanilla JS:

SEO-оптимизированное двухкомпонентное меню на ванильном JavaScript

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

[Демо] [Скачать]

Гладкое вертикальное меню-гармошка с JavaScript и CSS3

Гладкое вертикальное аккордеонное меню, созданное с помощью JavaScript, CSS, переходов CSS3, Font Awesome и вложенных списков HTML.

[Демо] [Скачать]

Аккордеонные меню на чистом CSS:

Многоуровневое двухуровневое меню с простым HTML и CSS

Простой подход Html5 / CSS3 к созданию многоуровневого скользящего аккордеонного меню из вложенных списков HTML. Он использует хаки с флажками и метками для переключения иерархических меню и несколько свойств CSS3 для плавных эффектов скольжения.

[Демо] [Скачать]

Простое двухкомпонентное меню с переходами CSS3

Простое навигационное меню «аккордеон», созданное только с использованием CSS и анимированное переходами CSS3.

[Демо] [Скачать]

Оптимизированное для SEO меню «Аккордеон» на чистом CSS / CSS3

Гладкое, семантическое, оптимизированное для SEO аккордеонное меню (раскрывающееся меню), созданное с помощью неупорядоченного списка HTML и CSS / CSS3.

[Демо] [Скачать]

Вывод:

Хотите больше плагинов jQuery или библиотек JavaScript для создания потрясающих аккордеонных меню в Интернете и на мобильных устройствах? Ознакомьтесь с разделами jQuery Gauge и JavaScript / CSS Gauge.

См. Также:

• Лучшие аккордеонные компоненты на чистом JavaScript и CSS
• Лучшие слайдеры-гармошки на JavaScript или чистом CSS
• Лучшие гибкие раскрывающиеся меню
• Лучшие плагины jQuery для адаптивного меню
• Лучшие плагины для кругового меню
• Лучшие системы мегаменю
• Лучшие мобильные меню вне холста
• Лучшая плавающая кнопка действия (всплывающее меню) Плагины

• Назад: 10 лучших подключаемых модулей для датчиков в jQuery и чистом JavaScript / CSS
• Далее: 10 лучших плагинов социального обмена на JavaScript / jQuery для увеличения трафика

Свернуть · Bootstrap

Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Можно использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется data-toggle = "collapse" .

Ссылка на href Кнопка с целью данных

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  

  
    Ссылка на href
  
  
    Кнопка с целью данных
  


  

    Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
  
  

Несколько целей

A или может отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора JQuery в его атрибуте href или data-target . Множественные или могут показывать и скрывать элемент, если каждый из них ссылается на свой href или data-target атрибут

Переключить первый элемент Переключить второй элемент Переключить оба элемента

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  

   Переключить первый элемент 
  

Переключить второй элемент Переключить оба элемента

Пример аккордеона

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

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.

  

  

    

      

        

          Элемент складной группы №1
        
      
    

    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
    
  
  

    

      

        

          Элемент складной группы №2
        
      
    
    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
    
  
  

    

      

        

          Элемент складной группы №3
        
      
    
    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
    
  
  

Доступность

Не забудьте добавить aria-extended к элементу управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-extended = "false" . Если вы настроили открывать складной элемент по умолчанию с помощью класса show , установите вместо этого aria-extended = "true" в элементе управления.Плагин автоматически переключает этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же элементу collapsbile). Если элемент HTML элемента управления не является кнопкой (например, или

  $ ('. Collapse'). Collapse ()  

  $ ('# myCollapsible'). Collapse ({
  toggle: false
})  

  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь…
})