В данном уроке мы разберемся, как создать такой популярный элемент дизайна веб страниц как аккордеон с использованием только HTML и CSS (будет добавлено немного CSS3 для организации перехода между слайдами). В итоге мы получим код для двух вариантов аккордеона - горизонтального и вертикального.
Горизонтальный аккордеон
Начнем с разметки для горизонтального аккордеона. Она не содержит ничего специфического, только обычный код HTML:
<ul class="accordion">
<li class="slide-01">
<div>
<h2>Слайд №1</h2>
<p> . . . </p>
</div>
</li>
<li class="slide-02">
<div>
<h2>Слайд №2</h2>
<p> . . . </p>
</div>
</li>
<li class="slide-03">
<div>
<h2>Слайд №3</h2>
<p> . . . </p>
</div>
</li>
<li class="slide-04">
<div>
<h2>Слайд №4</h2>
<p> . . . </p>
</div>
</li>
<li class="slide-05">
<div>
<h2>Слайд №5</h2>
<p> . . . </p>
</div>
</li>
</ul>
Мы используем простой неупорядоченный список, который содержит несколько элементов с классами. Все просто. А CSS код превращает разметку в то, что нам нужно:
/*------------------------------------*\
АККОРДЕОН
\*------------------------------------*/
.accordion{
width:940px;
overflow:hidden;
list-style:none;
margin-bottom:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.25);
background:blue;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
.accordion li{
float:left;
width:20%;
overflow:hidden;
height:250px;
-moz-transition:all 0.2s ease-out;
-webkit-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
-moz-transition-delay:0.15s;
-webkit-transition-delay:0.15s;
-o-transition-delay:0.15s;
transition-delay:0.15s;
}
.accordion li:first-of-type{
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.accordion div{
padding:10px;
}
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:60%;
}
.slide-01 { background:red; color:white; }
.slide-02 { background:orange; color:white; }
.slide-03 { background:yellow; color:#333; text-shadow:none; }
.slide-04 { background:green; color:white; }
.slide-05 { background:blue; color:white; }
Все достаточно просто и очевидно. Сначала мы определяем класс .accordion для элемента <ul>, где задается ширина и скрытие выступающего за рамки элемента контента, а также некоторые другие правила для стилизации внешнего вида.
Затем мы смещаем пункты списка влево, задаем для них ширину 20% (100% ÷ 5 = 20%) и устанавливаем свойство overflow:hidden;, чтобы ничего не выступало за рамки элемента. Также устанавливается фиксированная высота, которая отлично подходит для размещения контента при разворачивании пункта списка.
Для динамического эффекта при разворачивании пункта списка мы устанавливаем время перехода 0.2 секунды и эффект плавного перехода.
Затем используются очень полезные селекторы :first- и :last-of-type для задания скругленных углов слева вверху и внизу для первого пункта списка и справа вверху и внизу для последнего пункта списка соответственно.
Затем мы устанавливаем отступ в 10 px для элемента <div>. Можно, конечно, утверждать, что элемент <div> является внешним, и мы можем просто добавить отступ к элементам <li>. Однако, при использовании процентного указания ширины придется использовать коэффициент для расчета ширины отступа.
Теперь мы устанавливаем функционал аккордеона:
.accordion:hover li{
width:10%;
}
Данное правило утверждает следующее: как только курсор мыши окажется над элементом <ul>, нужно сделать все элементы <li> шириной 10%.
Таким образом, мы получим 5 × 10% = 50%. 5 слайдов шириной 10% в списке. То есть у нас есть 50% свободного пространства для того, чтобы заполнить его пунктом списка, над которым находится курсор мыши.
10% пункта списка + 50% свободного пространства = 60%
Теперь мы просто устанавливаем правило: пункт списка, над которым находится курсор мыши, надо сделать шириной 60%:
.accordion li:hover{
width:60%;
}
В целом функционал использует два правила и расшифровывается так: когда курсор мыши находится над списком, нужно установить ширину всех пунктов списка равной 10% ширины элемента <ul>, но тот элемент <li> , над которым находится курсор мыши, надо сделать шириной 60%.
10% + 10% + 10% + 10% + 60% = 100%
Последний блок кода просто устанавливает цвета для наших слайдов.
Когда весь код соединяется вместе, мы получаем серию пунктов списка, которые изменяют свою ширину при наведении на них курсора мыши (но всегда общая ширина равна 100%). Мы используем немного CSS3 для создания скругленных углов и эффекта перехода в тех браузерах, которые поддерживают данные правила. Таким образом, мы получили аккордеон, который не использует JavaScript и работает даже в IE7.
Вертикальный аккордеон
Теперь разберемся с вертикальным аккордеоном. Для него мы будем использовать идентичную разметку HTML с единственным добавлением ID для элемента <ul>:
<code><ul class="accordion" id="vertical">
</code>
Теперь мы пристыковываем пункты списка друг к другу по вертикали. Устанавливаем для них ширину 100% и используем логику 10% / 60% для задания высоты. Код CSS имеет следующий вид:
/*------------------------------------*\
ВЕРТИКАЛЬНЫЙ АККОРДЕОН
\*------------------------------------*/
#vertical{
width:940px;
height:300px;
}
#vertical li{
height:20%;
width:100%;
-moz-transition:all 0.2s ease-out;
-webkit-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
-moz-transition-delay:0.15s;
-webkit-transition-delay:0.15s;
-o-transition-delay:0.15s;
transition-delay:0.15s;
}
#vertical li:first-of-type{
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
-o-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#vertical:hover li{
height:10%;
width:100%;
}
#vertical li:hover{
height:60%;
width:100%;
}
Мы явно устанавливаем ширину равной 100% в правиле для селектора :hover , но логика для расчета значений высоты не изменилась.
Готово!