Доброго времени суток, друзья. Предлагаю вашему вниманию оригинальное оформление блоков с информацией в стиле аккордеон и ещё с эффектом слайдера. Способов их применения в блоге очень много. Выгладят они достаточно компактно, внешний вид можно менять на свой вкус.
При нажатии на пункт списка, появляется более подробное описание. Я для примера сделала некоторые пункты меню с описанием и переходом на нужную страницу. Здесь размещать можно всё. Например, сделать вопрос - ответ. Или создать кулинарное меню, разместить загадки и ответы. Масса вариантов.
Посмотрите на тестовом блоге, как это работает.
<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>
<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>
<h5>
О чём блог</h5>
<div>
Все статьи опубликованные статьи блога вы можете посмотреть здесь </div>
</a>
Я в самом коде пометила комментариями, что можно изменить под ваш дизайн.
В первом коде div помечены ссылки на страницы, куда будет осуществляться переход. Если это не предполагается, просто уберите эти строки.
В тегах h5 прописываем свои пункты. Соответственно и в div нужный текст.
В последней части коды, которая отмечена серым, попробуйте вставить вместо фонов картинки в url( ) .
Вот такой необычный аккордеон со слайд эффектом в итоге получаем.
Спасибо за внимание, всем добра и до встречи.
хотите оформить подписку на новые шпаргалки
