Як зробити аккордіон на чистому css3.

Всім привіт! У минулій статті ми розібрали, навіщо потрібен псевдоклас target, а сьогодні ми закріпимо знання на практиці і створимо аккордіон на чистому CSS3.

Нам знадобляться всього лише 2 файли: index.html і style.css

Давайте відкриємо файл index.html і пропишемо наступне:

 
lang="En"gt; 
 
charset="UTF-8"gt; 
css target 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Container"gt; 
class="Accordion"gt; 
 
 href="#first"class="Accordion-header"gt;перший 
 class="Accordion-content"id="First"gt; 
 Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos. 
  
 
 
 href="#second"class="Accordion-header"gt;другий 
 class="Accordion-content"id="Second"gt; 
 Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos. 
  
 
 
 href="#third"class="Accordion-header"gt;третій 
 class="Accordion-content"id="Third"gt; 
 Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.

Отже, що це все означає? Давайте розбиратися. На початку файлу ми, звичайно ж, підключаємо наші стилі. Далі ми створюємо блок з класом .container, який буде містити ненумерований список з 3 елементами. Ці 3 елементи і будуть наш аккордіон. Усередині кожного з них є посилання (заголовок), при кліці по якій буде показуватися наш текст з блоку з класом .accordion-content.

Відео: Адаптивне горизонтальне меню для вашого сайту на чистому CSS

Розмітка досить проста, думаю, тут все зрозуміло.

Переходимо до найцікавішого - стилям.

Тут у нас теж нічого складного немає, проте вимагає розуміння.

body { 
 margin:0- 
 padding:0- 
} 
 
.container { 
 width:100% - 
 max-width:400px- 
 margin:50pxauto- 
} 
 
.accordion { 
 width:100% - 
 padding:0- 
 margin:0- 
 list-style-type: none- 
} 
 
.accordion-header { 
 display: block- 
 padding:15px20px- 
 background:# bbb- 
 color:# fff- 
 text-decoration: none- 
 font-size:1.2em- 
 text-transform: uppercase- 
 text-shadow:1px1px0 rgba(0,0,0,.1) - 
 margin-bottom:5px- 
 font-family: sans-serif- 
} 
 
.accordion-content p { 
 margin:0020px0- 
} 
 
.accordion-content { 
 padding:0- 
 height:0- 
 overflow: hidden- 
} 
 
.accordion-content:target { 
 height:auto- 
 padding:20px- 
}

На початку ми прибираємо відступи у тега body.

Відео: АККОРДЕОН НА CSS

Далі вказуємо, що наш контейнер повинен розтягуватися на всю ширину, але не більше 400px, робимо вирівнювання по центру сторінки і відступ зверху і знизу в 50px.

Нашому списку вказуємо ширину, відступи і прибираємо гуртки.

Починаємо робити заголовок. Робимо його блоковим, задаємо відступи, колір, шрифт, тіні і т.д.

Для кращої читабельності задаємо відступ у нашого параграфа.

А ось тепер найцікавіше. За замовчуванням ми прибираємо всі відступи, робимо висоту рівну 0px і додаємо властивість overflow, щоб приховати контент, а коли на наш блок починають посилатися, ми все повертаємо на місце, використовуючи псевдоклас target.

Ось так все просто. Тепер відкрийте сторінку в браузері і після імені файлу введіть один з трьох наших тегів. наприклад:

http: //site.local/index.html#first

І у вас відкриється перший блок з контентом.

Зрозуміло, що користувач так робити не буде, тому в html коді ми зробили посилання такого виду: #first, #second, #third і задали їм відповідні ідентифікатори в атрибуті id у блоків з контентом.

Думаю, ви зрозуміли, які можливості нам дає HTML5 і CSS3, тому його потрібно терміново вивчати прямо зараз, щоб не відстати від часу, а в цьому вам допоможе відеокурс HTML5 та CSS3 з Нулі до Гуру

Поділися в соціальних мережах:

Схожі