Блог
Главная » CSS » SLIDE-TO-TOP аккордеон на CSS3 для uCoz
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

Пользуем на здоровье smile

Категория: CSS

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?