Exore LTD » CSS3 » Содержимое в виде аккордеона на CSS
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

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

Содержимое в виде аккордеона на 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 class="accordion horizontal">
    <section id="about">
        <h2><a href="#about">О нас</a></h2>
        <p>Текст о нас ...</p>
    </section>
    <section id="services">
        <h2><a href="#services">Сервисы</a></h2>
        <p>Текст про сервисы ...</p>
    </section>
    <section id="blog">
        <h2><a href="#blog">Блог</a></h2>
        <p>Текст о блоге ...</p>
    </section>
    <section id="portfolio">
        <h2><a href="#portfolio">Портфолио</a></h2>
        <p>Ваше портфолио ...</p>
    </section>
    <section id="contact">
        <h2><a href="#contact">Контакты</a></h2>
        <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 h2 {  
      width:100%;  
}  
.accordion section:target h2 a{   
      color:#333;   
      padding:0;  
}  
.accordion section:target p {  
      display:block;  
}  
.accordion section h2 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 h2 {   
     -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 h2{   
     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 h2 {   
     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/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

7 комментариев к записи
  • Вадим

    Доброго времени суток!
    Юрий, я всегда с удовольствием просматриваю все Ваши уроки.
    Вы делаете большое дело неся знания в массы.
    Хотел спросить возможен-ли в данном варианте не только текст в одной вкладке,
    но и комбинация текст-изображение? Имею ввиду чистую CSS3.
    Дай Вам Бог здоровья и всего доброго.

     
    Ответить
    • Юрий

      Спасибо, Вадим)
      Конечно можно вставить изображение с текстом. Главное чтобы изображение не было очень большим и аккордеон не разъехался.

       
      Ответить
  • Сергей

    Я не волшебник…. я только учусь 😈 .. и вот впервые самому удалось вписать скриты на свой первый сайт!!!!
    Спасибо ОГРОМНОЕ!!!

     
    Ответить
  • Айк

    А как сделать ГОРИЗОНТАЛЬНЫЙ  АККОРДЕОН  ?

     
    Ответить
    • Юрий Немец

      В демо-примере все есть.

       
      Ответить
  • Andrey Limar

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

     
    Ответить
  • Виталий

    Доброго дня! Спасибо за аккордион очень пригодился, правильно было подмечено выше, что он подходит к  сайтам — визиткам. Поставить получилось, но почему то не корректно работает — раздел "сервис"  В вертикальном расположении ширина и высота рамки (только  "сервисы") значительно отличается от остальных и оказалась без нумерации. Поправить не получается.

    Что удалось — в страницах удалить код HTML "сервисы" , вместо него тупо повторить, вставить "о нас" .  так хоть внешне правильная геометрия появилась по всем строчкам. Сейчас начну работать с наполнением и колором.

     
    Ответить

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

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