Lecaw

Учимся создавать Web-сайты

Как преобразовать jQuery аккордеон в CSS аккордеон

September 30, 2012
CSS
395hits
 
 

Вы когда-нибудь использовали плагины аккордеона в своих проектах!? Я думаю, что да и большинство из них работают на javascript (или jQuery). Обычно мы используем такие jQuery плагины аккордеона, чтобы создать объявление с изображениями, небольшую фотогалерею или для создания рекламы со списком характеристик продукта. Мы провели небольшое исследование и пришли к выводу, что не всегда удобно использовать скрипты для создания jQuery аккордеона. Попробуем использовать возможности CSS3.

ДЕМО Исходные файлы

 

HTML разметка

Давайте рассмотрим HTML разметку этой страницы:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Как преобразовать аккордеон на jQuery в CSS3 аккордеон | Lecaw Tutorials</title> <!-- CSS файлы -->
<link href="/css/layout.css" rel="stylesheet" />
<link href="/css/liteaccordion.css" rel="stylesheet" /> <!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- jQuery easing -->
<script src="/js/jquery.easing.1.3.js"></script> <!-- liteAccordion jQuery библиотека-->
<script src="/js/liteaccordion.jquery.js"></script> <script>
$(document).ready(function(){
$('#js_version').liteAccordion({
theme : 'dark',
rounded : true,
enumerateSlides : true,
firstSlide : 1,
linkable : true,
easing: 'easeInOutSine'
});
});
</script>
</head>
<body> <h1>jQuery accordion (liteAccordion) version</h1>
<div id="js_version" class="accordion">
<ol>
<li data-slide-name="slide1">
<h2><span>Slide One</span></h2>
<div>
<img src="/images/1.jpg" alt="Slide One" />
</div>
</li>
<li data-slide-name="slide2">
<h2><span>Slide Two</span></h2>
<div>
<img src="/images/2.jpg" alt="Slide Two" />
</div>
</li>
<li data-slide-name="slide3">
<h2><span>Slide Three</span></h2>
<div>
<img src="/images/3.jpg" alt="Slide Three" />
</div>
</li>
<li data-slide-name="slide4">
<h2><span>Slide Four</span></h2>
<div>
<img src="/images/4.jpg" width="768" alt="Slide Four" />
</div>
</li>
<li data-slide-name="slide5">
<h2><span>Slide Five</span></h2>
<div>
<img src="/images/5.jpg" alt="Slide Five" />
</div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div> </body>
</html>

В заголовке мы добавили все необходимые библиотеки и стили (jQuery, jquery.easing и liteAccordion библиотеку), а также код инициализации jQuery аккордеона. В основном разделе, мы видим его главную структуру (список OL-LI) со слайдами. Для jQuery аккордеонов - это обычная структура.

Теперь начнем превращать эту структуру jQuery аккордеона в CSS аккордеон. В начале – мы должны удалить все JS сценарии и liteaccordion.css на нашей странице. Далее мы будем разрабатывать собственные стили. Для этого необходимо добавить ссылки к заголовкам наших слайдов (для переключения между слайдами).

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" /> <!-- CSS файлы -->
<link href="/css/layout.css" rel="stylesheet" />
<link href="/css/main.css" rel="stylesheet" />
</head>
<body> <h1>Как преобразовать аккордеон на jQuery в 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="#"><h2><span>Slide One</span></h2></a>
<div>
<img src="/images/1.jpg" alt="Slide One" />
</div>
</li>
<li class="slide2">
<a href="#"><h2><span>Slide Two</span></h2></a>
<div>
<img src="/images/2.jpg" alt="Slide Two" />
</div>
</li>
<li class="slide3">
<a href="#"><h2><span>Slide Three</span></h2></a>
<div>
<img src="/images/3.jpg" alt="Slide Three" />
</div>
</li>
<li class="slide4">
<a href="#"><h2><span>Slide Four</span></h2></a>
<div>
<img src="/images/4.jpg" alt="Slide Four" />
</div>
</li>
<li class="slide5">
<a href="#"><h2><span>Slide Five</span></h2></a>
<div>
<img src="/images/5.jpg" alt="Slide Five" />
</div>
</li>
</ol>
</div> </body>
</html>

Как видите, я добавил несколько объектов span. По умолчанию – все они скрыты, но мы должны использовать их, чтобы обработать события onclick. Теперь мы можем начать писать собственные стили для нашего CSS аккордеона.

/* CSS3 аккордеон */
.css3accordion {
    border: 9px solid #353535;
    border-radius: 6px;
    padding: 5px 5px 6px 0;
    background: #030303;
    height: 320px;
    width: 960px;
    /* CSS3 тень */
    -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
}
.css3accordion > span {
    display: none
}

Определяем стили для наших слайдов и заголовков:

/* основные стили и слайды */
.css3accordion ol {
    height: 100%;
    list-style: none;
    overflow: hidden;
    position: relative;
}
.css3accordion li {
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 48px;
    /* CSS3 переходы для слайдов */
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
.css3accordion li a {
    display: block;
    float: left;
    height: 320px;
    position: relative;
    width: 48px;
}
/* slide headers */
.css3accordion  h2 {
    font-size: 16px;
    font-weight: normal;
    height: 48px;
    left: 0;
    line-height: 265%;
    margin: 0;
    position: absolute;
    top: 0;
    width: 320px;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -ms-transform: translateX(-100%) rotate(-90deg);
    -ms-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.css3accordion h2 span {
    background-color: #353535;
    border-radius: 4px;
    color: #fff;
    display: block;
    margin-top: 5px;
    padding-right: 10%;
    text-align: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.css3accordion h2 span:hover {
    background-color: #353535;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
/* внутренний контент слайдов */
.css3accordion li div {
    margin-left: 5px;
    padding-left: 48px;
}

Теперь выведем на экран дополнительный объект в каждом заголовке. Я буду использовать псевдо-элемент :after.

/* объект 'counter' */
.css3accordion h2 span:after {
    color: #080808;
    font-weight: bold;
    left: 10%;
    position: absolute;
    text-shadow: -1px 1px 0 #555555;
    top: 10%;
    /* CSS3 поворот объекта 'counter' */
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/* значения 'counter' */
li.slide1  h2 span:after {
    content: "1";
}
li.slide2  h2 span:after {
    content: "2";
}
li.slide3  h2 span:after {
    content: "3";
}
li.slide4  h2 span:after {
    content: "4";
}
li.slide5  h2 span:after {
    content: "5";
}
Наконец, реализуем событие onclick:
/* onclick */
#slide1:target ~ ol li.slide1,
#slide2:target ~ ol li.slide2,
#slide3:target ~ ol li.slide3,
#slide4:target ~ ol li.slide4,
#slide5:target ~ ol li.slide5 {
    width: 768px;
}
#slide1:target ~ ol li.slide1 span,
#slide2:target ~ ol li.slide2 span,
#slide3:target ~ ol li.slide3 span,
#slide4:target ~ ol li.slide4 span,
#slide5:target ~ ol li.slide5 span {
    background: #353535;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}

Вот и все, наш CSS аккордеон готов, можете посмотреть его в работе:

 ДЕМО

 

 

Но это не всё, я подготовил второй демонстрационный пример с анимированным аккордеоном.

Для его работы рекомендуется отключить событие onclick и применить новую анимацию:

/* автоматическая анимация */
.css3accordion li {
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 25.0s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_slides;
    -moz-animation-duration: 25.0s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
.css3accordion li:nth-child(2) {
    -webkit-animation-delay: 5.0s;
    -moz-animation-delay: 5.0s;
}
.css3accordion li:nth-child(3) {
    -webkit-animation-delay: 10.0s;
    -moz-animation-delay: 10.0s;
}
.css3accordion li:nth-child(4) {
    -webkit-animation-delay: 15.0s;
    -moz-animation-delay: 15.0s;
}
.css3accordion li:nth-child(5) {
    -webkit-animation-delay: 20.0s;
    -moz-animation-delay: 20.0s;
}
@-webkit-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}
@-moz-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}

ДЕМО

Исходные файлы

 

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий