Аккордеон на CSS3
Используя только скрытые элементы ввода и метки мы сделаем аккордеон с анимацией процесса закрытия/открытия разделов содержания, задействовав только CSS.
Существует множество различных вариантов аккордеонов, построенных только на CSS. Большинство из них использует псевдо-класс :target. Проблема такого варианта заключается в том, что нельзя в действительности снова закрыть раздел содержания или открыть несколько разделов одновременно. С помощью скрытых чекбоксов мы сможем контролировать открытие и закрытие. В качестве альтернативы можно использовать радиокнопки, если требуется иметь только один открытый раздел единовременно.
Примечание: результат урока полноценно работает только в браузерах, которые поддерживают свойства CSS3.
Разметка HTML
Мы рассмотрим пример с использованием чекбоксов, где по умолчанию открывается один из разделов (элемент ввода должен иметь состояние ‘checked’). Все помещается в контейнер с классом ac-container. Для каждого элемента определяется чекбокс, метка и содержание статьи:
<section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">О нас</label> <article class="ac-small"> <p>Текст статьи... </p> </article> </div> <div> <input id="ac-2" name="accordion-1" type="checkbox" checked /> <label for="ac-2">Как мы работаем</label> <article class="ac-medium"> <p>Текст статьи... </p> </article> </div> <div><!--...--></div> </section>
Обратите внимание, что мы задаем каждому элементу ввода ID, который затем используется в атрибуте for метки. Данное действие нужно для отметки чекбокса при нажатии на метку.
Каждая статья имеет класс, который помогает определить высоту полностью раскрытого элемента. (Оптимально использовать ‘auto’ для значения высоты раскрытого элемента, но, к сожалению, в таком варианте не возможна анимация открытия.)
CSS
В тексте урока опущены префиксы производителей браузеров для наглядности. В тексте демонстрационного кода они присутствуют там, где нужно.
Определяем ширину аккордеона и центрируем его:
.ac-container{ width: 400px; margin: 10px auto 30px auto; }
Далее мы делаем метки похожими на кнопки, задавая для них фоновый градиент. С помощью теней создаем рамку и эффект внутреннего вдавливания. Также устанавливаем свойство z-index равным 20, чтобы разместить элемент сверху всех элементов содержания:
.ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); }
При наведении курсора мыши мы делаем метку белой:
.ac-container label:hover{ background: #fff; }
При нажатии кнопки мыши на метке, чекбокс становится отмеченным и соответствующая метка получает стиль “выделенной”:
.ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); }
Здесь используется комбинатор для выбора метки, которой предшествует элемент ввода чекбокс.
Добавим небольшую иконку стрелки при наведении курсора мыши. Для этого мы просто используем псевдо-класс “after”, чтобы обойтись без ненужной разметки:
.ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; background: transparent url(../images/arrow_down.png) no-repeat center center; }
Для “отмеченного” пункта будем выводить стрелку вверх:
.ac-container input:checked + label:hover:after{ background-image: url(../images/arrow_up.png); }
И убираем иконку для закрытого пункта:
.ac-container input{ display: none; }
Область содержания имеет изначальную высоту 0px, и все выступающее за рамки будет удалено. Добавляем трансформацию для высоты и тени. Трансформация будет работать при "закрывании" пункта. Мы определяем трансформацию для выбранного пункта.
.ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container input:checked ~ article{ transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); }
Определяем стиль для содержания:
.ac-container article p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); }
Теперь определяем три класса с для разных высот, чтобы сделать анимацию открывания/закрывания пунктов:
.ac-container input:checked ~ article.ac-small{ height: 140px; } .ac-container input:checked ~ article.ac-medium{ height: 180px; } .ac-container input:checked ~ article.ac-large{ height: 230px; }
Как уже упоминалось, использование для высоты значения “auto” в данном случае может быть лучше. Но так как мы делаем анимацию, то нужно иметь определенное значение высоты.
Некоторые мобильные браузеры при нажатии на метку могут не включать отметку соответствующих элементов ввода.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/KryymCqmg4U/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 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 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.