Аккордеон на CSS3
В данном уроке мы создадим аккордеон для изображений,
который будет раскрывать картинки по нажатию кнопки мыши. С помощью
комбинаторов соседей и вложенной структуры мы можем управлять открыванием
слайдов с помощью радио кнопок.
СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК
Разметка HTML
Основная идея заключается в создании вложенной структуры,
которая позволяет просто перемещать соответствующий слайд в одну сторону, а
вместе с ним будут смещаться и все вложенные слайды. Каждый элемент имеет
изображение, радиокнопку для контроля процесса открывания слайда и заголовок.
01
<div class="ia-container">
02
03
<figure>
04
<img src="images/1.jpg"
alt="image01" />
05
<input type="radio"
name="radio-set" checked="checked" />
06
<figcaption><span>Настоящие цвета</span></figcaption>
07
08
<figure>
09
<img
src="images/2.jpg" alt="image02" />
10
<input
type="radio" name="radio-set" />
11
<figcaption><span>Нежный
свет</span></figcaption>
12
13
<figure>
14
<!-- ... -->
15
16
<figure>
17
<!-- ... -->
18
19
<figure>
20
<!-- ... -->
21
22
<figure>
23
<!-- ... -->
24
25
<figure>
26
<!-- ...
-->
27
28
<figure>
29
<!-- ... -->
30
</figure>
31
32
</figure>
33
34
</figure>
35
36
</figure>
37
38
</figure>
39
40
</figure>
41
42
</figure>
43
44
</figure>
45
46
</div>
CSS
Устанавливаем для слайда ширину и скрываем выступающие части
с помощью свойства overflow: hidden.
1
.ia-container {
2
width: 685px;
3
margin: 20px auto;
4
overflow: hidden;
5
box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
6
border: 7px solid rgba(255,255,255,0.6);
7
}
Ширина вычисляется следующим образом:
( (количество изображений - 1) * 50px ) + 335px
где 50 - ширина видимой части изображения, а 335 - полная
ширина изображения. Для нашего случая значение будет ( (8 – 1) * 50px ) +
335px = 350px + 335px = 685px.
Каждая картинка имеет значение для свойства left 50 px
(видимая часть). это положение относительно родительского элемента. В
резульатате получается вид аккордеона. Ширина изображения 335 px. Также
используются переходы для плавного перемещения.
1
.ia-container figure {
2
position: absolute;
3
top: 0;
4
left: 50px; /* ширина видимой части */
5
width: 335px;
6
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
7
transition: all 0.3s ease-in-out;
8
}
Первое изображение позиционируется полностью слева.
Используем директиву !important, потому что позже будут определяться медиа
запросы, а для данного изображения нужно иметь значение свойства left
равным 0. Используем относительное позиционирование, чтобы задать слайду
высоту:
1
.ia-container > figure {
2
position: relative;
3
left: 0 !important;
4
}
Изображение имеет ширину 100% для заполнения всего
доступного пространства:
1
.ia-container img {
2
display: block;
3
width: 100%;
4
}
Каждая радио кнопка покрывает все видимое пространство
слайда. Устанавливаем непрозрачность равную 0, чтобы делать невидимой при
сохранении функционала. Значение свойства z-index должно быть большим, чтобы
кнопка находилась поверх всего:
01
.ia-container input {
02
position: absolute;
03
top: 0;
04
left: 0;
05
width: 50px; /* покрываем видимую часть */
06
height: 100%;
07
cursor: pointer;
08
border: 0;
09
padding: 0;
10
opacity: 0;
11
z-index: 100;
12
-webkit-appearance: none;
13
-moz-appearance: none;
14
appearance: none;
15
}
Когда элемент ввода выбран или нажат, он должен исчезнуть. В
действительности, можно было бы установить свойство width: 0px, но из-за
странного поведения браузера Chrome нужно оставлять кнопку справа (следующий
элемент не воспринимает событие hover, если событие не возникло на предыдущем
элементе). Также соседние слайды будут смещаться влево с переходами:
1
.ia-container input:checked{
2
width: 5px;
3
left: auto;
4
right: 0px;
5
}
6
.ia-container input:checked ~ figure {
7
left: 335px;
8
transition: all 0.7s ease-in-out;
9
}
Определяя два времени длительности перехода (одно для
состояния по умолчанию, а другое для отмеченного состояния) мы получаем эффект
"перетасовки”. Настраивая данные значения можно добиться других эффектов.
Заголовок будет покрывать весь элемент прозрачным темным
слоем, и элемент span позиционируется в верхней половине изображения:
01
.ia-container figcaption {
02
width: 100%;
03
height: 100%;
04
background: rgba(87, 73, 81, 0.1);
05
position: absolute;
06
top: 0px;
07
transition: all 0.2s linear;
08
}
09
10
.ia-container figcaption span {
11
position: absolute;
12
top: 40%;
13
margin-top: -30px;
14
right: 20px;
15
left: 20px;
16
overflow: hidden;
17
text-align: center;
18
background: rgba(87, 73, 81, 0.3);
19
line-height: 20px;
20
font-size: 18px;
21
opacity: 0;
22
text-transform: uppercase;
23
letter-spacing: 4px;
24
font-weight: 700;
25
padding: 20px;
26
color: #fff;
27
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
28
}
Когда слайд выделяется, удаляем покрывающий слой,
устанавливая непрозрачность для значения RGBA равной 0:
1
.ia-container input:checked + figcaption,
2
.ia-container input:checked:hover + figcaption{
3
background: rgba(87, 73, 81, 0);
4
}
Элемент span будет проявляться и выскальзывать сверху с
задержкой (сначала должен открыться слайд):
1
.ia-container input:checked + figcaption span {
2
transition: all 0.4s ease-in-out 0.5s;
3
opacity: 1;
4
top: 50%;
5
}
Так как последний слайд не имеет других, следующих за ним
справа слайдов, то длительная задержка не нужна:
1
.ia-container #ia-selector-last:checked + figcaption span {
2
transition-delay: 0.3s;
3
}
Когда курсор мыши наводится на видимую часть закрытого
слайда, нужно создавать эффект выделения. Но радиокнопка покрывает всю видимую
часть, поэтому приходится использовать селектор комбинатор соседей (нужно.
чтобы элемент ввода располагался непосредственно за элементом заголовка):
1
.ia-container input:hover + figcaption {
2
background: rgba(87, 73, 81, 0.03);
3
}
Все следующие соседи отмеченного элемента ввода должны иметь
малое значение z-index, чтобы предотвратить непонятное поведение в Chrome:
1
.ia-container input:checked ~ figure input{
2
z-index: 1;
3
}
В завершение добавляем несколько медиа запросов, чтобы
сделать аккордеон адаптивным:
01
@media screen and (max-width: 720px) {
02
.ia-container {
03
width: 540px;
04
}
05
06
.ia-container figure {
07
left: 40px;
08
width: 260px;
09
}
10
11
.ia-container input {
12
width: 40px;
13
}
14
15
.ia-container input:checked ~ figure {
16
left: 260px;
17
}
18
19
.ia-container figcaption span {
20
font-size: 16px;
21
}
22
}
23
24
@media screen and (max-width: 520px) {
25
.ia-container {
26
width: 320px;
27
}
28
29
.ia-container figure {
30
left: 20px;
31
width: 180px;
32
}
33
34
.ia-container input {
35
width: 20px;
36
}
37
38
.ia-container input:checked ~ figure {
39
left: 180px;
40
}
41
42
.ia-container figcaption span {
43
font-size: 12px;
44
letter-spacing: 2px;
45
padding: 10px;
46
margin-top: -20px;
47
}
48
49
}
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/06/06/image-accordion-with-css3/
Перевел: Сергей Фастунов
| 
