Skip to content

Instantly share code, notes, and snippets.

@smmurf
Forked from tyv/dabblet.css
Created May 12, 2012 09:46
Show Gist options
  • Save smmurf/2665581 to your computer and use it in GitHub Desktop.
Save smmurf/2665581 to your computer and use it in GitHub Desktop.
Анимированная навигация
/*
Анимированная навигация
*/
.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;
}
<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