Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Аккордеон меню на 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. Для так называемого «костыля» для нашего дедушки подойдет множество средств, все зависит от Вашего энтузиазма и фантазии. В указанном примере костыль не используется.

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

В каких браузерах работает?
9.0+ 1.0+ 10.5+ 4.0+ 3.0+ 4.0+ 4.0+

Подводя итог

Использование верстки меню нетипичными способами на основе 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 и текст, который и является содержанием раздела:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<section>

    <div>

        <input name=»accordion-1″ type=»checkbox» />

        <label for=»ac-1″>About us</label>

        <article>

            <p>Some content… </p>

        </article>

    </div>

    <div>

        <input name=»accordion-1″ type=»checkbox» checked />

        <label for=»ac-2″>How we work</label>

        <article>

            <p>Some content… </p>

        </article>

    </div>

    <div><!—…—></div>

</section>

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

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

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

Стилизация CSS

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

.ac-container{

    width: 400px;

    margin: 10px auto 30px auto;

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.ac-container label{

    font-family: ‘BebasNeueRegular’, ‘Arial Narrow’, Arial, sans-serif;

    padding: 5px 20px;

    position: relative;

    z-index: 20;

    display: block;

    height: 30px;

    cursor: pointer;

    color: #777;

    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

    line-height: 33px;

    font-size: 19px;

    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

    box-shadow:

        0px 0px 0px 1px rgba(155,155,155,0.3),

        1px 0px 0px 0px rgba(255,255,255,0.9) inset,

        0px 2px 2px rgba(0,0,0,0.1);

}

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

.ac-container label:hover{

    background: #fff;

}

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

.ac-container input:checked + label,

.ac-container input:checked + label:hover{

    background: #c6e1ec;

    color: #3d7489;

    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);

    box-shadow:

        0px 0px 0px 1px rgba(155,155,155,0.3),

        0px 2px 2px rgba(0,0,0,0.1);

}

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

.ac-container label:hover:after,

.ac-container input:checked + label:hover:after{

    content: »;

    position: absolute;

    width: 24px;

    height: 24px;

    right: 13px;

    top: 7px;

    background: transparent url(../images/arrow_down.png) no-repeat center center;  

}

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

.ac-container input:checked + label:hover:after{

    background-image: url(../images/arrow_up.png);

}

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

.ac-container input{

    display: none;

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.ac-container article{

    background: rgba(255, 255, 255, 0.5);

    margin-top: -1px;

    overflow: hidden;

    height: 0px;

    position: relative;

    z-index: 10;

    transition:

        height 0.3s ease-in-out,

        box-shadow 0.6s linear;

}

.ac-container input:checked ~ article{

    transition:

        height 0.5s ease-in-out,

        box-shadow 0.1s linear;

    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);

}

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

.ac-container article p{

    font-style: italic;

    color: #777;

    line-height: 23px;

    font-size: 14px;

    padding: 20px;

    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

}

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

.ac-container input:checked ~ article.ac-small{

    height: 140px;

}

.ac-container input:checked ~ article.ac-medium{

    height: 180px;

}

.ac-container input:checked ~ article.ac-large{

    height: 230px;

}

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

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

Заключение

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

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


Данный урок подготовлен для вас командой сайта 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 выглядит что-то
как это:

Заголовок содержимого (не используйте здесь тег 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 такая же, как и раньше, только в этом случае вам нужно использовать флажок для типа ввода.

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

Некоторое содержание ....

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

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

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

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

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

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

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

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

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

3. Метод: target

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

<раздел>

Название вкладки

Содержимое вкладки

Когда пользователь щелкает заголовок вкладки, весь раздел открывается благодаря псевдо-селектору : target , а URL-адрес также будет изменен на следующий формат: www.some-url.com/#tab-1 .

Стиль открытой вкладки можно изменить в CSS с помощью правила section: target {…} . У нас есть отличный учебник на hongkiat о том, как можно создавать красивые аккордеоны только для CSS с помощью метода : target как в вертикальной, так и в горизонтальной компоновке.

Главный недостаток метода : target заключается в том, что он изменяет URL-адрес, когда пользователь нажимает на вкладки . Это влияет на историю браузера, и кнопка «Назад» в браузере переводит пользователя не на предыдущую страницу, а в предыдущее состояние «гармошки».

4. Метод: hover

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

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

Следующие 3 аккордеона только для CSS были созданы с помощью метода: hover, щелкните ссылки под скриншотами, чтобы ознакомиться с кодом.

Горизонтальное изображение аккордеон

ИЗОБРАЖЕНИЕ: CodePen by vavik

Skewed Accordion

ИЗОБРАЖЕНИЕ: Codepen Джеральда Де Леона

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

ИЗОБРАЖЕНИЕ: Codepen от Кори

8 Методы и дизайн двухкомпонентного меню с открытым исходным кодом CSS

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

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

Горизонтальная гармошка

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

Но этот тип аккордеона может также работать как функция адаптации или как простое информационное окно на странице.

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

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

Радиоаккордеоны

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

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

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

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

CSS3 Аккордеонный слайдер

Эффектом наведения курсора на анимацию можно управлять с помощью псевдокласса CSS : hover . Это означает, что вы можете контролировать большинство действий пользователя при наведении курсора только с помощью CSS.

В этом аккордеоне на чистом CSS3 вы найдете множество действительно простых эффектов и пользовательских функций анимации. Эта вещь великолепна и одна из немногих простых в установке аккордеонов.

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

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

Аккордеон только для CSS

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

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

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

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

Многооткрытый аккордеон

Если вам нужна полная противоположность аккордеона «по одному», то вам может понравиться этот дизайн, созданный Фрэнком Али.

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

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

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

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

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

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

Также дизайн довольно прост, и есть полный контроль над цветами с небольшой настройкой CSS.

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

Простое меню

Кратко и кратко лучше всего описывает этот фрагмент простого аккордеонного меню.

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

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

Но если вам нужно что-то резкое, это обязательно поможет.

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

Аккордеон без анимации

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

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

Но в целом поведение феноменальное, и эта ручка — одна из самых простых, с которой можно начать.

Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

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

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

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

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

Содержание:

Плагин

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.

См. Также:

Аккордеонное меню: что это такое и как создать свое

Узнайте все об аккордеонных меню

Что такое раскрывающееся меню аккордеона?

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

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

Зачем использовать меню аккордеона?

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

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

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

Аккордеонное меню на мобильном телефоне

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

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

Википедия для мобильных устройств является ярким примером платформы, которая очень успешно реализует контент-аккордеон для большего удобства использования на маленьких экранах. Их паттерн аккордеона невероятно интуитивно понятен; Например, раздел «Краткие факты» расширяется до легко читаемой информации по теме. Например, найдите актера, и его разделы «Личная жизнь», «Карьера» и «Фильмография» часто будут представлены в виде меню аккордеона.

Когда , а не , использовать аккордеонное меню?

Не все элементы приложения созданы равными — больше всего на свете дизайн веб-сайтов и приложений — это выбор типов шаблонов навигации, которые вы хотите развивать для своего пользователя.Вы хотите, чтобы ваш UX был невидимым, чтобы процесс проходил настолько гладко, что пользователь едва ли понимает, что его направляет в приложении пользовательский дизайн.

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

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

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

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

Как создавать раскрывающиеся меню гармошкой во Framer

Во Framer вы можете использовать Magic Motion для создания взаимодействия с меню гармошки.Magic Motion — это тип перехода, который позволяет анимировать слои из одного состояния в другое. Просто переходите от одного уровня к другому, а Framer разберется с остальным.

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

Обязательно включите значок, указывающий, что содержимое меню будет открываться вниз. Вы можете использовать компонент Icon Set по умолчанию и выбрать chevrondown .Затем в следующем кадре создайте состояние вашего открытого аккордеонного меню. Вы можете использовать значок chevronup , чтобы указать, что меню открыто. Затем просто создайте несколько пунктов списка.

Наконец, установите переход между двумя кадрами в Magic Motion, и ваше аккордеонное меню готово!

Боковое меню Accordion с CSS и jQuery — CodeHim


Главная / Меню и навигация / Боковое меню Accordion с CSS и jQuery

Легкое (около 2 КБ), простое, но привлекательное плоское меню боковой панели «аккордеон», созданное с помощью CSS и jQuery.Полезно размещать ссылки для навигации по вашему сайту или использовать их в качестве гармошки общего назначения. В меню аккордеона используется значок стрелки с потрясающим шрифтом с расширяемыми элементами.

Кроме того, вы можете полностью настроить это меню (с дополнительным CSS) в соответствии с вашими потребностями.

Обзор подключаемого модуля

Форк

Плагин: Вертикальная адаптивная навигационная панель
Автор: Феликс Верас
Лицензия: Лицензия MIT
Опубликовано: 17 сентября 2019
Репозиторий: на GitHub
Зависимости: jQuery 1.3.1 или последняя версия и Font Awesome 4
Тип файла: zip-архив (HTML, CSS и JavaScript)
Размер упаковки: 4,49 КБ

Как сделать боковое меню аккордеона

1. Прежде всего загрузите библиотеку jQuery JavaScript и Font Awesome CSS (для значков со стрелками-гармошкой) в свой HTML-документ.





 

2. Теперь также включите файл CSS и JavaScript Vertical Sidenav (из загруженного каталога проекта).





 

3. Создайте структуру HTML (как показано ниже) для меню после загрузки всех необходимых ресурсов.

Меню ->

Совет: Если вы хотите создать триггер меню, удалите комментарий из Menu линия.

4. Если вы хотите добавить встроенный CSS или настроить стили, используйте следующее.

.btnMenu {
дисплей: нет;
отступ: 20 пикселей;
дисплей: блок;
фон: # 1abc9c;
цвет: #fff;
}
.btnMenu i.fa {float: right; }

.contenedor-menu {
ширина: 20%;
минимальная ширина: 300 пикселей;
маржа: 50 пикселей;
дисплей: встроенный блок;
высота строки: 18 пикселей;
}
.contenedor-menu .menu {ширина: 100%; }
.contenedor-menu ul {стиль списка: нет; }
.contenedor-menu .menu li a {
цвет: # 494949;
дисплей: блок;
отступ: 15 пикселей 20 пикселей;
фон: # e9e9e9;
}
.contenedor-menu .menu li a: hover {background: # 16a085; цвет: #fff; }
.contenedor-menu .menu i.fa {
размер шрифта: 12 пикселей;
высота строки: 18 пикселей;
float: right;
маржа слева: 10 пикселей;
}

.contenedor-menu .menu ul {display: none; }
.contenedor-menu .menu ul li a {
фон: # 424242;
цвет: # e9e9e9;
}

.contenedor-menu .menu .activado> a {
фон: # 16a085;
цвет: #fff;
}
 

16 CSS Accordions — W3TWEAKS.COM

Собранный вручную бесплатный дизайн аккордеона в чистом CSS. Примеры использования Jquery, html, css, javascript и т. Д. Коллекция охватывает демонстрацию вертикальных и горизонтальных Accordions. 2 новых обновления 11 мая 2020 г.

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

Демонстрационное изображение: jQuery accordion

Разработано с использованием HTML, SCSS, jQuery

Автор : Johan Mouchet | Создано 19 августа, 2016 г. | Обновлено от 20 августа 2016 г.


Простое решение для создания аккордеона на чистом CSS с переходом CSS по высоте панели, достигаемое путем установки «max-height» панели «аккордеон» вместо «height».

Демо-изображение: CSS Accordion

Разработано с использованием HTML, SCSS

Автор : Мэтью Скотт | Создано 22 октября, 2016 г. | Обновлено 15 сентября 2019 г.


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

Вот как создать стильное аккордеонное меню на чистом CSS без какого-либо javascript!

Разработано Anz Joy

Скачать демо


Funky Pure CSS Accordion

Еще один элемент пользовательского интерфейса на чистом CSS здесь с переключателями для активных состояний

Разработан Джейми Колтер

Скачать демо


Чистый CSS Accordion menu

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

Разработано Флойдом Хоуксом

Скачать демо


Чистый CSS Accordion

Аккордеон изображения только с CSS и цветными фильтрами с использованием функции rgba ()

Разработано Эдуардо Морено

Скачать демо


Simple Flat CSS Accordion

Simple Flat UI CSS Accordion

Разработано SAMSURY ID

Скачать демо


Простой аккордеон CSS с эффектами наведения

Простой аккордеон CSS с эффектами наведения

Разработано vavik

Скачать демо


Аккордеон

Acordeon сделан с использованием только CSS.На основе ввода флажка + трюк с метками для активных вкладок.

Разработано Раулем Баррерой

Загрузить демо


Чистый HTML и CSS Accordion

Создан и спроектирован (в браузере) расширяемый аккордеон на чистом HTML и CSS для развлечения. При разработке я пытался мыслить нестандартно (без каламбура).

Разработано Крисом Ота

Скачать демо


Аккордеонное меню CSS

Раскрывающееся меню «Аккордеон» CSS.

Разработано Энесом Сефа

Скачать демонстрацию


Наклонный аккордеон CSS

Наклонный аккордеон CSS.

Разработано Джеральдом Де Леоном

Скачать демо


Чистый css красочный аккордеон

Чистый css аккордеон.

Разработано Atfli-Houcine

Скачать демонстрацию


Process Accordion

Я искал способ проиллюстрировать путь клиента более интересным образом. Я решил сделать это как гармошку — и отсюда казалось естественным делать это только в CSS и HTML.

Разработано Крисом Маунси

Скачать демонстрацию


CSS-слайдер-аккордеон

CSS-слайдер-слайдер.

Разработано simon

Скачать демо


CSS Accordion

Создал css-аккордеон, используя метку и метод ввода. Это было разветвлено Эриком — http://codepen.io/ejsado/pen/GLKJd/, но изменено для работы со списками, а не с разделами.

Разработано Фаридом Мокрауи

Скачать демо

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *