Аккордеон

Аккордеон CSS3 без больших библиотек JQuery UL или набора событий JavaScript. Обычно аккордеон используют чтобы сделать маленькую фото галерею, или если нужно создать рекламу со списком функций продукта и т.д.

С появлением CSS3, как и во многих случаях JavaScript не нужен. В статье описаны две версии аккордеона. В первом примере изображение будет меняться при нажатии на боковую панель «Аккордеон версия без анимации». Второй пример «Аккордеон с анимацией».

Аккордеон без анимации

Демо

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
        <title>Аккордеон CSS3 изменение после нажатия на боковую панель</title>

        <link href="css/layout.css" rel="stylesheet" />
        <link href="css/main.css" rel="stylesheet" />
    </head>
    <body>
        <h1>Аккордеон CSS3 версия без анимации</h1>
        <div class="accordion css3accordion">
            <span id="slide1"></span>
            <span id="slide2"></span>
            <span id="slide3"></span>
            <span id="slide4"></span>
            <span id="slide5"></span>
            <ol>
                <li class="slide1">
                    <a href="#slide1"><h2><span>Первое</span></h2></a>
                    <div>
                        <img src="images/1.jpg" alt="Slide One" />
                    </div>
                </li>
                <li class="slide2">
                    <a href="#slide2"><h2><span>Второе</span></h2></a>
                    <div>
                        <img src="images/2.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li class="slide3">
                    <a href="#slide3"><h2><span>Третий</span></h2></a>
                    <div>
                        <img src="images/3.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li class="slide4">
                    <a href="#slide4"><h2><span>Четвёртое</span></h2></a>
                    <div>
                        <img src="images/4.jpg" alt="Slide Four" />
                    </div>
                </li>
                <li class="slide5">
                    <a href="#slide5"><h2><span>Пятое</span></h2></a>
                    <div>
                        <img src="images/5.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
        </div>

</body>
</html>

В макете присутствуют элементы <span>, по умолчанию — все они скрыты, их предназначение обработка события OnClick. Для начала нужно определить стили для нашего родительского объекта и внутренних пролетов.

CSS для аккордеона без анимации.

Аккордеон с анимацией

Демо

Чтобы сделать аккордеон с анимацией отключаем действие OnClick, и применяем к шаблону HTML стили анимации CSS3.

CSS для аккордеона с анимацией.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)