Untitled

dabblet.css

.container
{
	font: 16px/1.5 Helvetica, sans-serif;
	position: relative;
}

.container .menu
{
	position: absolute;
	z-index: 1;
	
	top: 10px;
	left: 10px;
	margin: 0;
	padding: 0;
	list-style: none;	
}

.container .menu li a
{
	display: block;
	
	margin: 2px 0 0 0;	
	padding: 2px 10px;
	
	background: #cfcfcf;
}

.body
{
	position: relative;
	overflow: hidden;
	
	width: 370px;
	height: 500px;
	padding: 10px;
	
	box-shadow: 0 0 6px rgba(0,0,0,0.5)
}


.body div
{
	position: absolute;
	overflow: auto;
	width: 280px;
	height: 480px;
	right: 10px;
	padding: 10px;

	background: #e4e4e4;
	box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
	transition: top 0.3s linear;
}



#a1:target ~ div.a1
{
	top: 10px;
}

#a1:target ~ div.a2
{
	top: 520px;
}

#a1:target ~ div.a3
{
	top: 1040px;
}

#a2:target ~ div.a1
{
	top: -520px;
}

#a2:target ~ div.a2
{
	top: 10px;
}

#a2:target ~ div.a3
{
	top: 520px;
}

#a3:target ~ div.a1
{
	top: -1040px;
}

#a3:target ~ div.a2
{
	top: -520px;
}

#a3:target ~ div.a3
{
	top: 10px;
}

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