Если ты в разработке делаешь упор на юзабилити, аккордеон — именно то решение, которое поможет тебе организовать контент. Основное преимущество аккордеона — возможность разместить большое количество контента на ограниченном пространстве.



Хорошая новость: красивый и простой анимированный аккордеон можно реализовать на чистом CSS3, используя псевдокласс :target и переходы transition.

Плохая новость: кое-кого из майкрософтовских детищ опять придется обеспечить костылями. Но об этом в конце статьи.

Решение

Каждая секция аккордеона представлена тегом section (логично, правда?). Секция разделяется на заголовок и контент:
HTML

	<div class="accordion">
	      <section id="one">
	              <h1><a href="#one">Heading 1</a></h1>
	              <div>
	                      <p>content</p>
	              </div>
	      </section>
	</div>

Привожу только часть CSS, отвечающую за работу аккордеона.
CSS

	.accordion h1 + div{
	      height: 0;
	      overflow: hidden;
	      -moz-transition: height 0.3s ease-in-out;
	      -webkit-transition: height 0.3s ease-in-out;
	      -o-transition: height 0.3s ease-in-out;
	      transition: height 0.3s ease-in-out;
	}
	.accordion :target h1 + div{
	      height: 100px;
	}

Проверено в:
IE 9
Opera 10.5
Firefox 3+
Safari 4+
Chrome

Внимание! Не работает в:
IE 6-8

Кроссбраузерное решение на jQuery

Костыль для IE6-8 можно подобрать на свой вкус. В данном случае я не вижу необходимости учить эти браузеры псевдоклассу :target. Давай просто продублируем функционал — обеспечим разворот нужного блока контента.

И, конечно, не забудь подключить html5shiv, ведь мы использовали HTML5!

Проверено в:
IE 6-9
Opera 10.5
Firefox 3+
Safari 4+
Chrome

Вывод

Это решение, как и практически все решения на чистом CSS3, к сожалению, работает не во всех браузерах. Но, все же «CSS3 + js костыль для IE», это лучше, чем «js для всех».

Посему имеем вполне жизнеспособный прием и вместе ждем отмирания старых браузеров.

Добавлено: 16 Августа 2013 02:29:42 Добавил: Андрей Ковальчук Нравится 0

Добавить