Кросбраузерність «акордеон» з допомогою CSS3

42

Кроссбраузерный «аккордеон» с помощью CSS3

Останнім часом, в силу того, що практично всі сучасні і популярні браузери (Opera, Firefox, Safari, Chrome, Flock і навіть вічний гальма — IE), активно підключаються до підтримки нових властивостей CSS3, стало можливим впритул зайнятися розробкою, більш-менш кроссбраузерного, компактного «акордеона», що розкривається при наведенні. Звичайно, способів створення таких «гармошок», в інтернеті можна знайти на будь-який смак і колір, всі вони різні і за виконанням, і за функціональної спрямованості.
Мене найбільше цікавила можливість створення панелей (меню) в стилі «акордеон» виключно засобами CSS3, без використання зображень при формуванні блоків і без підключення додаткових javascript. Ну і звичайно саме головне, щоб у результаті вийшов повноцінний робочий елемент, що однаково добре працює у всіх браузерах.

Сьогодні ми з вами розглянемо всю техніку виконання кроссбраузерного «акордеона» на чистому CSS3. Без зайвої води, нагромаджень коду, тільки практика і наочний приклад. До речі, а ось і він:

ДемоСкачать

За основу побудови структури меню, були взяті ранні напрацювання з теми, описані в статті: Меню «Акордеон» без javascript і зображень.
В оновленій версії, ми будемо використовувати, при формуванні зовнішнього вигляду акордеона, функцію лінійного градієнта, ефекти трансформації відкриваються блоків і активних пунктів меню. Надалі при бажанні, зможете за допомогою магії CSS3, додати трішки розмитою тіні, експериментуючи з властивістю box-shadow.

Меню в стиле Аккордеон

Приклади подивилися, сподіваюся різниця роботи старої і нової версій меню стала очевидною, особливо якщо не забули переглянути і в ІЕшке. Тепер, давайте докладніше розглянемо повний розклад всіх складових нашого «акордеона», базовий html-каркас, і CSS, з допомогою яких, сформуємо зовнішній вигляд і функціональність панелей.

Розмітка HTML

Структура «акордеона» дуже проста, складається з основного контейнера div і пунктів меню у вигляді неупорядкованого списку ul з вбудованими блочними елементами, в яких буде розміщуватися певний зміст.

<div class="accordion">
<ul>
<li>
<h3>Заголовок №1</h3>
<div>
<p>
Тут будь зміст....
</p>
</div>
</li>
<li>
<h3>Заголовок №2</h3>
<div>
<p>
Тут будь зміст....
</p>
</div>
</li>
<li>
<h3>Заголовок №3</h3>
<div>
<p>
Тут будь зміст....
</p>
</div>
</li>
<li>
<h3>Заголовок №4</h3>
<div>
<p>
Тут будь зміст....
</p>
</div>
</li>
</ul>
</div>
  • Заголовок №1

    Тут будь зміст….

  • Заголовок №2

    Тут будь зміст….

  • Заголовок №3

    Тут будь зміст….

  • Заголовок №4

    Тут будь зміст….

Як бачите, каркас меню не містить нічого зайвого, вам залишається тільки, при необхідності, за своїм редагувати пункти(додавати або видаляти) і наповнювати змістом вбудовані блоки div. Для зв’язки нашого «акордеона» з CSS, основним div-контейнера, ми прописали певний клас: class=”accordion”. З цим класом нам і треба працювати .css, щоб сформувати зовнішній вигляд, і оживити розкриваються блоки, без використання javascript.

CSS3

Для оформлення пунктів акордеона, використовуємо функцію лінійного градієнта linear-gradient і ефект тіні для тексту text-shadow в заголовках. Ну, а щоб трохи додати движухи при наведенні і розкриття панелей з вмістом, використовуємо властивість з обойми CSS3 transition. Це ж властивість у зв’язці з padding-left: 30px, застосовуємо до заголовків основних пунктів, домагаючись ефекту ковзання при наведенні.
Як ви розумієте, значення необов’язкові і вам ніхто не заважає експериментувати. Деякі пояснення, безпосередньо в коді CSS, допоможуть вам розібратися.

/* Формуємо блок акордеона */
.accordion {
width: 100%;
max-width: 300px;
margin: 0 auto;
border: 1px solid #d3d3d3;
border-radius: 3px;
overflow: hidden;
}
/* список акордеона */
.accordion>ul {
margin: 0;
padding: 0;
list-style:none;
}
.accordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
height:36px;
max-width: 300px;
/* затримка переходу при розкритті */
transition: height 0.5 s ease-in-out;
-moz-transition: height 0.5 s ease-in-out;
-webkit-transition: height 0.5 s ease-in-out;
-o-transition: height 0.5 s ease-in-out;
}
/* оформляємо пункти */
.accordion>ul>li>h3 {
display:block;
margin: 0 auto;
padding:10px 20px;
color: #6c6c6c;
text-decoration: none;
font: 14px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #fff;
text-transform:uppercase;
background: #c9c9c9;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid #d3d3d3;
/* градієнт */
-ms-filter: "програми:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#c9c9c9')";
background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#c9c9c9));
background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
/* анимируем заголовок */
-o-transition: padding-left 250ms ease-out;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}
/* блок з вмістом */
.accordion>ul>li>div {
background-color:#fcfcfc;
margin: 0 auto;
padding:10px;
color: #555;
font-size: 14px;
height: 100%;
}
.accordion>ul>li:hover {
height: 280px;
}
/* пункти акордеона при наведенні */
.accordion:hover>ul>li:hover>h3 {
/* оформляємо пункти при наведенні */
color: #3A505C;
background: #d3d3d3;
cursor:pointer;
/* градієнт */
background-image: -moz-linear-gradient( top, #d3d3d3, #efefef);
background-image: -ms-linear-gradient( top, #d3d3d3, #efefef);
background-image: -webkit-gradient(linear, left, top, left bottom, from(#d3d3d3), to(#efefef));
background-image: -o-linear-gradient(#dbdbdb, #e6e6e6); /* Opera */
filter: "програми:DXImageTransform.Microsoft.gradient(startColorstr = '#d3d3d3', endColorstr='#efefef')"; /* IE 7 */
-ms-filter: "програми:DXImageTransform.Microsoft.gradient(startColorstr= '#d3d3d3', endColorstr= '#efefef')"; /* IE 8 */
/* рухома посилання */
padding-left: 30px;
}
/* параграфи всередині акордеона */
.accordion p { margin: 0 0 10px }
/* мініатюри зображень */
.accordion img{ width: 25%; height: auto}

/* Формуємо блок акордеона */
.accordion {
width: 100%;
max-width: 300px;
margin: 0 auto;
border: 1px solid #d3d3d3;
border-radius: 3px;
overflow: hidden;
}
/* список акордеона */
.accordion>ul {
margin: 0;
padding: 0;
list-style:none;
}
.accordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
height:36px;
max-width: 300px;
/* затримка переходу при розкритті */
transition: height 0.5 s ease-in-out;
-moz-transition: height 0.5 s ease-in-out;
-webkit-transition: height 0.5 s ease-in-out;
-o-transition: height 0.5 s ease-in-out;
}
/* оформляємо пункти */
.accordion>ul>li>h3 {
display:block;
margin: 0 auto;
padding:10px 20px;
color: #6c6c6c;
text-decoration: none;
font: 14px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #fff;
text-transform:uppercase;
background: #c9c9c9;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid #d3d3d3;
/* градієнт */
-ms-filter: “програми:DXImageTransform.Microsoft.gradient(startColorstr = ‘#f0f0f0’, endColorstr = ‘#c9c9c9’)”;
background-image: -moz-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: -ms-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: -o-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: -webkit-gradient(linear, center top, bottom center, from(#f0f0f0), to(#c9c9c9));
background-image: -webkit-linear-gradient(top, #f0f0f0, #c9c9c9);
background-image: linear-gradient(top, #f0f0f0, #c9c9c9);
/* анимируем заголовок */
-o-transition: padding-left 250ms ease-out;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}
/* блок з вмістом */
.accordion>ul>li>div {
background-color:#fcfcfc;
margin: 0 auto;
padding:10px;
color: #555;
font-size: 14px;
height: 100%;
}
.accordion>ul>li:hover {
height: 280px;
}
/* пункти акордеона при наведенні */
.accordion:hover>ul>li:hover>h3 {
/* оформляємо пункти при наведенні */
color: #3A505C;
background: #d3d3d3;
cursor:pointer;
/* градієнт */
background-image: -moz-linear-gradient( top, #d3d3d3, #efefef);
background-image: -ms-linear-gradient( top, #d3d3d3, #efefef);
background-image: -webkit-gradient(linear, left, top, left bottom, from(#d3d3d3), to(#efefef));
background-image: -o-linear-gradient(#dbdbdb, #e6e6e6); /* Opera */
filter: “програми:DXImageTransform.Microsoft.gradient(startColorstr = ‘#d3d3d3′, endColorstr=’#efefef’)”; /* IE 7 */
-ms-filter: “програми:DXImageTransform.Microsoft.gradient(startColorstr= ‘#d3d3d3’, endColorstr= ‘#efefef’)”; /* IE 8 */
/* рухома посилання */
padding-left: 30px;
}
/* параграфи всередині акордеона */
.accordion p { margin: 0 0 10px }
/* мініатюри зображень */
.accordion img{ width: 25%; height: auto}

Internet Explorer, цей вічний гальмо, не дозволяє веб-розробникам розслабитися, цього разу прожував все, що йому запропонували. Правда, для більш старих версійIE 5.5 — IE IE 7 і 8) , все ж довелося застосувати деякі «милиці», у вигляді фільтрів при створенні ефекту лінійного градієнта в оформленні пунктів «акордеона».

ДемоСкачать

У підсумку, якщо ви уважно вивчіть цей урок і все зробите правильно, не боячись при цьому експериментувати, ви навчитеся створювати чудові блоки навігації в стилі «Акордеон», без використання додаткових файлів зображень і підключення javascript.

З повагою, Андрій Лазаренко /shurawi/