Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
20-03-2016, 15:45
Отзывчивый аккордеон с помощью jQuery - «Самоучитель CSS»
Рейтинг:
Категория: Самоучитель CSS

Представляю на ваше рассмотрение очередной вариант блоков с скрытым содержанием в стиле вертикального «аккордеона», плавно раскрывающихся по клику. В интернетах можно легко найти немало интересных решений по созданию «аккордеонов», как горизонтальных так и вертикальных. Очень популярны компактные, многоуровневые меню в стиле «аккордеон», точно так же, как и раскрывающиеся панели с скрытым контентом, работающих на 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 и поделитесь ссылкой на запись в своих соц-сетях:


Теги: CSS */.accordion аккордеон можно можете jQuery

Просмотров: 907
Комментариев: 0:   20-03-2016, 15:45
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle