|
Представляю на ваше рассмотрение очередной вариант блоков с скрытым содержанием в стиле вертикального «аккордеона», плавно раскрывающихся по клику. В интернетах можно легко найти немало интересных решений по созданию «аккордеонов», как горизонтальных так и вертикальных. Очень популярны компактные, многоуровневые меню в стиле «аккордеон», точно так же, как и раскрывающиеся панели с скрытым контентом, работающих на jQuery или на чистом CSS3.
Не помню уже, где, когда, кому и зачем написал этот простенький плагин, да и вообще, сам ли писал. Но вот достал из пылившегося архива своих наработок, внёс некоторые поправки с учётом современных реалий веб-дизайна и получился ещё один, довольно таки надёжный инструмент для подачи информации.
Для работы «аккордеона» понадобится подключенная библиотека jQuery. Как вы помните, подключить её можно напрямую с серверов Google:
HTML
Отзывчивым, аккордеон я обозвал не просто так. Вся html-конструкция аккордеона, представляет из себя базовый div-контейнер с вложениями, которому определено максимальное значение ширины max-width: 600px; (опционально) при 100% относительно родительского блока, в котором он будет размещён, что делает аккордеон гибким при размещении в различных частях шаблона, будь то боковая панель или контейнер с основным контентом.
В примере максимально-возможную ширину выставил в 600px, которую вы всегда легко сможете изменить в ту или иную сторону, с учётом ваших потребностей.
<!-- блок аккордеон -->
Заголовок Панели №1
Бла-Бла-Бла. Бла-Бла-Бла..
Заголовок Панели №2
Бла-Бла-Бла.. Бла-Бла-Бла...
Заголовок Панели №3
Бла-Бла-Бла.. Бла-Бла-Бла...
<!-- конец блока аккордеон --> |
CSS
Как писал выше, базовый блок аккордеона сделал, что называется «резиновым». Цветовую палитру, для оформления панелей, подобрал из состава материального дизайна от google, тренд нынче такой, понимаешь ли))). В данном примере, панели заголовков выполнены с зелёным оттенком, вы можете выбрать любой другой из состава палитры: <!--noindex-->Тынц »<!--/noindex-->
В остальном всё без особых изысков и ненужных ляповатостей.
Для параграфов
Переключатели панелей сформировал с помощью псевдоэлемента :before, выполнил в виде стрелок, сменяющих направление при активации панелей.
Коротенькие комментарии прямо в коде css, помогут вам разобраться какой селектор за что отвечает и понять в общем, что куда и зачем.
/* стили блока аккордеон */
.accordion {
width:100%;
max-width: 600px;
margin: 0 auto
}
/* секции аккордеона */
.accordion .accordion_item {
margin-bottom:1px;
position:relative
}
/* заголовки панелей аккордеона */
.accordion .title_block {
font-weight: 400;
font-size: 18px;
color: #eee;
cursor:pointer;
background: #009688;
padding:10px 55px 10px 15px;
-webkit-transition:all .2s linear 0;
-webkit-transition-delay:.2s 0;
transition:all .2s linear 0
}
/* переключатель панелей, положение вниз */
.accordion .title_block:before {
content:'';
height:8px;
width:8px;
display:block;
border:2px solid #fefefe;
border-right-width:0;
border-top-width:0;
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
position:absolute;
right:20px;
top:18px
}
/* активный переключатель, положение вверх */
.accordion .active_block .title_block:before {
border:2px solid #fefefe;
border-left-width:0;
border-bottom-width:0;
top:18px
}
.accordion .title_block:hover {
background: #26A69A
}
/* заголовок активного блока */
.accordion .active_block .title_block {
background: #26A69A;
color:#fefefe
}
/* блоки с содержанием */
.accordion .info {
display:none;
padding:10px 15px;
overflow: hidden;
background:#f7f7f7
}
/* параграф внутри блоков с содержанием */
.accordion .info_item {
margin-bottom:10px
}
/* картинки внутри аккордеона */
.accordion .info thumb {
height: auto;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* полноразмерная картинка */
.large-thumb {
width: 100%;
margin-bottom: 10px;
}
/* миниатюра слева */
.thumb-left {
width: 25%;
float:left;
margin:5px 15px 5px 0;
}
/* миниатюра справа */
.thumb-right {
width: 25%;
float:right;
margin:5px 0 5px 15px;
} |
Для расширения базового функционала «аккордеона» по умолчанию, прописал отдельные стили для изображений. Картинки в секциях, вы можете отправить, как влево, так и вправо, для этого достаточно добавить тегу thumb соответствующий класс class="thumb-left" или class="thumb-right". В результате получите встроенные в текст миниатюры. Позиционирование изображений определяется через float: right и float: left соответственно.
Для полноразмерных изображений выставил 100% ширину, с отступом от нижнего края в 10px.
Значения ширины в %, обеспечивает возможность пропорционального изменения картинок, при изменении размеров базового контейнера «аккордеона». Конечно же, никто и ничто не мешает вам использовать фиксированные размеры изображений:)
jQuery
С внешним видом нашего «аккордеона» и фаршем html/css кода мы разобрались. Остаётся только всё это дело завести, т.е. сделать так, чтобы панели раскрывались и схлопывались по клику, а поможет нам в этот раз, небольшая магия jQuery. Как в этом деле обойтись исключительно средствами CSS3, можно узнать из моих предыдущих уроков: так или же вот так
И так, основную библиотеку javascript jQuery подключить вы надеюсь не забыли, теперь к документу html подключим небольшой, исполняемый js, через функции которого, и обеспечим надёжную движуху нашего аккордеона:
<</span>script type="text/javascript"<span style="color: #339933;">>
! function(i) {
var o, n;
i(".title_block").on("click", function() {
o = i(this).parents(".accordion_item"), n = o.find(".info"),
o.hasClass("active_block") ? (o.removeClass("active_block"),
n.slideUp()) : (o.addClass("active_block"), n.stop(!0, !0).slideDown(),
o.siblings(".active_block").removeClass("active_block").children(
".info").stop(!0, !0).slideUp())
})
}(jQuery);
|
Если ничего не упустил, то на этом наверное и всё. Отзывчивый «до жути» и вполне себе автономный «аккордеон», полностью готов к работе.
Покопаться в коде можно здесь
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Перейти обратно к новости
|