Меню «Акордеон» без javascript і зображень

56

Меню «Аккордеон» без javascript и изображений

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

Увага!
Дана стаття з плином часу стала неактуальна, так як з’явилася оновлена версія меню «Акордеон», що однаково добре працює у всіх браузерах. Дивіться докладний опис і наочний приклад у новій статті:

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

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

Меню Аккордеон

Перш ніж почнемо розклад всіх складових, можете подивитися роботу меню на живому прикладі, а відкривши вихідний код демо-сторінки, з легкістю в’їдете в тему:

Демо

Розмітка HTML

Розпочнемо роботу зі створення меню з розмітки на сторінці HTML, я впевнений, що багатьох здивує скільки простий код каркаса всього меню. Створимо контейнер div і привласнимо йому id=”accordion”. Кожному пункту меню пропишемо div class=”item”. Заголовки пунктів меню позначимо тегом H3, а зміст блоків з тега P. У прикладі я використовував у змісті блоків меню списки, а значить і в стилі і в розмітці html код буде виглядати дещо інакше. Тут же наведу основу розкладки меню, від чого і можна буде відштовхуватися при подальшої доробки під свої потреби.

<div id="accordion">
<div class="item">
<h3>Новини</h3>
<p>"Одного разу росіяни прокинуться і побачать, що 1 долар став дорівнює 53 грн. І все — ніяких різких коливань. Стабільно 53 рубля."</p>
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>

Новини

“Одного разу росіяни прокинуться і побачать, що 1 долар став дорівнює 53 грн. І все — ніяких різких коливань. Стабільно 53 рубля.”

Основні CSS

З оформленням нашого меню через CSS, труднощів не виникне, все по накатаній і без зайвих викрутасів:

#accordion .item {
width: 400px;
height: 30px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion h3 {
display: block;
height: 20px;
line-height: 20px;
margin: 0px 0px 5px 0px;
background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
}
#accordion div:hover h3 {
border-bottom: 1px solid #ccc;
font-weight: bold;
}

#accordion .item {
width: 400px;
height: 30px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion h3 {
display: block;
height: 20px;
line-height: 20px;
margin: 0px 0px 5px 0px;
background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
}
#accordion div:hover h3 {
border-bottom: 1px solid #ccc;
font-weight: bold;
}

При розміщенні в блоках меню змісту, що включає в себе різного роду списки ( Рубрики, Архіви або Позначки), відповідно варто прописати стилі і для цих елементів

.aleft {
float:left;
width:90px;
}
.aright {
float:left;
width:90px;
}
.arsip li {
float: left;
width: 120px;
}
.clearfix {
display: inline-block;
}

.aleft {
float:left;
width:90px;
}
.aright {
float:left;
width:90px;
}
.arsip li {
float: left;
width: 120px;
}
.clearfix {
display: inline-block;
}

Наприклад, щоб розмістити список рубрик у дві колонки (що логічно), привласнюєте тегу ul клас .aleft для лівої і клас .aright для правої колонки. Загалом від чого танцювати зрозуміло, а далі, це кому як подобається.
Відразу хочу відзначити, що закруглені кути (border-radius) і всі принади CSS3, тормознутый і гаряче не улюблений IE, обробляти відмовляється, у решти людських браузерах (Opera 10.50+, Firefox 3.5+, Safari 3+, Chrome 4+) все виглядає чудово.

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

CSS3 Transition

Ось нарешті ми і підібралися до найцікавішого, а саме з допомогою чого досягається перехід до вмісту блоків меню, тобто сам ефект «акордеон». Кожному пункту меню прописуємо правило CSS transition:

#accordion .item {
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
height: 180px;
}

#accordion .item {
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
height: 180px;
}

Властивість CSS3 Transitions дозволяють призначати зміни властивостей CSS плавно і протягом деякого часу, в нашому конкретному випадку ми використовуємо для відкриття утримання пунктів меню з ефектом затримки 500ms.
CSS3 і HTML5 розвиваються все швидше і швидше, браузери починають підтримувати все більше нових фішок і булочок, CSS3 Transitions як раз з цієї обойми. Так, використання CSS3 для критичних моментів сайту зараз неможливо. Але використовувати його для додавання дрібних, некритичних для проекту деталей цілком реально, можна і потрібно, наше меню «Акордеон» відмінне тому підтвердження.

В довершення всієї виконаної роботи, залишається зібрати воєдино весь отриманий код стилів CSS:

#accordion .item {
width: 400px;
height: 30px;
overflow: hidden;
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion h3{
display: block;
height: 20px;
line-height: 20px;
background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
}
#accordion div:hover {
height: 180px;
}
#accordion div:hover h3 {
border-bottom: 1px solid #ccc;
font-weight: bold;
}

#accordion .item {
width: 400px;
height: 30px;
overflow: hidden;
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion h3{
display: block;
height: 20px;
line-height: 20px;
background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
}
#accordion div:hover {
height: 180px;
}
#accordion div:hover h3 {
border-bottom: 1px solid #ccc;
font-weight: bold;
}

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

Демо
Увага!
Дана стаття з плином часу стала неактуальна, так як з’явилася оновлена версія меню «Акордеон», що однаково добре працює у всіх браузерах. Дивіться докладний опис і наочний приклад у новій статті:

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