С помощью псевдокласса :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 ="acc1"
		<h2><a ="#acc1"Title One</a></h2>
		<p>This content appears on page 1.</p>
	/section>

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

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

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

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

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

Код CSS

Сначала зададим стили блоку статей и элементам раздела. Каждый раздел сначала закрыт, и его высота равна 2em, обратите внимание, что значение свойства переполнение задано как скрытое:

article.accordion

	display: block;
	width: ;
	padding:    ;
	margin:  ;
	background-color: ;
	border-radius: ;
	box-shadow:    rgba,,,;

article.accordion section

	display: block;
	width: ;
	height: ;
	padding:  ;
	margin:    ;
	color: ;
	background-color: ;
	overflow: hidden;
	border-radius: ;

Теперь название раздела будет занимать все доступное место в закрытом состоянии:

article.accordion section h2

	font-size: ;
	font-weight: ;
	width: ;
	line-height: ;
	padding: ;
	margin: ;
	color: ;

article.accordion section h2 a

	display: block;
	width: ;
	line-height: ;
	text-decoration: ;
	color: inherit;
	outline:  ;

А теперь можно задать стили для развернутого состояния активного раздела с помощью псевдокласса :target. Мы задаем большую высоту и цвет фона, после чего увеличиваем и меняем цвет и у названия:

article.accordion section:target

	height: ;
	background-color: ;

article.accordion section:target h2

	font-size: ;
	color: ;

При необходимости можно задать высоту раздела автоматической, чтобы использовался наименьший подходящий размер. Но тогда не получится добавить интересный эффект переходов 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

Перевод — Дежурка