20:07
Интересные CSS3 переходы; появляющаяся , вращающаяся стрелка ; Аккордеон будет гибким, то есть ширина аккордеона будет подстраиваться под размер экрана. Ширина аккордеона составляет 90% от ширина самого экрана.
Смотрим ДЕМО
Установка:
Default!
Вставляем между head и /head:
Code
<link rel="stylesheet" type="text/css" href="/accordion/css/demo.css" />
<link rel="stylesheet" type="text/css" href="/accordion/css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />
<noscript>
<style>
.st-accordion ul li{
height:auto;
}
.st-accordion ul li > a span{
visibility:hidden;
}
</style>
</noscript>
Это ставим перед закрывающимся тегом /body:
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/accordion/js/jquery.accordion.js"></script>
<script type="text/javascript" src="/accordion/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#st-accordion').accordion();
});
</script>
Этот код ставим после body:
Code
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<li>
<a href="#">About<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<img src="images/1.jpg" alt="image01"/>
<img src="images/2.jpg" alt="image02"/>
<img src="images/3.jpg" alt="image03"/>
<img src="images/4.jpg" alt="image04"/>
<img src="images/5.jpg" alt="image05"/>
<img src="images/6.jpg" alt="image06"/>
</div>
</li>
<li>
<a href="#">Admissions<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<img src="images/7.jpg" alt="image07"/>
<img src="images/8.jpg" alt="image08"/>
<img src="images/9.jpg" alt="image09"/>
<img src="images/10.jpg" alt="image10"/>
<img src="images/11.jpg" alt="image11"/>
<img src="images/12.jpg" alt="image12"/>
</div>
</li>
</ul>
</div>
</div>
Autocollapse!
Ставим между head и /head:
Code
<link rel="stylesheet" type="text/css" href="/accordion/css/demo.css" />
<link rel="stylesheet" type="text/css" href="/accordion/css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />
<noscript>
<style>
.st-accordion ul li{
height:auto;
}
.st-accordion ul li > a span{
visibility:hidden;
}
</style>
</noscript>
Перед /body вставим:
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/accordion/js/jquery.accordion.js"></script>
<script type="text/javascript" src="/accordion/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#st-accordion').accordion({
oneOpenedItem : true
});
});
</script>
После body вставляем:
Code
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<li>
<a href="#">Photography<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<img src="images/1.jpg" alt="image01"/>
<img src="images/2.jpg" alt="image02"/>
<img src="images/3.jpg" alt="image03"/>
<img src="images/4.jpg" alt="image04"/>
<img src="images/5.jpg" alt="image05"/>
<img src="images/6.jpg" alt="image06"/>
</div>
</li>
<li>
<a href="#">Web Design<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<img src="images/7.jpg" alt="image07"/>
<img src="images/8.jpg" alt="image08"/>
<img src="images/9.jpg" alt="image09"/>
<img src="images/10.jpg" alt="image10"/>
<img src="images/11.jpg" alt="image11"/>
<img src="images/12.jpg" alt="image12"/>
</div>
</li>
<li>
<a href="#">Illustrations<span class="st-arrow">Open or Close</span></a>
<div class="st-content">
<p>O my friend - but it is too much for my strength - I sink under the weight of the splendour of these visions!</p>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
</li>
</ul>
</div>
</div>
Из прикрепленного архива заливаем в соответствующие папки accordion/css, /accordion/js, /accordion/images
Пользуем на здоровье
