09:21
Как следует из названия, этот простой,но универсальный эффект из чистого перехода с помощью CSS, используя якоря.
Смотрим ДЕМО
Установка:
Этот код вставляем в head и /head:
Code
<script>(function(d){d.className=d.className.replace(/^noJs\b/,'js');}(document.documentElement));</script>
<link rel="stylesheet" type="text/css" href="http://www.paulrhayes.com/css/master.css?5" />
<link rel="alternate" type="application/rss+xml" href="http://feeds.feedburner.com/prhayes" title="Paul R. Hayes RSS feed" />
<link rel="stylesheet" type="text/css" href="http://www.paulrhayes.com/experiments/accordion/css/experiment.css?5" /> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="http://use.typekit.com/fdb0guo.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
Этот код вставляем перед закрывающимся тегом /body:
Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
Это наш аккордеон, вставляем туда , где хотите его лицезреть:
Code
<div id="wrapper">
<!-- ************************** -->
<!-- START OF EXPERIMENT -->
<!-- ************************** -->
<div id="experiment">
<div class="accordion">
<h2>Accordion Demo</h2>
<div id="one" class="section">
<h3>
<a href="#one">Heading 1</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="two" class="section">
<h3>
<a href="#two">Heading 2</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="three" class="section">
<h3>
<a href="#three">Heading 3</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
</div>
</div>
<div id="four" class="section large">
<h3>
<a href="#four">Heading 4</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="five" class="section">
<h3>
<a href="#five">Heading 5</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="six" class="section">
<h3>
<a href="#six">Heading 6</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<!-- ************************** -->
<!-- END OF EXPERIMENT -->
<!-- ************************** -->
</div>
А также в тег замените тег body на это:
Code
<body class="experiment">
