С помощью псевдокласса :target можно создать многое, например, переключение между вкладками с использованием только CSS3. Одним из главных преимуществ кода CSS является то, что можно задавать любые стили коду HTML, так что мы преобразуем ту разметку, чтобы она выглядела как вертикальное разворачивающееся меню.

Посмотрите демонстрацию работы

Этот способ работает в браузерах Internet Explorer от версии 9, Chrome, Firefox, Safari и Opera, и для его работы не требуется JavaScript или изображения. К сожалению, в браузерах Internet Explorer версий 6, 7 и 8 это решения не будет работать, так что можно использоваться, к примеру, библиотеку JavaScript selectivizr или спрятать этот элемент от пользователей и показывать вместо этого сообщение о необходимости обновить браузер.

Код HTML 

Этот код HTML5 близок к коду, использованному для создания переключения между вкладками. Мы только заменили класс статьи на accordion и переименовали некоторые идентификаторы для большей понятности. Еще тут у нас 5 разделов, так как так лучше выглядит:

<article class="accordion">

	<section id="acc1">
		<h2><a href="#acc1">Title One</a></h2>
		<p>This content appears on page 1.</p>
	</section>

	<section id="acc2">
		<h2><a href="#acc2">Title Two</a></h2>
		<p>This content appears on page 2.</p>
	</section>

	<section id="acc3">
		<h2><a href="#acc3">Title Three</a></h2>
		<p>This content appears on page 3.</p>
	</section>

	<section id="acc4">
		<h2><a href="#acc4">Title Four</a></h2>
		<p>This content appears on page 4.</p>
	</section>

	<section id="acc5">
		<h2><a href="#acc5">Title Five</a></h2>
		<p>This content appears on page 5.</p>
	</section>
</article>

Как и там, заголовок раздела, на который можно нажимать, содержится в каждом разделе в теге h2.

Код CSS 

Сначала зададим стили блоку статей и элементам раздела. Каждый раздел сначала закрыт, и его высота равна 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;
} 

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

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;
} 

Посмотрите демонстрацию работы

Этот код CSS проще, чем у переключения между вкладками, и при этом выглядит более интересно. Но вертикальные меню довольно простые, в следующем уроке мы расскажем о том, как сделать еще более интересное горизонтальное меню.

Автор урока Craig Buckler