реализовать анимированную

dabblet.css

/*
	реализовать анимированную 
	навигацию по div.a1
	без перезагрузки страницы
	с поддержкой истории послещений
	
	http://clck.ru/d/nEyP0z8x143w5
*/
body
{
	font-family: Arial, sans-serif;
	padding: 10px;
}

.container
{
	position: relative;
	overflow: hidden;

	width: 350px;
	height: 500px;
	
	box-shadow: 0 0 10px 0 #999;	
}

.container ul
{
	position: absolute;
	left: 10px;
	top: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.container li
{
	background: #CCC;
	margin-bottom: 2px;
	padding: 5px 10px;
}

.body div
{
	position:absolute;
	top: 10px;
	left: 60px;
	
	height: 460px;
	margin-right: 10px;
	overflow-y: auto;
	padding: 10px;
	line-height: 1.5;
	background: #E4E4E4;
	box-shadow: inset 0 0 4px #999;
}

/* Дефолтное состояние */
/* Выбран a1 */
.body .a1
{
	top: 10px;
}
.body .a2
{
	top: 520px;
}
.body .a3
{
	top: 1040px;
}
#a1:target ~ div,
#a2:target ~ div,
#a3:target ~ div 
{
	transition: top 0.3s linear;
}
/* Выбран a2 */
#a2:target ~ .a2
{
	top: 10px;
}
#a2:target ~ .a1
{
	top: -520px;
}
#a2:target ~ .a3
{
	top: 520px;
}
/* Выбран a3 */
#a3:target ~ .a3
{
	top: 10px;
}
#a3:target ~ .a1
{
	top: -1040px;
}
#a3:target ~ .a2
{
	top: -520px;
}

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