Акордеон на чистому CSS3 — експерименти тривають

22

Аккордеон на чистом CSS3 — эксперименты продолжаются

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

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

Що стосується формування зовнішнього вигляду блоків в стилі «акордеон» на чистому CSS3, з цим проблем вже не виникає, як і раніше не вдається привчити деякі майкрософтовские дітища (IE8 і нижче) до розуміння псевдокласу :target.
Використання псевдокласу :hover дало певні позитивні результати при створенні кроссбраузерноо варіанту «акордеона», весь розклад розписав раніше в статті «Кросбраузерність Акордеон з допомогою CSS3». Але в тому варіанті, функціональні можливості акордеона, вийшли дещо обмеженими, в плані того, що блоки розкриваються тільки при наведенні на основні пункти, в силу того, що IE8 і більш давні версії, псевдоклас :target геть ігнорують.

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

Блок Аккордеон на CSS3

Відразу попереджаю, що тупість IE8 подолати не вдалося і цього разу, але сама техніка виконання, з огляду на майбутнє, гідна уваги і просування в маси. Метод чудово працює у всіх сучасних браузерах, перевірено: IE 9+, Opera, Firefox, Chrome і Safari.

Подивіться живий приклад, протестуйте в різних браузерах і на різних пристроях (акордеон добре вписується в будь-які розміри), а потім продовжимо більш детальний розбір техніки виконання.

Дивитися Демо

Сама ідея використання чекбоксов (checkbox) і перемикачів (radiobutton) для створення прихованих блоків не нова і широко використовується. Принцип роботи і всі складові елементи, ми докладно розглядали раніше, у статті: Розкривні блоки з прихованим змістом. Повторюватися не буду, так як вся основна html-конструкція не зазнала значних змін, додав лише сформовані з допомогою властивостей CSS3 візуальні елементи оформлення, а також здатність блоків акордеона підлаштовуватися під внутрішній зміст, і розміри окремих контейнерів сайту (бічні панелі, окремі записи, інформаційні панелі і віджети).

Щоб вам не стрибати від запису до запису нагадаю, що весь механізм включення і виключення прихованих блоків складається з трьох елементів:

  • Тег: з визначеним сполучною ідентифікатором, класом і атрибутом type із значенням checkbox
  • Тег: Заголовок текст перемикач із значенням унікального ідентифікатора для атрибута for, (ідентифікатор обов’язково повинен бути таким же, як ідентифікатор тегу input).
  • Тег:
    …зміст…

    блок в якому буде міститися до кращих часів або поки користувач не натисне, різний прихований контент (текст, зображення і т. д. і т. п.)

Акордеон представлений єдиним контейнером div з однойменною класом

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

….

Ось як буде виглядати в HTML наш «Акордеон» складається з трьох панелей з розкриваються по кліку блоками з вмістом:

HTML

<div class="accordion">
<input class="toggle-box" id="block-1" type="checkbox">
<label for="block-1">Заголовок Панель №1</label>
<div class="box">
Тут розміщуєте будь-який зміст - текст, зображення і т.д. і т.п.
</div>
<input class="toggle-box" id="block-2" type="checkbox" >
<label for="block-2">Заголовок Панель №2</label>
<div class="box">
Тут розміщуєте будь-який зміст - текст, зображення і т.д. і т.п.
</div>
<input class="toggle-box" id="block-3" type="checkbox" >
<label for="block-3">Заголовок Панель №3</label>
<div class="box">
Тут розміщуєте будь-який зміст - текст, зображення і т.д. і т.п.
</div>
</div>

Заголовок Панель №1

Тут розміщуєте будь-який зміст – текст, зображення і т. д. і т. п.

Заголовок Панель №2

Тут розміщуєте будь-який зміст – текст, зображення і т. д. і т. п.

Заголовок Панель №3

Тут розміщуєте будь-який зміст – текст, зображення і т. д. і т. п.

Як бачите, все досить логічно і компактно, треба примудритися буде, щоб заплутатися при інтеграції акордеона і його наповненні, хоча… Ще раз нагадаю, додаючи додаткові панелі з блоками не забувайте, що ідентифікатор тега повинен бути унікальним і повністю відповідати значенню атрибута for=”” в тезі , інакше будете здивовані результатом ))).
Це все, що стосується html складової. Тепер давайте подивимося на частину CSS, що відповідає за роботу акордеона і формування зовнішнього вигляду його елементів.
Зараз в ходу і в пошані у веб-дизайнерів плоский стиль оформлення елементів користувальницького інтерфейсу, але я більше схиляюся до деякої легкої об’ємності, без фанатизму, але все ж, в міру округлі форми мені ближче))). Ще одна можливість, поекспериментувати з чудовими властивостями CSS3 (градієнт, тіні тощо), тим більше, що використовуючи деякі милиці, можна і IE8 змусити, більш-менш стерпно, обробляти ті чи інші властивості CSS.

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

CSS

.accordion{
/* ширина в % для гумового макета,
* можна визначити фіксоване
* значення у px
*/
width: 100%;
padding: 0;
margin: 0 auto;
}
.toggle-box {
/* за умаолчанию прихований */
display: none;
}
/* формуємо зовнішній вигляд панелей акордеона */
.toggle-box + label {
background: #6c6e74;
 background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
 background: -webkit-gradient(linear, left, top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
 background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
 background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
 background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
 background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
 filter: програми:DXImageTransform.Microsoft.gradient( startColorstr='#6c6e74', endColorstr='#4b4d51',GradientType=0 );
color: #C9C9C9;
 cursor: pointer;
display: block;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 21px;
padding: 8px 22px;
margin-bottom: 0px;
}
label a, a:hover{color: #ddd;}

/* формуємо зовнішній вигляд панелей при наведенні */
.toggle-box + label:hover{opacity: 0.9;}
/* формуємо зовнішній вигляд панелей при натисканні на них */
.toggle-box + label:active{
background: #6c6e74;
 background: -moz-linear-gradient(top, #6c6e74 0%, #545359 11%, #756d73 84%, #4b4d51 100%);
 background: -webkit-gradient(linear, left, top, left bottom, color-stop(0%,#6c6e74), color-stop(11%,#545359), color-stop(84%,#756d73), color-stop(100%,#4b4d51));
 background: -webkit-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
 background: -o-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
 background: -ms-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
 background: linear-gradient(to bottom, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
 filter: програми:DXImageTransform.Microsoft.gradient( startColorstr='#545359', endColorstr='#4b4d51',GradientType=0 );
}
/* зміст блоків приховано */
.toggle-box + label + div {
display: none;
}
/* при обробці прапорець (checkbox) показуємо блок з вмістом */
.toggle-box:checked + label + div {
display: block;
}
/* формуємо зовнішній вигляд кнопки перемикача на панелі праворуч */
.toggle-box + label:before {
background: #404247;
 -webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
color: #C9C9C9;
 content: "+";
display: block;
float: right;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 2px 5px 0px;
text-align: center;
width: 18px;
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.toggle-box:checked + label:before {
content: "\2212";
}
/* оформляємо блок з вмістом */
.box{
background: #fefefe;
 border-left: rgba(0,0,0,0.1) solid 1px;
border-right: rgba(0,0,0,0.1) solid 1px;
border-bottom: rgba(0,0,0,0.1) solid 1px;
padding: 10px 10px 10px;
font: 14px Helvetica, Arial, sans-serif;
color: #333;
 line-height: 1.5;
}
/* значення вбудованих зображень у блоки */
.box img{
height: auto;
border: rgba(0,0,0,0.3) solid 1px;
}
.left-img{
float: left;
margin: 10px 5px 0px 0px;
}
.right-img{
float: right;
margin: 5px 0 0 10px;
}
.large-img {width: 100%;margin-bottom: 5px;}

.accordion{
/* ширина в % для гумового макета,
* можна визначити фіксоване
* значення у px
*/
width: 100%;
padding: 0;
margin: 0 auto;
}
.toggle-box {
/* за умаолчанию прихований */
display: none;
}/* формуємо зовнішній вигляд панелей акордеона */.toggle-box + label {
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left, top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
filter: програми:DXImageTransform.Microsoft.gradient( startColorstr=’#6c6e74′, endColorstr=’#4b4d51′,GradientType=0 );
color: #C9C9C9;
cursor: pointer;
display: block;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 21px;
padding: 8px 22px;
margin-bottom: 0px;
}
label a, a:hover{color: #ddd;}/* формуємо зовнішній вигляд панелей при наведенні */.toggle-box + label:hover{opacity: 0.9;}/* формуємо зовнішній вигляд панелей при натисканні на них */.toggle-box + label:active{
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #545359 11%, #756d73 84%, #4b4d51 100%);
background: -webkit-gradient(linear, left, top, left bottom, color-stop(0%,#6c6e74), color-stop(11%,#545359), color-stop(84%,#756d73), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
background: linear-gradient(to bottom, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
filter: програми:DXImageTransform.Microsoft.gradient( startColorstr=’#545359′, endColorstr=’#4b4d51′,GradientType=0 );
}/* зміст блоків приховано */.toggle-box + label + div {
display: none;
}/* при обробці прапорець (checkbox) показуємо блок з вмістом */.toggle-box:checked + label + div {
display: block;
}/* формуємо зовнішній вигляд кнопки перемикача на панелі праворуч */.toggle-box + label:before {
background: #404247;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
color: #C9C9C9;
content: “+”;
display: block;
float: right;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 2px 5px 0px;
text-align: center;
width: 18px;
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.toggle-box:checked + label:before {
content: “\2212”;
}/* оформляємо блок з вмістом */.box{
background: #fefefe;
border-left: rgba(0,0,0,0.1) solid 1px;
border-right: rgba(0,0,0,0.1) solid 1px;
border-bottom: rgba(0,0,0,0.1) solid 1px;
padding: 10px 10px 10px;
font: 14px Helvetica, Arial, sans-serif;
color: #333;
line-height: 1.5;
}/* значення вбудованих зображень у блоки */.box img{
height: auto;
border: rgba(0,0,0,0.3) solid 1px;
}
.left-img{
float: left;
margin: 10px 5px 0px 0px;
}
.right-img{
float: right;
margin: 5px 0 0 10px;
}
.large-img {width: 100%;margin-bottom: 5px;}

У всьому коді псевдоклассу :checked відведено кілька рядків, але для роботи акордеона це найважливіший елемент. Стосовно до тегу , до якого у нас і застосовується псевдоклас :checked, з допомогою атрибут checked відбувається перемикання блоків у розчинене стан. Ось тут і спотикається вічне гальмо прогресу, майкрософтовський телепень — Internet Explorer 8-ї версії.

Якщо ви віддаєте перевагу плоский спосіб, без будь-яких наворотів, досить прибрати властивості лінійного градієнта, залишивши лише суцільну заливку фону панелей background: #ваш_цвет;. Експериментуючи з параметрами, ви зможете повністю видозмінити акордеон у відповідності з вашим смаком і загальним дизайном вашого сайту.

Дуже часто буває затребуваним варіант акордеона з розкритою однієї з панелей при завантаженні сайту. Зробити один блок спочатку розкритим дуже просто, для цього достатньо потрібної вам панелі, в теге додати атрибут checked. Наприклад, вам потрібно щоб при завантаженні сайту перша панель акордеона, завантажувалася в розкритому стані, тобто відразу показувався блок з усім його вмістом, у цьому разі в html перша панель буде виглядати так:

  <input class="toggle-box" id="block-1" type="checkbox" checked>
<label for="block-1">Заголовок Панель №1</label>
<div class="box">
Тут розміщуєте будь-який зміст - текст, зображення і т.д. і т.п.
</div>

Заголовок Панель №1

Тут розміщуєте будь-який зміст – текст, зображення і т. д. і т. п.

Один єдиний доданий атрибут checked, зробить всю роботу і відразу ж, при завантаженні сайту, ця панель явить користувачам блок з вмістом. За таким же принципом робіть з усіма панелями, які планує робити спочатку розкритими.

Якщо нічого не упустив, на цьому, мабуть, і все. Акордеон готовий, залишається ще раз продемонструвати живий приклад його роботи та поділитися посиланням (Яндекс.Диск) на скачування архіву з вихідними кодами.

ДемоСкачать

З’являться питання, які труднощі з застосуванням на практиці, або просто помітите помилку в коді, пишіть в коментарях, обов’язково відповім і постараюся допомогти чим зможу. Писати ж щоразу типу: «в IE8 не працює», дуже прошу не треба, все прекрасно знаю і нікого не агітую, стрімголов користуватися цим методом повсюдно. Хоча, пора б вже всім конкретно подзабить на старого IE-шку і рухатися далі.

За ідею і базовий матеріал, спасибі команді BASICuse

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

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