Skip to content

Instantly share code, notes, and snippets.

@Flackus
Forked from anonymous/dabblet.css
Created July 17, 2012 15:36
Show Gist options
  • Save Flackus/3130153 to your computer and use it in GitHub Desktop.
Save Flackus/3130153 to your computer and use it in GitHub Desktop.
реализовать анимированную
/*
реализовать анимированную
навигацию по 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;
}
<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>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment