Анимированная навигация

dabblet.css

/*
	Анимированная навигация
*/

.container {
	width: 600px;
	border: 1px solid #ccc;
	padding: 10px;
}

.menu {
	float: left;
	margin: -5px 10px 0 0;
	list-style: none;
	padding: 0;
}

.menu li a {
	display: block;
	padding: 10px;
	margin: 5px 0;
	background: #ccc;
}

.body {
	overflow: auto;
}

.a1,
.a2,
.a3 {
	background: #ccc;
	padding: 10px;
	margin: 0 0 10px 0;
	transition-property: height;
	transition-duration: 1s;
}

#a1:target ~ .a2,
#a1:target ~ .a3,
#a2:target ~ .a1,
#a2:target ~ .a3,
#a3:target ~ .a1,
#a3:target ~ .a2 {
	overflow: hidden;
	height: 0;
	padding: 0;
	margin: 0;
}

dabblet.html

<div class="container">	

	<ul class="menu">
		<li><a href="#a1">a1</a></li>
		<li><a href="#a2">a2</a></li>
		<li><a href="#a3">a3</a></li>
	</ul>

	<div class="body">	
		<span id="a1"></span>
		<span id="a2"></span>
		<span id="a3"></span>	
		<div class="a1">
			<h1>a1</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
			<div class="a2">
			<h1>a2</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
			<div class="a3">
			<h1>a3</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
		
	</div>
</div>	

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}