блоки с эффектом аккордеона

Доброго времени суток, друзья. Предлагаю вашему вниманию оригинальное оформление блоков с информацией в стиле аккордеон и ещё с эффектом слайдера. Способов их применения в блоге очень много. Выгладят они достаточно компактно, внешний вид можно менять на свой вкус.

При нажатии на пункт списка, появляется более подробное описание. Я для примера сделала некоторые пункты меню с описанием и переходом на нужную страницу. Здесь размещать можно всё. Например, сделать вопрос - ответ. Или создать кулинарное меню, разместить загадки и ответы. Масса вариантов. 

Посмотрите на тестовом блоге, как это работает.

Демонстрация 

Даю код целиком и разберём его ниже

<div id="page-wrap">
<h1>
Некоторые пункты меню </h1>
<br />
<br />
<section class="slide-up-boxes">
    <a href="http://www.shpargalochki.ru/p/blog-page_1.html">
     <h5>
О чём блог</h5>
<div>
Все статьи опубликованные статьи блога вы можете посмотреть здесь </div>
</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_84.html">
     <h5>
Вопрос - ответ</h5>
<div>
На этой странице вы сможете задать вопросы автору блогу</div>
</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_34.html">
     <h5>
Связь с автором</h5>
<div>
Если возникла необходимость связаться с автором блога , то вам сюда</div>
</a>
   </section>
  </div>
<style>
* { margin: 0; padding: 0; }

body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }

p { margin: 0 0 20px 0; }

a { text-decoration: none; }

.slide-up-boxes a {
  display: block;
  height: 130px;
  margin: 0 0 20px 0;
  background: rgba(192, 192, 192, 0.5); /*цвет фона блоков */
  border: 4px solid #556B2F;/*размер и цвет рамки */
  height: 65px;
  overflow: hidden;
}

/* стили для пунктов аккордеона */

.slide-up-boxes h5 {

  color: #333;
  text-align: center;
  height: 65px;
  font: italic 18px/65px Georgia, Serif;
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 {
  margin-top: -65px;
  opacity: 0;
}

/* стили всплывающих блоков */
.slide-up-boxes div {
  position: relative;
  color: blak;
  font: 12px/15px Georgia, Serif;
  height: 45px;
  padding:10px ;
  opacity: 0;
  -webkit-transform: rotate(6deg);
  -webkit-transition: all 0.4s linear;
  -moz-transform: rotate(6deg);
  -moz-transition: all 0.4s linear;
  -o-transform: rotate(6deg);
  -o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
  opacity: 1;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url() 17px 17px no
-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url() 21px 10px no-
repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url() 14px 16px no-
repeat; padding-left: 133px; }
</style>

Готовый код можно установить и в сообщении блога в формате HTML, и в гаджет HTML/JavaScript ( как вы видели на моём тестовом).
При необходимости добавляйте ещё секции вида

  <a href="http://www.shpargalochki.ru/p/blog-page_1.html">
     <h5>
О чём блог</h5>
<div>
Все статьи опубликованные статьи блога вы можете посмотреть здесь </div>
</a>

Я в самом коде пометила комментариями, что можно изменить под ваш дизайн.
В первом коде div помечены ссылки на страницы, куда будет осуществляться переход. Если это не предполагается, просто уберите эти строки.
В тегах h5 прописываем свои пункты. Соответственно и в div нужный текст.
В последней части коды, которая отмечена серым, попробуйте вставить вместо фонов картинки в url( ) .

Вот такой необычный аккордеон со слайд эффектом в итоге получаем.

Спасибо за внимание, всем добра и до встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :