Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Адаптивный аккордеон на CSS и JAVASCRIPT

12 ноября 2013 | Опубликовано в css | Нет комментариев »

В сегодняшнем уроке мы будем создавать адаптивный аккордеон. При открытии он будет скользить с верхней части страницы и раскрывать содержимое. Будут добавлены также CSS3 переходы для стрелок. Начнем!

 

 

Посмотреть демо или скачать исходные файлы вы можете, нажав на ссылки под изображением ниже.

                                 Демо          Загрузить исходные файлы

РАЗМЕТКА

HTML структура будет состоять из обертки с классом и ID st-accordion и неупорядоченного списка. Список изделий будет иметь ссылку, которая будет служить в качестве пункта названия, изначально скрытой информации.

<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">
                Item Title
                <span class="st-arrow">Open or Close</span>
            </a>
            <div class="st-content">
                <p>Some content</p>
            </div>
        </li>
        <li> ... </li>
    </ul>
</div>

Давайте посмотрим на стили!

CSS

По-первых, зададим стили главной обертке. Ширина будет 100%. Обертка в демо версии имеет максимальную ширину 800 пикселей и ширину 90%. Класс st-accordion будет с минимальной шириной в 270 пикселей:

.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}

Определим стили для каждого элемента списка. Установим начальную высоту в 100 пикселей.

.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}

Первый элемент не должен иметь верхнюю границу:

.st-accordion ul li:first-child{
    border-top:none;
}

Добавим цветовой переход при наведении курсора мыши. Высота строки должна быть такой же, как начальная высота элемента списка:

.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 46px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
    -moz-transition:  color 0.2s ease-in-out;
    -o-transition:  color 0.2s ease-in-out;
    -ms-transition:  color 0.2s ease-in-out;
    transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}

Для стрелок span будет позиционироваться абсолютно, и мы спрячем его, установив непрозрачность 0.

.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition:  all 0.2s ease-in-out;
    -moz-transition:  all 0.2s ease-in-out;
    -o-transition:  all 0.2s ease-in-out;
    -ms-transition:  all 0.2s ease-in-out;
    transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
}

Зададим стили класса st-open:

.st-accordion ul li.st-open > a{
    color: #1693eb;
}
.st-accordion ul li.st-open > a span{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
    right:10px;
    opacity:1;
}

Стили контента и его элементов:

.st-content{
    padding: 5px 0px 30px 0px;
}
.st-content p{
    font-size:  16px;
    font-family:  Georgia, serif;
    font-style: italic;
    line-height:  28px;
    padding: 0px 4px 15px 4px;
}
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}

С media query убедимся, что размер шрифта названия товара будет меньше:

@media screen and (max-width: 320px){
    .st-accordion ul li > a{
        font-size:36px;
    }
}

Перейдем к JavaScript.

JAVASCRIPT

Посмотрим на самые важные части этого плагина. Начнем с параметров по умолчанию:

$.Accordion.defaults        = {
    // index of opened item. -1 means all are closed by default.
    open            : -1,
    // if set to true, only one item can be opened. 
    // Once one item is opened, any other that is 
    // opened will be closed first
    oneOpenedItem   : false,
    // speed of the open / close item animation
    speed           : 600,
    // easing of the open / close item animation
    easing          : 'easeInOutExpo',
    // speed of the scroll to action animation
    scrollSpeed     : 900,
    // easing of the scroll to action animation
    scrollEasing    : 'easeInOutExpo'
};

Выводим функции инициализации::

_init               : function( options ) {

        this.options        = $.extend( true, {}, $.Accordion.defaults, options );

        // validate options
        this._validate();

        // current is the index of the opened item
        this.current        = this.options.open;

        // hide the contents so we can fade it in afterwards
        this.$items.find('div.st-content').hide();

        // save original height and top of each item 
        this._saveDimValues();

        // if we want a default opened item...
        if( this.current != -1 )
            this._toggleItem( this.$items.eq( this.current ) );

        // initialize the events
        this._initEvents();
    },

Функция _saveDimValues ​​сохраняет первоначальную высоту и верх элементов.

Функция _toggleItem заботится о двух случаях при нажатии на пункт: когда пункт открыт (класс st-open) или закрыт. Если он открыт, мы установим для current значение «-1».

_toggleItem         : function( $item ) {

    var $content = $item.find('div.st-content');

    ( $item.hasClass( 'st-open' ) ) 

        ? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' )
        }, this.options.speed, this.options.easing ) )

        : ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' ) + $content.outerHeight( true )
        }, this.options.speed, this.options.easing ), this._scroll( this ) )
},

Функцией _initEvents мы инициализируем два события, нажимая на элемент и изменение размера окна. Когда мы нажимаем на элемент, который либо открываем, либо закрываем, вызывается функция _toggleItem и, если мы установим опцию oneOpenedItem, как «true», сначала закроем открытые элементы перед открытием текущего.

_initEvents         : function() {

    var instance    = this;

    // open / close item
    this.$items.find('a:first').bind('click.accordion', function( event ) {

        var $item           = $(this).parent();

        // close any opened item if oneOpenedItem is true
        if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {

            instance._toggleItem( instance.$items.eq( instance.current ) );

        }

        // open / close item
        instance._toggleItem( $item );

        return false;

    });

    $(window).bind('smartresize.accordion', function( event ) {

        // reset original item values
        instance._saveDimValues();

        // reset the content's height of any item that is currently opened
        instance.$el.find('li.st-open').each( function() {

            var $this   = $(this);
            $this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );

        });

        // scroll to current
        if( instance._isOpened() )
        instance._scroll();

    });
},

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

Автор — MARY LOU.

Перевод — Дежурка.

Читайте также: 




Оставить ответ


семь + = 13

Вставить изображение