Создание горизонтального разворачивающегося меню с помощью псевдокласса :target

3 июля 2015 | Опубликовано в css | Нет комментариев »

С помощью псевдокласса :target можно создать очень многое, например, интересные интерактивные элементы, которые раньше требовали сложных скриптов JavaScript. Мы уже создавали переключение между вкладками и вертикальное разворачивающееся меню. В этом уроке мы расскажем о создании горизонтального разворачивающегося меню с помощью той же разметки HTML5.

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

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

Код HTML

Этот код HTML5 такой же, как код, использованный для создания вертикального разворачивающегося меню: несколько элементов разделов с нажимаемыми заголовками, содержащих теги h2:

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

Код CSS

Этот код CSS немного более сложный, но он того стоит. Сначала зададим стили внешнему блоку статей:

article.accordion
{
	display: block;
	width: 43em;
	margin: 0 auto;
	background-color: #666;
	overflow: auto;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

Каждый раздел сначала закрыт, разделы всплывают влево и их ширина — 2em. Значение свойства переполнения задано как скрытое, а также цвет текста такой же, как цвет фона, чтобы блоки выглядели пустыми:

article.accordion section
{
	position: relative;
	display: block;
	float: left;
	width: 2em;
	height: 12em;
	margin: 0.5em 0 0.5em 0.5em;
	color: #333;
	background-color: #333;
	overflow: hidden;
	border-radius: 3px;
}

Теперь перейдем к более сложному коду CSS3 с приставками производителей. У каждого тега h2 название поворачивается на 90 градусов против часовой стрелки при помощи свойства трансформации и абсолютного позиционирования над закрытым блоком раздела:

article.accordion section h2
{
	position: absolute;
	font-size: 1em;
	font-weight: bold;
	width: 12em;
	height: 2em;
	top: 12em;
	left: 0;
	text-indent: 1em;
	padding: 0;
	margin: 0;
	color: #ddd;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
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
{
	width: 30em;
	padding: 0 1em;
	color: #333;
	background-color: #fff;
}
article.accordion section:target h2
{
	position: static;
	font-size: 1.3em;
	text-indent: 0;
	color: #333;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

Все готово, но добавим переход 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;
}

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

К сожалению, пользователи старых версий браузера Internet Explorer, таких как 6, 7 и 8, не смогут увидеть этот интерактивный элемент. Пользователи браузера Internet Explorer версии 9 не увидят анимацию. Но чтобы создать такой эффект с помощью JavaScript, понадобится очень много времени и терпения. Попробуйте поэкспериментировать с приведенными примерами.

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

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

Смотрите также:

Опубликовано в css, июля 3, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

Создание горизонтального разворачивающегося меню с помощью псевдокласса :target

Код HTML

Код CSS

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые