23.05.12

Простий вертикальний CSS3 акордеон

На деяких сайтах потрібно приховати текст і показувати його тільки при наведені або натискані на елемент. В таких випадках можна використовувати таби (закладки). Пропоную Вам CSS рішення без використання JavaScript чи зображень. З допомогою цього рішення ви можете зробити красиві вертикальні розсувні таби (вертикальний акардеон). Це рішення працює на IE9, Chrome, Firefox, Safari і Opera. На таких браузерах як IE6, 7 і 8 код не буде виглядати жахливо, і не зіпсує загальний дизайн сайту.

HTML

 Для початку ми створюємо простий HTML код. Задаємо пять секцій, в які будемо вносити наш текст.

Заголовок кожної секції section розміщений у тегу H2.

CSS

Для початку ми створюємо стиль для контейнера article і елементів section. Кожна секція показується в закритому стані з висоою 2em.
article.accordion
{
 display: block;
 width: 30em;
 padding: 0.5em 0.5em 1px 0.5em;
 margin: 0 auto;
 background-color: #666;
 border-radius: 5px;
 box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}
article.accordion section
{
 display: block;
 width: 28em;
 height: 2em;
 padding: 0 1em;
 margin: 0 0 0.5em 0;
 color: #333;
 background-color: #333;
 overflow: hidden;
 border-radius: 3px;
}
Стиль назви розділу залежить від того в якому стані секція, закритому чи відритому.
article.accordion section h2
{
 font-size: 1em;
 font-weight: bold;
 width: 100%;
 line-height: 2em;
 padding: 0;
 margin: 0;
 color: #ddd;
}
article.accordion section h2 a
{
 display: block;
 width: 100%;
 line-height: 2em;
 text-decoration: none;
 color: inherit;
 outline: 0 none;
}
Тепер ми можемо “відкрити” активну секцію використовуючи :target тег. Ми встановили більшу висоту і колір фону, і збільшили заголовок секції.
article.accordion section:target
{
 height: 15em;
 background-color: #fff;
}
article.accordion section:target h2
{
 font-size: 1.6em;
 color: #333;
}
При необхідності ви можете встановити .висоту section auto таким чином не буде пустого місця внизу.
article.accordion section,
article.accordion section h2
{
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -ms-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}
В кінцевому результаті у Вас має получитись щось схоже як на картинці.

  • rss
  • Del.icio.us
  • Digg
  • Twitter
  • StumbleUpon
  • Reddit
  • Share this on Technorati
  • Post this to Myspace
  • Share this on Blinklist
  • Submit this to DesignFloat

1 коментар(ів):

Дописати коментар

 
Copyright 2011 St@sDesign