Чуйний Акордеон на чистому CSS

49

У своїх статтях, я не раз вже торкався теми створення блоків в стилі «акордеон», як на чистому CSS, так і з використанням jQuery, але кожен раз повертаюся, шукаю нові рішення, експериментую намагаючись знайти варіант однаково добре працює на всіх пристроях, у всіх браузерах, і був максимально зрозумілий будь-якому веб-майстру, для реалізації в своїх нових проектах.

Сьогодні хочу представити черговий варіант «акордеона». На цей раз це буде чуйний (гумовий), «акордеон» працює на прихованих чекбоксах, тобто робота (перемикання) блоків організована виключно засобами CSS, без використання Javascript.Вся робота акордеона побудована на використанні прихованих чекбоксов (checkbox) в зв’язці з псевдоклассом checked.
Дивіться демо, тестуйте в різних браузерах, вивчайте документацію і якщо вставить, забирайте исходники, і творіть, творіть…

Отзывчивый Аккордеон на чистом CSS

Дивитися ДемоСкачать Исходники

HTML Розкладка

На відміну від попередніх версій «акордеона» змінив структуру побудови і використовувані елементи. Перш за все створив базовий div контейнер з фіксованими розмірами використовуючи прикладі властивості max-width: 600px;min-height: 0;. Відповідно у вас значення ширини можуть бути зовсім іншими, висота ж повинна залишатися незмінною саме min-height: 0;.
У базовий контейнер помістив всі елементи акордеона, який представляє з себе стандартний ненумерованний список

    з вкладеними елементами управління і блоками з певним вмістом. Це може бути все що завгодно, просто текстові повідомлення приправлені мініатюрами, з можливістю розташування , як зліва, так і справа, повнорозмірні зображення відмінно вписуються в заданий розмір блоків акордеона, а так само вбудований відео з популярних відео хостингів, значення властивостей css яких задані так, що будь відеоролик чудово впишеться в межі секцій акордеона.
    У прикладі не став демонструвати можливість розміщення в акордеоні різних форм зворотного зв’язку, підписок, панелей розшарювання і карт, при необхідності це не складе особливих труднощів.

    Подивіться приклад html-коду «акордеона» (як є), все дуже просто, думаю коментарі зайві:

        <div class="accordion">
    <ul>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h2 class="title_block">Короткий опис (набір слів)</h2>
    <div class="msg">
    <p>Ця сторінка була написана на HTML і CSS. Я не використовував Normalize і CSS Reset, префікси так само прописував руками, була купа часу, так і обсяг не особливо великий. Ви ж, щоб заощадити час і нерви, цілком можете використовувати всі ці корисні інструменти. Надалі всі ці знання вам обов'язково знадобляться на масштабних проектах.
    <p>
    Ну, а все що в демо можна легко реалізувати в простому HTML і CSS, тим більше що вся робота акордеона побудована без підключення javascript.
    <p>Вся робота акордеона побудована на використанні прихованих чекбоксов (checkbox) в зв'язці з псевдоклассом <strong>checked</strong>.
    </p>
    </div>
    </li>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h2 class="title_block">Мініатюра зліва</h2>
    <div class="msg">
    <p><img src="http://lorempixel.com/250/200" class="img left">Як бачите в прикладі я використовував мініатюри зображень з можливістю розташування як з лівого так і з правого( побачите у третій секції акордеона).
    <p>Мініатюр заданий розмір до 25% від базового розміру зображень використовуються в аккордноне, 100% від батьківського контейнера, так що зображення будуть легко підлаштовуватися під будь-які розміри базового блоку.
    <p>Медіа-запити використовував для створення гнучкого реагування елемента(акордеон) на різні розміри екранів пристроїв.
    </p>
    </div>
    </li>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h2 class="title_block">Мініатюра праворуч</h2>
    <div class="msg">
    <p><img src="http://lorempixel.com/250/200" class="img right">Щоб відправити мініатюру вправо достатньо в тег img прописати <strong>class="img right, якщо вліво відповідно додаємо class="img-left</strong>.
    <p>Розмір мініатюр регулюється зміною процентних значень в css.Для цього достатньо знайти потрібний селектор, наприклад <strong>.msg img.img-left</strong> і вже у властивості <strong>width: 25%;</strong> експериментувати з значеннями</p>
    </div>
    </li>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h2 class="title_block">Повнорозмірна картинка</h2>
    <div class="msg">
    <p><img src="images/transport-q-c-960-600-1.jpg" class="large-img">
    Вбудованому зображення, розмір якого 100% від батьківського контейнера прописуємо <strong>class="large-img"</strong>. Реальний розмір картинки може бути більшим ніж секція акордеона, але вона легко впишеться в блок акордеона.
    </p>
    </div>
    </li>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h2 class="title_block">Вбудоване відео</h2>
    <div class="msg">
    <div class="video-responsive">
    <iframe width="1280" height="720" src="http://www.youtube.com/embed/mRrE8CFkkAg" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>У акордеоні ви можете використовувати вбудоване відео з популярних відео хостингів використовують <strong>iframe, object, embed</strong>. Відео повністю отзывчвы і ідеально впишуться в будь-які розміри блоків акордеона.</p>
    </div>
    </li>
    </ul>
    </div>
    • Короткий опис (набір слів)

      Ця сторінка була написана на HTML і CSS. Я не використовував Normalize і CSS Reset, префікси так само прописував руками, була купа часу, так і обсяг не особливо великий. Ви ж, щоб заощадити час і нерви, цілком можете використовувати всі ці корисні інструменти. Надалі всі ці знання вам обов’язково знадобляться на масштабних проектах.

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

      Вся робота акордеона побудована на використанні прихованих чекбоксов (checkbox) в зв’язці з псевдоклассом checked.

    • Мініатюра зліва

      Як бачите на прикладі я використовував мініатюри зображень з можливістю розташування як з лівого так і з правого( побачите у третій секції акордеона).

      Мініатюрам заданий розмір до 25% від базового розміру зображень використовуються в аккордноне, 100% від батьківського контейнера, так що зображення будуть легко підлаштовуватися під будь-які розміри базового блоку.

      Медіа-запити використовував для створення гнучкого реагування елемента(акордеон) на різні розміри екранів пристроїв.

    • Мініатюра праворуч

      Щоб відправити мініатюру вправо достатньо в тег img прописати class=”img right, якщо вліво відповідно додаємо class=”img left.

      Розмір мініатюр регулюється зміною процентних значень в css.Для цього достатньо знайти потрібний селектор, наприклад .msg img.img left і вже у властивості width: 25%; експериментувати з значеннями

    • Повнорозмірна картинка


      Вбудованому зображення, розмір якого 100% від батьківського контейнера прописуємо class=”large-img”. Реальний розмір картинки може бути більшим ніж секція акордеона, але вона легко впишеться в блок акордеона.

    • Вбудоване відео

      У акордеоні ви можете використовувати вбудоване відео з популярних відео хостингів використовують iframe, object, embed. Відео повністю отзывчвы і ідеально впишуться в будь-які розміри блоків акордеона.

    Обратие увагу, як я і писав вище вся робота акордеона вибудувана на прихованих чекбоксах . У цьому варіанті не використовував тег , який привыяно використовується для зв’язку з прапорцем (у нас він прихований). Псевдоклассу checked визначив дещо іншу задачу, спочатку прописавши його кожному елементу форми , які як ми вже знаємо і є перемикачами блоків акордеона. На відміну від звичного використання checked, коли наявність цього псевдокласу визначає активний елемент. У цій версії checked вказує на те, що елемент (блок акордеона) прихований, всі правила і значення для такої поведінки елементів акордеона визначаються CSS.
    Таким чином ми плавно переходимо до розгляду робочого коду CSS.



    CSS Верстка

    Що нам треба зробити? Це сформувати базовий контейнер акордеона, невпорядкований список

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

      Кожне правило і властивість окремо розписувати не буду, пропишу коментарі безпосередньо в код css, так вам буде простіше в’їхати в тему і розібратися, що, куди і навіщо)))

      *
      * Формуємо базовий контейнер акордеона
      */
      .accordion {
      width: 100%;
      /*
      ширина вибирається довільна
      *в залежності від місця розміщення
      */
      max-width: 600px;
      min-height: 0;
      display: block;
      /* відносне позиціонування */
      position: relative;
      margin: 0 auto;
      padding: 0;
      background-color: #fefffa;
       overflow: hidden
      }
      /* заголовки панелей акордеона */
      .accordion h2 {
      font-size: 16px;
      font-weight: 300;
      letter-spacing: 1px;
      display: block;
      margin: 0;
      padding: 10px 25px;
      cursor: pointer;
      color: #f4f4f4;
       background: #2d8bbb;
       border-top: 1px solid #3face4;
       border-bottom: 1px solid #2479a5;
       -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      }
      /* заголовки панелей акордеона при наведенні
      * в даному варіанті не спрацьовує
      */
      /* .accordion h2:hover {
      display: block;
      background-color: #005049;
      }
      */
      /* Формуємо блоки з содерханием */
      .msg {
      position: relative;
      overflow: hidden;
      max-height: 800px;
      opacity: 1;
      transform: translate(0, 0);
      }
      /* оформляємо параграфи */
      .msg p {
      color: rgba(48, 69, 92, 0.8);
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 1px;
      padding: 0 20px
      }
      /* Подбаємо про невеликих екранах */
      @media (max-width: 550px) {
      .accordion {
      box-sizing: border-box;
      transform: translate(0, 0);
      max-width: 100%;
      min-height: 100%;
      margin: 0;
      left: 0;
      }
      }
      /* Формуємо ненумерованний список */
      .accordion ul {
      list-style: none;
      perspective: 900;
      padding: 0;
      margin: 0;
      }
      /* Визначаємо і формуємо окремий елемент списку
      * в який помістимо прихований флажек,
      * панелей заголовок і блок з вмістом
      */
      .accordion ul li {
      position: relative;
      padding: 0;
      margin: 0;
      }
      /* встановлюємо час очікування перед відтворенням анімації
      * на основі нумерації в дереві елементів
      */
      .accordion ul li:nth-of-type(1) {
      animation-delay: 0.5s;
      }
      .accordion ul li:nth-of-type(2) {
      animation-delay: 0.75s;
      }
      .accordion ul li:nth-of-type(3) {
      animation-delay: 1s;
      }
      .accordion ul li:last-of-type {
      padding-bottom: 0;
      }
      /* Сформуємо покажчик перемикання стану акордеона */
      .accordion ul li i {
      position: absolute;
      transform: translate(-6px, 0);
      margin-top: 16px;
      /* розташуємо вказівник на панелі заголовка праворуч */
      right: 25px;
      }
      /* "Малюємо" сам вказівник */
      .accordion ul li i:before, .accordion ul li i:after {
      content: "";
      position: absolute;
      background-color: #eee;
       width: 3px;
      height: 9px;
      }
      /* Додаємо елемент трансформації покажчика при перемиканні */
      .accordion ul li i:before {
      transform: translate(-2px, 0) rotate(45deg);
      }
      .accordion ul li i:after {
      transform: translate(2px, 0) rotate(-45deg);
      }
      /* Робимо чекбокс прихованим*/
      .accordion ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      opacity: 0;
      }
      /* Коли у встановлений прапорець checked
      * блок з вмістом прихований
      */
      .accordion ul li input[type=checkbox]:checked ~ div.msg {
      margin-top: 0;
      max-height: 0;
      opacity: 0;
      transform: translate(0, 50%);
      }
      /* Покажчик показує вниз */
      .accordion ul li input[type=checkbox]:checked ~ i:before {
      transform: translate(2px, 0) rotate(45deg);
      }
      .accordion ul li input[type=checkbox]:checked ~ i:after {
      transform: translate(-2px, 0) rotate(-45deg);
      }
      /* Встановлюємо ефект переходу
      * між двома станами покажчика
      */
      div.msg, ul li i:before, ul li i:after {
      transition: all 0.5s ease-in-out;
      }
      /**
      * Зображення всередині акордеона
      * ...зробимо їх чуйними
      */
      .accordion .msg img {
      width: 100%;
      height: auto;
      -moz-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      }
      /* повнорозмірна картинка */
      .msg img .large-img {
      width: 100%;
      margin-bottom: 10px;
      }
      /* мініатюра зліва */
      .msg img.img-left {
      width: 25%;
      float:left;
      margin:15px 5px 5px 0;
      }
      /* мініатюра праворуч */
      .msg img.img-right {
      width: 25%;
      float:right;
      margin:5px 0 15px 5px;
      }
      /* Вбудований відео */
      .video-responsive {
      margin: 20px;
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      -moz-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      }
      /* Передбач використання коду вбудованого відео
      *через iframe, object або embed */
      .video-responsive iframe,
      .video-responsive object,
      .video-responsive embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }

      *
      * Формуємо базовий контейнер акордеона
      */
      .accordion {
      width: 100%;
      /*
      ширина вибирається довільна
      *в залежності від місця розміщення
      */
      max-width: 600px;
      min-height: 0;
      display: block;
      /* відносне позиціонування */
      position: relative;
      margin: 0 auto;
      padding: 0;
      background-color: #fefffa;
      overflow: hidden
      }
      /* заголовки панелей акордеона */
      .accordion h2 {
      font-size: 16px;
      font-weight: 300;
      letter-spacing: 1px;
      display: block;
      margin: 0;
      padding: 10px 25px;
      cursor: pointer;
      color: #f4f4f4;
      background: #2d8bbb;
      border-top: 1px solid #3face4;
      border-bottom: 1px solid #2479a5;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      }
      /* заголовки панелей акордеона при наведенні
      * в даному варіанті не спрацьовує
      */
      /* .accordion h2:hover {
      display: block;
      background-color: #005049;
      }
      *//* Формуємо блоки з содерханием */
      .msg {
      position: relative;
      overflow: hidden;
      max-height: 800px;
      opacity: 1;
      transform: translate(0, 0);
      }/* оформляємо параграфи */
      .msg p {
      color: rgba(48, 69, 92, 0.8);
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 1px;
      padding: 0 20px
      }/* Подбаємо про невеликих екранах */
      @media (max-width: 550px) {
      .accordion {
      box-sizing: border-box;
      transform: translate(0, 0);
      max-width: 100%;
      min-height: 100%;
      margin: 0;
      left: 0;
      }
      }/* Формуємо ненумерованний список */
      .accordion ul {
      list-style: none;
      perspective: 900;
      padding: 0;
      margin: 0;
      }/* Визначаємо і формуємо окремий елемент списку
      * в який помістимо прихований флажек,
      * панелей заголовок і блок з вмістом
      */
      .accordion ul li {
      position: relative;
      padding: 0;
      margin: 0;
      }/* встановлюємо час очікування перед відтворенням анімації
      * на основі нумерації в дереві елементів
      */
      .accordion ul li:nth-of-type(1) {
      animation-delay: 0.5 s;
      }
      .accordion ul li:nth-of-type(2) {
      animation-delay: 0.75 s;
      }
      .accordion ul li:nth-of-type(3) {
      animation-delay: 1s;
      }
      .accordion ul li:last-of-type {
      padding-bottom: 0;
      }/* Сформуємо покажчик перемикання стану акордеона */
      .accordion ul li i {
      position: absolute;
      transform: translate(-6px, 0);
      margin-top: 16px;
      /* розташуємо вказівник на панелі заголовка праворуч */
      right: 25px;
      }/* “Малюємо” сам вказівник */
      .accordion ul li i:before, .accordion ul li i:after {
      content: “”;
      position: absolute;
      background-color: #eee;
      width: 3px;
      height: 9px;
      }
      /* Додаємо елемент трансформації покажчика при перемиканні */
      .accordion ul li i:before {
      transform: translate(-2px, 0) rotate(45deg);
      }
      .accordion ul li i:after {
      transform: translate(2px, 0) rotate(-45deg);
      }/* Робимо чекбокс прихованим*/
      .accordion ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      opacity: 0;
      }
      /* Коли у встановлений прапорець checked
      * блок з вмістом прихований
      */
      .accordion ul li input[type=checkbox]:checked ~ div.msg {
      margin-top: 0;
      max-height: 0;
      opacity: 0;
      transform: translate(0, 50%);
      }
      /* Покажчик показує вниз */
      .accordion ul li input[type=checkbox]:checked ~ i:before {
      transform: translate(2px, 0) rotate(45deg);
      }
      .accordion ul li input[type=checkbox]:checked ~ i:after {
      transform: translate(-2px, 0) rotate(-45deg);
      }
      /* Встановлюємо ефект переходу
      * між двома станами покажчика
      */
      div.msg, ul li i:before, ul li i:after {
      transition: all 0.5 s ease-in-out;
      }
      /**
      * Зображення всередині акордеона
      * …зробимо їх чуйними
      */
      .accordion .msg img {
      width: 100%;
      height: auto;
      -moz-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 0 20px rgba(0,0,0,0.19);
      -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 0 20px rgba(0,0,0,0.19);
      box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 0 20px rgba(0,0,0,0.19);
      }/* повнорозмірна картинка */
      .msg img .large-img {
      width: 100%;
      margin-bottom: 10px;
      }
      /* мініатюра зліва */
      .msg img.img left {
      width: 25%;
      float:left;
      margin:15px 5px 5px 0;
      }
      /* мініатюра праворуч */
      .msg img.img right {
      width: 25%;
      float:right;
      margin:5px 0 15px 5px;
      }/* Вбудований відео */
      .video-responsive {
      margin: 20px;
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      -moz-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 0 20px rgba(0,0,0,0.19);
      -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 0 20px rgba(0,0,0,0.19);
      box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 0 20px rgba(0,0,0,0.19);
      }
      /* Передбач використання коду вбудованого відео
      *через iframe, object або embed */
      .video-responsive iframe,
      .video-responsive object,
      .video-responsive embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }

      У цьому акордеоні передбачив використання медійного контенту, зображення та відео з популярних відеохостингів. Зображення розбив на три класи. Повнорозмірні картинки class=”large-img” в теге і мініатюри вбудовані в текст, розташовані зліва class=”img left” або праворуч class=”img right”.
      Розмір мініатюр регулюється зміною процентних значень в css.Для цього достатньо знайти потрібний селектор, наприклад .msg img.img left і вже у властивості width: 25%; експериментувати з значеннями.

      Миниатюры изображений в аккордеоне
      Вбудоване відео використовують iframe, object, embed повністю чуйне і ідеально впишеться в будь-які розміри блоків акордеона.

      Встроенное видео в аккордеоне
      Якщо нічого не упустив, то на цьому мабуть і все. Чуйний «жах» і цілком собі пристойний «акордеон», повністю готовий до роботи.

      Дивитися ДемоСкачать Исходники

      З Повагою, Андрій .

      Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: