Адаптивный вертикальный аккордеон
В данном уроке мы создадим простой адаптивный аккордеон, который будет открывать разделы вниз по вертикали с плавным появлением содержания в них. Идея заключается в том, чтобы скомпоновать содержание с минимальной необходимостью для вертикальной прокрутки. Также мы будем использовать трансформации CSS3 для формирования стрелки рядом с разделом, которая будет появляться при наведении курсора мыши на название раздела и переворачиваться при открытии/закрытии. Аккордеон будет изменять размер вместе с окном браузера.
Разметка HTML
Структура HTML состоит из контейнера с идентификатором и классом st-accordion, в котором располагается неупорядоченный список. Пункты списка имеют ссылки, работающие как название пункта, и область содержания, которая изначально скрыта. Элемент span
с классом st-arrow будет работать как индикатор с правой стороны от названия раздела. Он будет появляться при наведении курсора мыши на родительский элемент, то есть на ссылку.
<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%, чтобы она изменялась при изменении внешнего элемента. Вы можете использовать здесь то значение, которое нужно. Внешний элемент в демонстрации имеет ширину 90% при ограниченном максимуме 800 px. Элемент st-accordion будет иметь минимальную ширину 270 px:
.st-accordion{ width:100%; min-width:270px; margin: 0 auto; }
Предположим, что мы используем сброс CSS, который удаляет отступы и поля у неупорядоченного списка. И в таких условиях определим стили для каждого элемента списка. Установим начальную высоту равную 100 px и скроем все что выходит за границу элемента. Таким образом мы не будем видеть содержание пункта. Когда пункт открывается, изменение высоты будет анимироваться для вывода содержания. Для разделения пунктов используется верхняя и нижняя части рамки.
.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
для стрелки позиционируется абсолютно и скрывается за счет установки вне элемента ссылки и полной прозрачности. Трансформация передвинет стрелку в область видимости и плавно проявит её:
.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, а элемент ссылки будет иметь такой же цвет, как и при наведении курсора мыши. Элемент span
будет повернут, чтобы стрелка указывала вверх:
.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 screen and (max-width: 320px){ .st-accordion ul li > a{ font-size:36px; } }
JavaScript
Рассмотрим важные части плагина. Начнем с определения опций и их значений по умолчанию:
$.Accordion.defaults = { // Индекс открытого пункта. -1 означает, что все пункты закрыты по умолчанию. open : -1, // Если данная опция имеет значение true, то только один пункт может быть открыт. При открытии пункта другой открытый пункт закрывается. oneOpenedItem : false, // Скорость анимации открытия/закрытия speed : 600, // Эффект анимации открытия/закрытия easing : 'easeInOutExpo', // Скорость прокрутки анимации действия scrollSpeed : 900, // Эффект прокрутки анимации действия scrollEasing : 'easeInOutExpo' };
Плагин инициализируется вызовом функции _init:
_init : function( options ) { this.options = $.extend( true, {}, $.Accordion.defaults, options ); // Проверка опций this._validate(); // current - индекс открытого пункта this.current = this.options.open; // Скрываем содержание, чтобы вывести его потом this.$items.find('div.st-content').hide(); // Сохраняем оригинальную высоту и координату по вертикали для каждого пункта this._saveDimValues(); // Если нужно по умолчанию открыть пункт if( this.current != -1 ) this._toggleItem( this.$items.eq( this.current ) ); // Инициализируем события this._initEvents(); },
Функция _saveDimValues сохраняет оригинальные значения высоты и координаты пункта, так что мы знаем куда нужно прокручивать содержание, когда пункт открывается.
Если есть пункт, который должен быть открыт по умолчанию, то вызываем функцию _toggleItem. А затем инициализируем события.
Функция _toggleItem обрабатывает два варианта при нажатии кнопки мыши на пункте. Либо пункт уже открыт, то есть имеет класс st-open, либо он закрыт. Если он открыт, присваиваем переменной current значение -1 и скрываем содержание, изменяя высоту пункта до оригинального значения. Если пункт закрыт, то мы присваиваем переменной currrent индекс пункта, анимируем изменение высоты и прозрачности содержания для вывода на экран. Затем мы прокручиваем окно вниз с помощью функции _scroll, чтобы открытый пункт оказался вверху:
// Открыть / закрыть пункт _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; // Открыть / закрыть пункт this.$items.find('a:first').bind('click.accordion', function( event ) { var $item = $(this).parent(); // Закрыть любой открытый пункт если опция oneOpenedItem имеет значнеие true if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) { instance._toggleItem( instance.$items.eq( instance.current ) ); } // Открыть / закрыть пункт instance._toggleItem( $item ); return false; }); $(window).bind('smartresize.accordion', function( event ) { // Сброс оригинальных занчений пункта instance._saveDimValues(); // Сброс высоты содержания любого пункта, который открыт instance.$el.find('li.st-open').each( function() { var $this = $(this); $this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) ); }); // Прокрутка до текущего пункта if( instance._isOpened() ) instance._scroll(); }); },
Выше описаны самые важные функции кода. Полностью текст JavaScript плагина вы можете посмотреть в исходниках.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/QV1FUePZNLU/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.