Мы же не раз писали о практичности аккордеонов на сайте, которые позволяют экономить место на ресурсе, тем самим не загружать визуально информацией пользователей. Это весьма практично в наши дни, ведь хороший веб-дизайн сейчас цениться среди посетителей, привлекает внимание и вызывает дальнейший интерес к ресурсу. В данном уроке мы рассмотрим как создать замечательный аккордеон для сайта с контентом при помощи только css. Данный аккордеон отлично будет сочетаться на ресурсе в темных тонах. Вот что с этого получилось..

 

Данный пример основан на Futurico UI Pro от Владимира Кудинова. Он будет работать во всех браузерах и устройствах, которые поддерживают селектор :target. Для начала мы рассмотрим структуру HTML.

Для того чтобы аккордеон открывался, когда мы нажимаем на него, мы должны использовать селектор :target. Селектор :target будет работать только если у нас будет ссылка, которая указывает на идентификатор, и когда мы нажмем на эту ссылку, id становится ссылкой на элемент. Теперь рассмотрим стили CSSМы начнем с добавления некоторых reset-стилей, чтобы удалить все поля, отступы и границы, которые устанавливают браузеры.

Затем мы зададим фиксированную ширину равную 300px (290px + 5px левый отступ + правый padding 5px), цвет фона, закругленные углы и тени.

Теперь давайте зададим стили для заголовка вкладки, по умолчанию, с некоторыми CSS3 градиентами, тенями, закругленными углами и некоторыми базовами свойствами CSS:

Затем нам нужно добавить стили для hover и active. Мы изменим текст и цвета градиент на зеленый.

Вначале мы будем скрывать все содержание и показывать его только тогда, когда вы нажимаете на вкладку. Чтобы скрыть его мы будем использовать свойство display:none и display:block; для открытого блока. Мы также добавим анимацию при раскрытии, чтобы он выглядел лучше, и высоту 100px для открытого блока.

Давайте добавим содержание во вкладки. Мы будем создавать превью поста блога с названием, текстом, некоторыми изображениями и другой информацией. Вы можете изменить разметку, как вам нравится, это не обязательно, просто чтобы сделать этот аккордеон более полным.

Стили самые простые и мы не будем останавливаться подробно на их описании.

Изменим высоту div-а на 360px.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.