Главная страница   /   10.7. Создание сайдбаров (боковых панелей) (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

10.7. Создание сайдбаров (боковых панелей)

Элемент aside обозначает содержание, которое имеет лишь косвенное отношение к окружающему контенту. Это похоже на боковую рубрику в книге или журнале. Содержание этого элемента имеет косвенное отношение к остальной части страницы, содержанию элементов article или section, но оно не является частью основного информационного потока. Это может быть дополнительный задний фон, набор ссылок на связанные статьи и так далее. В таблице 10-10 представлен элемент aside.

Таблица 10-10: Элемент aside
Элемент aside
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы, но этот элемент не может быть потомком элемента address
Локальные атрибуты Нет
Содержание Элементы style и потоковый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям aside { display: block; }

В листинге 10-8 показано, как используется элемент aside. Я добавил сайдбар к одной из статей и указал стили, чтобы придать ему внешний вид простой боковой рубрики из журнала.

Листинг 10-8: Добавление элемента aside и придание ему стилей
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		h1, h2, h3, article > footer {
			background: grey;
			color: white;
		}

		hgroup > h1 {
			margin-bottom: 0;
			margin-top: 0;
		}

		hgroup > h2 {
			background: grey;
			color: white;
			font-size: 1em;
			margin-top: 0px;
			margin-bottom: 2px;
		}

		body > header *, body > footer * {
			background: transparent;
			color: black;
		}

		article {
			border: thin black solid;
			padding: 10px;
			margin-bottom: 5px;
		}

			article > footer {
				padding: 5px;
				margin: 5px;
				text-align: center;
			}

				article > footer > nav > a {
					color: white;
				}

		body > article > section,
		body > article > section > section {
			margin-left: 10px;
		}

		body > header, body > footer {
			border: medium solid black;
			padding-left: 5px;
			margin: 10px 0 10px 0;
		}

		body > nav {
			text-align: center;
			padding: 2px;
			border: dashed thin black;
		}

			body > nav > a {
				padding: 2px;
				color: black;
			}

		aside {
			width: 40%;
			background: white;
			float: right;
			border: thick solid black;
			margin-left: 5px;
		}

			aside > section {
				padding: 5px;
			}

			aside > h1 {
				background: white;
				color: black;
				text-align: center;
			}
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Things I like</h1>
			<h2>by Adam Freeman</h2>
		</hgroup>
		<nav>
			<h1>Contents</h1>
			<ul>
				<li><a href="#fruitsilike">Fruits I Like</a></li>
				<li><a href="#activitiesilike">Activities I Like</a></li>
			</ul>
		</nav>
	</header>
	<article>
		<header>
			<hgroup>
				<h1 id="fruitsilike">Fruits I Like</h1>
				<h2>How I Learned to Love Citrus</h2>
			</hgroup>
		</header>
		<aside>
			<h1>Why Fruit is Healthy</h1>
			<section>
				Here are three reasons why everyone should eat more fruit:
				<ol>
					<li>Fruit contains lots of vitamins</li>
					<li>Fruit is a source of fibre</li>
					<li>Fruit contains few calories</li>
				</ol>
			</section>
		</aside>
		I like apples and oranges.
		<section>
			<h1 id="morefruit">Additional fruits</h1>
			I also like bananas, mangoes, cherries, apricots, plums,
	peaches and grapes.
			<section>
				<h1>More information</h1>
				You can see other fruits I like <a href="fruitlist.html">here</a>
			</section>
		</section>
		<footer>
			<nav>
				More Information:
				<a href="http://fruit.org">Learn More About Fruit</a>
			</nav>
		</footer>
	</article>
	<article>
		<header>
			<hgroup>
				<h1 id="activitiesilike">Activities I like</h1>
				<h2>It hurts, but I keep doing it</h2>
			</hgroup>
		</header>
		<section>
			<p>
				I like to swim, cycle and run. I am in training for my first
	triathlon, but it is hard work.
			</p>
			<h1 id="tritypes">Kinds of Triathlon</h1>
			There are different kinds of triathlon - sprint, Olympic and so on.
			<section>
				<h1 id="mytri">The kind of triathlon I am aiming for</h1>
				I am aiming for Olympic, which consists of the following:
				<ol>
					<li>1.5km swim</li>
					<li>40km cycle</li>
					<li>10km run</li>
				</ol>
			</section>
		</section>
		<footer>
			<nav>
				More Information:
				<a href="http://triathlon.org">Learn More About Triathlons</a>
			</nav>
		</footer>
	</article>
	<footer id="mainFooter">
		&#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
	</footer>
</body>
</html>

Вы можете увидеть результат использования элемента aside и дополнительных стилей на рисунке 10-11. Я добавил некоторый текст в документ, как показано на рисунке, чтобы сделать основной контекстный поток более очевидным.

Рисунок 10-11: Добавление элемента aside и придание ему стилей