Аккордеон меню на css: Аккордеон меню | WebReference

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

Вы здесь:
Главная — CSS — CSS3 — Вертикальный аккордеон на чистом CSS

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

Как правило, аккордеон располагается вертикально, не бывает горизонтального аккордеона. Горизонтальное отображение похожей конструкции, называется табами. При первом клике по секции с заголовком откроется панель с текстом, а при втором клике — закроется обратно.

Идея работы аккордеона на CSS, основана на скрытых чекбоксах, используя тип поля для ввода type=»checkbox» и атрибут checked. Весь блок аккордеона построен в виде вертикальной одно колоночной таблицы. Нет, мы не используем табличных тегов. Речь идет о воображаемой таблице, на свойствах display: table и diplay: table-cell. Внутри блока div размещены: label с элементами форм input, типа checkbox.

Все секции аккордеона закрыты (checkbox)

  

<div>

  <label>

    <input type='checkbox' name='checkbox-accordion'>

    <div>Видимый заголовок #1</div>

    <div>

      <h6>Скрытый заголовок #1</h6>

      <p>Скрытый текст (контент) аккордеона на чекбоксах #1.</p>

    </div>

  </label>

  <label>

    <input type='checkbox' name='checkbox-accordion'>

    <div>Видимый заголовок #2</div>

    <div>

      <h6>Скрытый заголовок #2</h6>

      <p>Скрытый текст (контент) аккордеона на чекбоксах #2.</p>

    </div>

  </label>

  <label>

    <input type='checkbox' name='checkbox-accordion'>

    <div>Видимый заголовок #3</div>

    <div>

      <h6>Скрытый заголовок #3</h6>

      <p>Скрытый текст (контент) аккордеона на чекбоксах #3.</p>

    </div>

  </label>

</div>


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


.accordion input {

    display: none;

    ...

}


Так же прячем и блоки с контентом.


.accordion__content {

    display: none;

}


Что приведет в действие механизм аккордеона? Кликая по секции, пользователь невольно установит атрибут checked, который сделает переключатель активным. Зададим активному инпуту display: block и появится скрытый текст.


.accordion input:checked ~ .accordion__content {

    display: block;

}


Одна секция аккордеона раскрыта (radio)

Как сделать раскрытой только одну секцию аккордеона? Задать всем инпутам type=’radio’ и только первому добавить checked=»checked». Таким образом, первая секция будет активной и сразу покажет контент. Остальные секции раскроются только по клику пользователя. Переключатель radio, держит активным только один элемент, в отличии от чекбоксов.


<div>

  <label>

    <input type='radio' name='radio-accordion' checked="checked">

    <div>Видимый заголовок #1</div>

    <div>

      <h6>Видимый заголовок #1</h6>

      <p>Видимый текст (контент) аккордеона на радио #1.</p>

      </div>

  </label>

  <label>

    <input type='radio' name='radio-accordion'>

    <div>Видимый заголовок #2</div>

    <div>

      <h6>Скрытый заголовок #2</h6>

      <p>Скрытый текст (контент) аккордеона на радио #2.</p>

    </div>

  </label>

  <label>

    <input type='radio' name='radio-accordion'>

    <div>Видимый заголовок #3</div>

    <div>

      <h6>Скрытый заголовок #3</h6>

      <p>Скрытый текст (контент) аккордеона на радио #3.</p>

    </div>

  </label>

</div>


• 
  Создано 17.01.2020 10:24:29

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. 
   Кнопка:
   
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. 
   Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Содержимое в виде аккордеона на 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/

Создаем на сайте меню аккордеон средствами 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)

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

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

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

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

Средний

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

Бесплатные «аккордеон»-меню с помощью HTML5 и CSS3

HTML — популярный язык, используемый для строительства веб-страниц и другой информации, которая может быть показана в web-браузере. HTML 5 является последним достижением. С другой стороны, CSS — язык, который используется для того, чтобы описать семантику представления на веб-сайтах, это язык разметки стилей; HTML и XML были наиболее используемыми языками. CSS разъединяет содержание самого документа и его представления, включая элементы расположения, цвета и шрифтов. CSS также, как и HTML, появился с различными версиями, и CSS3 является текущей. «Аккордеон»-меню на HTML 5 и CSS 3 используется, чтобы построить дизайн веб-сайтов с хорошей разметкой, комбинацией цвета и идеальной типографией. Аккордеон — многоуровневое меню с фиксированной высотой и шириной. Оно может быть использовано для создания отсека подпунктов главного меню. Вашему вниманию представляются бесплатные «аккордеон»-меню на HTML5 и CSS3, которые могут быть использованы для веб-дизайна и разработки сайтов.

Accordion using only CSS

Responsive: Tabs to accordion

CSS3 Multiple Accordion Menu

Accessible Accordion & Toggle

RWD Accordion

jQuery Accordion custom navigation 

CSS3-only accordion

Simple Accordion

Simple Accordion FAQ List

Hover activated accordian with default state

Accordion slider

Accordion

Simple accordion for news

CSS Based Animated Accordion

Fading List

Content Accordion in Pure CSS3

Accordion without Javascript

CSS3 Accordion

Vertical Accordion effect with jQuery

Multi level slide accordion menu with jQuery

Accordion with CSS3

Flexible Slide-to-top Accordion

Vertical Sliding Accordion with jQuery

Elegant Accordion with jQuery and CSS3

Accordion Menu

Перевод — Дежурка.

Автор — Unaiz.

Возможно, вам будет интересно: Прозрачные ui-элементы бесплатно. 

Меню аккордеон CSS, современный дизайн + 3 варианта!

Сегодня мы будем создавать меню аккордеон css, с помощью псевдо-класса :checked. Используя скрытые input и label, мы создадим меню в виде аккордеона, которое будет открываться и закрываться. Также советую посмотреть статью “Современное CSS3 меню + мобильная версия!”.

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

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

Итак, давайте начинать!

HTML разметка

В исходниках присутствует 3 варианта меню, но мы рассмотрим те, который использует чекбоксы, где содержание одного из разделов открывается по умолчанию. Все они будут обернуты в обертку с классом ac-container. Для каждого элемента, мы имеем чекбокс, label и текст, который и является содержанием раздела:

Обратите внимание, что мы должны дать каждому элементу input ID, который мы будем далее использовать. Нам нужно это для того, чтобы провести проверку чекбокса при нажатии на label.

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

Давайте посмотрим на стили CSS.

Стилизация CSS

Давайте определим ширину для меню аккордеона и отцентрируем его:

Далее, мы сделаем элементы label в виде кнопок, давая им некоторые стили градиента. Несколько теней, тонкие границы и эффекты. Мы также установить z-index до 20, чтобы убедиться, что он будет наверху:

При наведении, мы сделаем этикетки label белого цвета:

Когда мы нажимаем label, чекбокс будет активирован и когда это произойдет, мы хотим, чтобы для label были применены следующие стили:

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

При активации, мы хотим чтобы показывалась стрелка вверх, поэтому:

И так как мы не хотим показать элементы input, мы спрячем их:

Контент блоков будет иметь начальную высоту 0px. Мы добавим переход высоты и некоторую тени. Переход, который мы добавляем здесь, будет действовать при закрытии блока. Определим еще один переход для выбранного элемента. Таким образом, можно контролировать в основном два поведения. Также, мы сделаем закрытие блока немного быстрее, чем открытие.

Добавим некоторые стили для контента внутри блоков:

Теперь определим три класса разной высоты. Эта высота будет в виде анимации:

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

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

Заключение

Итак, мы имеем следующее:

Вот и финиш! Надеюсь, вам понравился и был полезен этот урок!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко

Аккордеон меню на jQuery | Frontips.ru

Напишем простое и универсальное аккордеон меню на jQuery

extension

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.

Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.

fingerprint

Rerum necessitatibus

Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi

Этот пример на Codepen

Создаём HTML основу

Пункты меню располагаются в родительском блоке <div></div>

Каждый пункт меню <div></div> имеет заголовок <div></div> и область контента <div></div>

<section>
  <div> <!-- родительский блок -->
    <div> <!-- блок пункта меню -->
      <div> <!-- блок заголовка -->
        <div><span>extension</span></div>
        <div>Lorem ipsum dolor sit amet.</div>
      </div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.</div> <!-- блок контента -->
    </div>
    <div>
      <div>
        <div><span>eco</span></div>
        <div>Dolor sit amet.</div>
      </div>
      <div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.</div>
    </div>
    <div>
      <div>
        <div><span>fingerprint</span></div>
        <div>Rerum necessitatibus</div>
      </div>
      <div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi</div>
    </div>
  </div>
</section>

Опишем стили CSS

При добавлении активного класса .about-item_active блоку .about-item зададим стили для его элементов .about-item__head и .about-item__icon

.about {
  padding: 60px 0;
}
.about__item:not(:last-child) {
  margin-bottom: 15px;
}
.about-item__head {
  background: #283845;
  padding: 15px 30px;
  color: #fff;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* отключаем выделение текста при нажатии на блок заголовка */
  display: flex;
  align-items: center;
  transition: 0.3s ease;
}
.about-item__head:hover {
  background: #24323e;
}
.about-item__title {
  font-weight: 700;
}
.about-item__icon {
  margin-right: 15px;
  line-height: 1;
  transition: 0.3s ease;
}
.about-item__body {
  padding: 30px;
  font-size: 16px;
  background: #fff;
  border-radius: 8px;
  color: #283845;
  display: none;
  margin-top: 10px;
}
.about-item_active .about-item__head {
  background: #22303b; /* в активном состоянии блока .about__item фон заголовка .about-item__head меняет цвет */
}
.about-item_active .about-item__icon {
  color: #8cb369; /* в активном состоянии блока .about__item иконка .about-item__icon меняет цвет */
}

Пишем jQuery код

jQuery код с комментариями

$(document).ready(function(){ // DOM готов для взаимодействия с ним

  function accordion(parentSelector, itemSelector, itemActiveClass, headSelector, contentSelector, duration) { // объявляем функцию и принимаем параметры

    let locked = false // объявляем переменную для блокировки клика при активной анимации

    $(parentSelector).click(function(e){ // при клике на родительский блок, селектор которого передаем первым параметром (parentSelector)

      const target = $(e.target) // записываем в константу элемент, где был клик
      const item = target.closest(itemSelector) // ищем ближайший родительский блок, где был клик, по селектору, который передаем вторым параметром (itemSelector)
      const itemHead = item.find(headSelector) // ищем заголовок (4й параметр) в блоке, где был клик
      const itemContent = item.find(contentSelector) // ищем блок контента в блоке (5й параметр), где был клик

      const siblings = item.siblings() // ищем соседние блоки, расположенные на том же уровне, что и блок, где был клик
      const siblingsContent = siblings.find(contentSelector) // ищем блок контента(5й параметр) у соседских блоков

      if (!target.closest(headSelector).length) return // если клик был не на блоке заголовка, прерываем функцию, то есть ничего не делаем

      if (locked) return // если клик заблокирован, тоже прерываем функцию

      if (!item.hasClass(itemActiveClass)) { // если блок, где был клик, не имеет активного класса
        locked = true // блокируем клик
        siblings.removeClass(itemActiveClass) // удаляем у соседских блоков активный класс
        siblingsContent.slideUp(duration) // сворачиваем блок контента у соседских блоков (6 параметр - duration - продолжительсность анимации)
        item.addClass(itemActiveClass) // добавляем активный класс блоку, где был клик
        itemContent.slideDown(duration, function(){ // разворачиваем блок контента у блока, где был клик, после окончания анимации запускаем другую функцию, чтобы снять блокировку клика
          locked = false
        })
      } else { // если блок, где был клик, имеет активный класс
        locked = true // блокируем клик
        item.removeClass(itemActiveClass) // удаляем активный класс блоку, где был клик
        itemContent.slideUp(duration, function(){ // сворачиваем блок контента у блока, где был клик, после окончания анимации запускаем другую функцию, чтобы снять блокировку клика
          locked = false
        })
      }
    })
  }

  accordion('.about-items', '.about-item', 'about-item_active', '.about-item__head', '.about-item__body', 300) // запускаем функцию с параметрами

  accordion('.briefly-cards', '.briefly-card', 'briefly-card_active', '.briefly-card__head', '.briefly-card__text', 600) // если будут еще похожие меню, но с другими названиями классов, то запускаем эту же самую функцию, передавая ей просто другие параметры

})

Передаваемые параметры

1. parentSelector — селектор родительского блока — '.about-items'
2. itemSelector — селектор блока пункта меню — '.about-item'
3. itemActiveClass — активный класс блока пункта меню — 'about-item_active'
4. headSelector — селектор блока заголовка — '.about-item__head'
5. contentSelector — селектор блока контента — '.about-item__body'
6. duration — продолжительность анимации разворачивания/сворачивания блока контента — 300

Описание некоторых нюансов

1. Блокировка клика нужна для того, чтобы при многократном клике на заголовок анимация не запускалась несколько раз. Как только анимация запускается, блокируем клик, как только анимация заканчивается, снимаем блокировку
2. Параметры передаем в том порядке в котором они записаны. В данном случае параметры передаем строками в кавычках. Если это селектор, не забываем ставить точку ('.about-item'). Если это название класса, указываем без точки ('about-item_active')
3. Последним параметром передаем число без кавычек — продолжительность анимации разворачивания/сворачивания блока контента

Полезные ссылки

Обработчик готовности дерева DOM — .ready()

Объект event — function(e){}

Переменные и константы — let и const

Ближайший подходящий предок — .closest()

Поиск элементов внутри выбранных — .find()

Поиск элементов лежащих на одном уровне — .siblings()

Добавление класса — .addClass()

Удаление класса — .removeClass()

Разворачивание и сворачивание элементов — .slideDown() .slideUp()

css раскрывающееся вертикальное меню — ComputerMaker.info

Автор admin На чтение 5 мин.

Вертикальное плавно раскрывающееся меню аккордеон для сайта с подпунктами основного раздела на HTML5 + CSS3 + JS

Вертикальное раскрывающееся меню HTML + CSS + JS

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

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

Все подпункты меню свернуты Все подпункты меню развернуты Второй подпункт меню развернут. Нумерация идентификаторов начинается с 0 Два подпункта меню развернуты

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

Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.

Навигация по странице:

В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.

У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс ) на базе которого можно построить практически любое вертикальное выпадающее меню.

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

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

Пара слов о преимуществе выпадающих меню:

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

Вертикальное выпадающее меню вправо

к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.

Вертикальное выпадающее меню CSS

к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

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

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Вертикальное выпадающее меню влево на CSS

к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

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

, который в свою очередь занимает всю ширину его блока-контейнера.

Элементы списка
. могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.

1. Вертикальное меню с заголовком

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

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

3. Вертикальное меню с эффектами при наведении

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

4. Вертикальное меню с иконками

Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.

5. Вертикальное меню с картинками

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

21+ лучших примеров CSS-аккордеонных меню бесплатно 2020 — Блог Avada

21+ лучших примеров CSS-аккордеонных меню из сотен обзоров CSS-аккордеонных меню на рынке (Codepen.io) по данным Avada Commerce Ranking, в котором используются оценки Avada Commerce, рейтинговые обзоры, результаты поиска, социальные показатели. Приведенные ниже обзоры были отобраны вручную экспертами Avada Commerce. Если ваше CSS Accordion Menus не включено в список, не стесняйтесь обращаться к нам.Лучшая коллекция CSS Accordion Menus css будет оценена и завершится в августе 2020 года. Вы также можете найти бесплатные примеры CSS Accordion Menus или альтернативы CSS Accordion Menus.

Вот 21+ лучших примеров CSS-аккордеонных меню

Основные характеристики

• — Создано 5 мая 2019 г.
• — Создано Asht
• — Создано с использованием технологии HTML / CSS

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

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

Это красивое меню аккордеона может вызвать у зрителей неповторимые ощущения, так что не тратьте время зря. Установите его сейчас.

Возьми
Демо

Основные характеристики

• — Создано 13 января 2016 г.
• — Создано sayato
• — Создано с использованием технологии HTML / CSS / JS

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

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

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

Возьми
Демо

Основные характеристики

• — Создано 2 октября 2015 г.
• — Создано Якобом Краевским
• — Создано с использованием технологии HTML / CSS / JS

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

Разработанный Якобом Краевски, этот пример меню-гармошки станет поистине идеальным выбором для любого редактора сайта. Шаблон меню, отображаемый на голубом фоне, выделяется в центре. Простые пункты меню, относящиеся к магазину одежды или еды, сделают зрителей более увлекательными.

Произведите впечатление на ваших посетителей и побудите их взаимодействовать с вашим веб-сайтом, попробовав это меню.

Возьми
Демо

Основные характеристики

• — Создано 25 апреля 2019 г.
• — Создано Антоном
• — Создано с использованием технологии HTML / CSS / JS

Если вы хотите сделать свой сайт более креативным и впечатляющим, необходимо добавить меню.Это аккордеонное меню будет невероятно совершенным и доставит вам удовольствие.

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

Установите это замечательное меню, чтобы воспользоваться его огромными преимуществами.

Возьми
Демо

Вертикальное меню аккордеона с использованием jQuery и CSS3 Дэвид Бесерра

Основные характеристики

• — Создано 13 апреля 2013 г.
• — Создано Дэвидом Бесерра
• — Создано с использованием технологии HTML / CSS / JS

Это вертикальное аккордеонное меню с использованием jQuery и CSS3 от Дэвида Бесерра — это то, что вы должны принять во внимание, добавляя на свой сайт, чтобы улучшить его внешний вид.

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

Загрузив и установив Вертикальное аккордеонное меню с использованием jQuery и CSS3 Дэвида Бесерра, вы получите больше преимуществ, чем ваши конкуренты.

Возьми
Демо

Основные характеристики

• — Создано 16 мая 2019 г.
• — Создано Divinector
• — Создано с использованием технологии HTML / CSS

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

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

Не сомневайтесь, скачайте и установите это уникальное меню прямо сейчас, и вы получите конкурентное преимущество.

Возьми
Демо

Основные характеристики

• — Создано 29 августа 2013 г.
• — Создано Педро Наук
• — Создано с использованием технологии HTML / CSS

Если вы профессиональный владелец сайта, вы не должны пропустить это раскрывающееся меню «Только CSS3», чтобы иметь уникальный и творческий фон.

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

Не сомневайтесь, скачайте и установите это меню на свой сайт прямо сейчас.

Возьми
Демо

Основные характеристики

• — Создано 27 ноября 2017 г.
• — Создано Adam
• — Создано с использованием технологии HTML / CSS

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

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

Не забудьте скачать и установить это уникальное меню на свой сайт прямо сейчас.

Возьми
Демо

Основные характеристики

• — Создано 15 апреля 2015 г.
• — Создано Иваном Ю
• — Создано с использованием технологии HTML / CSS / JS

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

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

Не сомневайтесь, это хорошо продуманное меню на вашем сайте прямо сейчас.

Возьми
Демо

Основные характеристики

• — Создано 21 января 2019 г.
• — Создано PARTH PATEL
• — Создано с использованием технологии HTML / CSS

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

Разработанный PARTH PATEL, этот пример меню аккордеона также является простым, но профессиональным выбором. Черный шаблон меню с оранжевым шрифтом привлечет внимание желающих. Более того, это меню — лучший инструмент для проектирования и настройки веб-разработки с множеством примеров из Интернета.

Скачайте и установите это меню аккордеона прямо сейчас, не задумываясь.

Возьми
Демо

Основные характеристики

• — Создано 11 апреля 2019 г.
• — Создано Rs Sabbir Ahmed
• — Создано с использованием технологии HTML / CSS

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

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

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

Возьми
Демо

Основные характеристики

• — Создано 17 сентября 2013 г.
• — Создано Кэти ДеКора
• — Создано с использованием технологии HTML / CSS

Если вам нужно значительно улучшить внешний вид внешнего интерфейса вашего сайта, эта Accordion Nav от Кэти ДеКора может стать для вас лучшим выбором.

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

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

Возьми
Демо

Основные характеристики

• — Создано 22 января 2019 г.
• — Создано Прабхакаром Бансалом
• — Создано с использованием технологии HTML / CSS

Чтобы сделать внешний вид вашего сайта еще более привлекательным, вам следует принять во внимание аккордеонное меню Прабхакара Бансала.

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

В целом, установка — идеальный выбор, если вы хотите улучшить внешний вид внешнего интерфейса вашего сайта.

Возьми
Демо

Основные характеристики

• — Создано 2 мая 2016 г.
• — Создано Мухаммедом Юсри Бадром
• — Создано с использованием технологии HTML / CSS / JS

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

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

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

Возьми
Демо

Основные характеристики

• — Создано 23 августа 2014 г.
• — Создано Майклом Вильгельмсеном
• — Создано с использованием технологии HTML / CSS / JS

Это двухкомпонентное меню — продукт Майкла Вильгельмсена, который помогает вам улучшить внешний вид внешнего интерфейса вашего сайта.

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

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

Возьми
Демо

Основные характеристики

• — Создано 6 декабря 2018 г.
• — Создано CMDW
• — Создано с использованием технологии HTML / CSS

Если вы ищете простой, но эффективный инструмент для улучшения внешнего вида вашего сайта, этот пример CSS Accordion Menu — один из идеальных вариантов для вас.

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

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

Возьми
Демо

Основные характеристики

• — Создано 19 апреля 2015 г.
• — Создано Джейми Коултером
• — Создано с использованием технологии HTML / CSS / JS

Если вы ожидаете чего-то, что сделает внешний вид вашего веб-сайта более особенным, тогда это Swanky Pure CSS Drop Down Menu V2.0 для тебя. С этим меню аккордеона вы найдете его очень полезным и мощным.

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

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

Возьми
Демо

Основные характеристики

• — Создано 31 января 2018 г.
• — Создано Eriksen
• — Создано с использованием технологии HTML / CSS

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

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

В общем, не стесняйтесь попробовать это меню аккордеона, чтобы убедиться, насколько оно восхитительно.

Возьми
Демо

Основные характеристики

• — Создано 11 апреля 2019 г.
• — Создано Ахмадом Эмраном
• — Создано с использованием технологии HTML / CSS

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

Чтобы быть более конкретным, этот дизайн меню аккордеона является одним из уникальных и красочных примеров CSS. Его доминирующий цветовой тон — светло-желтый, который выделяет розовое меню в центре. Меню содержит четыре параметра для пользователей, включая учетную запись, сведения, поддержку и выход из системы. Когда пользователи нажимают на каждый заголовок, он показывает много элементов, из которых они могут выбрать.

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

Возьми
Демо

Основные характеристики

• — Создано 9 сентября 2017 г.
• — Создано mori
• — Создано с использованием технологии HTML / CSS

Как следует из названия, этот пример меню «гармошка» — одно из лучших решений для владельцев сайтов, позволяющих сделать внешний вид сайта более свежим и ярким.

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

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

Возьми
Демо

Основные характеристики

• — Создано 13 августа 2018 г.
• — Создано Ахмадом Эмраном
• — Создано с использованием технологии HTML / CSS / JS

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

Являясь одним из лучших дизайнов Ахмада Эмрана, этот образец Accordion Menu представляет собой профессиональное и креативное меню. На темно-синем фоне все еще выделяется такое же цветовое меню посередине. Это меню дает пользователям возможность выбирать из четырех различных списков. Когда они нажимают на каждый список, он отображает больше вариантов для выбора.

Поощрите своих новичков посещать ваш веб-сайт, установив это аккордеонное меню.

Возьми
Демо

Как Avada Commerce ранжирует список примеров CSS-аккордеонных меню

Эти 21 приведенный выше пример двухкомпонентного меню CSS для CSS ранжируются на основе следующих критериев:

• Рейтинги в примерах CSS
• Рейтинг CSS в поисковых системах
• Цены и характеристики
• Репутация css-провайдера
• Метрики социальных сетей, такие как Facebook, Twitter и Google +
• Обзоры и оценки Avada Commerce

21+ лучших примеров меню «аккордеон» CSS

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

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

Не видите свой css в списке? Хотите добавить больше контента в этот обзор? Свяжитесь с нами

Найдите больше библиотек CSS, JS, посетите наши коллекции CSS, JS!

4 способа создания великолепных аккордеонов только на CSS

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

Большинство аккордеонов полагаются на JavaScript, в основном на jQuery , но поскольку использование передовых методов CSS3 стало широко распространенным, мы также можем найти хорошие примеры, которые используют только HTML и CSS , что делает их доступными в средах с отключенным JavaScript. .

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

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

1. Метод радиокнопки

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

В этом методе может быть открыта только одна вкладка одновременно. Логика HTML выглядит что-то
как это:

 Заголовок вкладки 1 


 Заголовок содержимого (не используйте здесь тег h2) 
 Некоторое содержание.... 
 p>







 

Вам нужно добавить отдельную пару радио-меток для каждой вкладки в аккордеоне. Сам по себе HTML не даст желаемого поведения, вам также нужно добавить соответствующие правила CSS, давайте посмотрим, как вы можете этого добиться.

Вертикальные выступы фиксированной высоты

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

Последний держит ручку, отмеченную зеленым знаком +, которая открывает вкладки. На закрытых вкладках также есть ручка, отмеченная зеленым знаком «-». В CSS закрытые вкладки выбираются с помощью селектора элемент + элемент.

Также необходимо задать фиксированную высоту содержимому открытой вкладки. Для этого выберите тело открытой вкладки (отмеченное классом tab-content в HTML выше) с помощью селектора CSS element1 ~ element2.

Основная логика CSS здесь следующая:

input [type = radio] {
дисплей: нет;
}
метка {
положение: относительное;
дисплей: блок;
}
label: after {
содержание: «+»;
позиция: абсолютная;
справа: 1em;
}
ввод: проверено + метка: после {
содержание: "-";
}
ввод: проверено ~.tab-content {
высота: 150 пикселей;
}
 

Вы можете посмотреть полный CSS здесь, на Codepen. CSS изначально написан на Sass, но если вы нажмете кнопку «Просмотреть скомпилированный», вы увидите скомпилированный файл CSS.

ИЗОБРАЖЕНИЕ: Codepen by Jon Yablonski

Изображение аккордеона с радио-кнопками

В этом красивом изображении аккордеона используется тот же метод переключателя, но вместо меток разработчик здесь использовал HTML-тег figcaption для реализации поведения аккордеона.

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

ИЗОБРАЖЕНИЕ: Tympanus.net

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

2. Метод флажка

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

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

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

 Заголовок вкладки 1 


 Заголовок содержимого (не используйте здесь тег h2) 
 Некоторое содержание .... 
 p>







 

Флажок фиксированной высоты Аккордеон

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

ИЗОБРАЖЕНИЕ: Codepen by Jon Yablonski

Флажок высоты жидкости Accordion

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

Для этого вам нужно изменить фиксированную высоту содержимого вкладки на максимальную высоту , а использовать относительные единицы :

input: checked ~ .tab-content {
максимальная высота: 50em;
}
 

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

ИЗОБРАЖЕНИЕ: Codepen Джона Яблонски

3. Метод: target

: target — это один из псевдоселекторов CSS3. С его помощью вы можете привязать HTML-элемент к тегу привязки следующим образом:

<раздел>
 
  Название вкладки  
 Содержимое вкладки