—»     —»   «Гармошка» на CSS3
  Раздел: Меню и Навигация   Комментариев: 1  

«Гармошка» на CSS3



Используя скрытые поля ввода и ярлыки, сегодня мы создадим гармошку посредством лишь кода CSS. Она будет использоваться для анимации областей с контентом. Сегодня мы немного поэкспериментируем со смежным и родственным комбинатором и псевдо-классом :checked. Используя скрытые поля ввода и ярлыки, мы создадим гармошку для анимации областей с контентом посредством лишь кода CSS.

Существует множество вариаций гармошек, реализованных посредством чистого кода CSS, и большинство из них реализованы с помощью псевдо-класса :target. Проблема с использованием :target заключается в том, что у нас не получится вновь закрыть области с контентом, а также мы не сможем одновременно держать открытыми сразу несколько секций. Используя скрытые чекбоксы, мы можем контролировать открытие и закрытие секций. С другой стороны, мы также можем использовать радио-кнопки, если ситуация будет требовать лишь одной открытой секции.

«Гармошка» на CSS3

Итак, давайте приступим!

Пожалуйста, учтите: результат данного руководства будет работать лишь в тех браузерах, где имеется стабильная поддержка CSS3.

Верстка

Давайте пройдемся по примеру, в котором используются чекбоксы, где одна секция по умолчанию открыта (поле ввода должно быть отмеченным). Все будет облачено в контейнер с классом ac-container. Для каждого пункта у нас будет чекбокс, ярлык, а также элемент article, который, по сути, и будет является секцией с контентом данного пункта:

<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">About us</label>
<article class="ac-small">
<p>Some content... </p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" checked />
<label for="ac-2">How we work</label>
<article class="ac-medium">
<p>Some content... </p>
</article>
</div>
<div><!--...--></div>
</section>

Учтите, что мы должны задать ID каждому элементу ввода, который мы позже будем использовать для атрибута ярлыка. Это нам потребуется для процесса выделения чекбокса при осуществлении клика по ярлыку.

Каждый элемент article будет иметь класс, помогающий нам определить, на какую высоту нам нужно будет расширить элемент (оптимальным вариантом было бы использовать значение «auto» в качестве значения высоты расширенного элемента, но беда в том, что тогда мы не сможем получить нужную нам анимацию).

Теперь давайте перейдем к оформлению.

CSS-код

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

Давайте определим ширину нашей гармошки и центрируем её:

.ac-container{
width: 400px;
margin: 10px auto 30px auto;
}

Далее мы сделаем так, чтобы ярлыки были отображены в виде кнопок (это будет реализовано за счет привлекательного фона). Посредством нескольких теней блока (box-shadow) мы создадим незначительную границу и эффект надавливания. Мы также установим значение параметра 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;
}

При осуществлении нажатия на ярлык, чекбокс будет выделяться. И при этом нам нужно, чтобы соответствующий ярлык принял стиль «selected»:

.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;
}

Нам нужно, чтобы рядом с пунктом, подкрепленным стилем selected, появилась смотрящая вверх стрелочка:

.ac-container input:checked + label:hover:after{
background-image: url(../images/arrow_up.png);
}

И, так как нам не нужно отображать элементы ввода, мы прячем их:

.ac-container input{
display: none;
}

Область контента изначально будет иметь значение высоты равное 0 пикселей, и все, что не входит в это значение, будет скрыто. Далее мы применим переход к высоте и добавим box-shadow. Переход, который мы здесь применяем, будет действовать вплоть до «закрытия» пункта. Мы определяем другие переходы для выбранного пункта. Итак, мы можем изначально управлять двумя средами поведения элементов. Как видно, мы немного ускорили закрытие – элемент открывается дольше, чем закрывается.

.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» здесь подойдет лучше всего, но так как мы не можем получить нужную нам анимацию, нам нужно заранее подготовить несколько значений высоты для переходов.

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

Демо

Демо 1: использование чекбоксов
Демо 2: использование радио-кнопок
Демо 3: использование чекбоксов (одна область по умолчанию открыта)

И на этом всё! Надеемся, что вам понравилось сегодняшнее руководство!

Посмотреть демо | Скачать исходные материалы
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 10880   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 апреля 2012 @ 22:09
Написал: pleak — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
К этому реально привязать куки? Если да, то каким образом?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Вывоз строительного
Лицензия на вывоз мусора! Оформление и пост лицензионное обслуживание
musor-bye.ru
Снять сауну
Переговорное устройство для бани, сауны, пекарни, горячего цеха
parilkavip.ru
Постельное белье интернет магазин москва
Фирма Дарина производит постельное белье c улучшенной отделкой
shop-sweethome.com
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930