Як зробити drop-down box за допомогою CSS3 анімації і checkbox

У цьому уроці я покажу вам, як зробити drop-down box за допомогою CSS3 анімації і checkbox хаку. Зазвичай для таких речей застосовують JQuery, але завдяки CSS3 ми можемо зробити це використовуючи властивість transition.

Погляньте на демо!

{full-post-img}

Круто, так? Давайте подивимося, як цей CSS3 drop-down box було зроблено.

HTML5 для drop-down box

Розглянемо HTML5 розмітку більш докладно.

<section class="slider">

  
  <input id="toggle" type="checkbox">
  <label for="toggle">
    <i class="toggle-icon"></i>
  </label>

  
  <section class="main-content">
    <h1>CSS3 Drop down box</h1>
  </section>

</section>

Я прокоментував HTML вище, щоб зробити його зрозумілішим. Ще одне важливе зауваження: важливо мати зміст після checkbox. Це потрібно, щоб використати селектор ~. Цей селектор використовується для того, щоб елемент йшов після іншого елемента. У цьому випадку нам потрібно вибрати вміст, який йтиме за checkbox.

Checkbox хак для drop-down кнопки перемикання

Отже, давайте подивимося, як ми перетворюємо checkbox і label в кнопку перемикання. Перш за все, я використовував іконки з entypo webfont. Я використовував стрілку "вниз" для неперевіренного стану, і стрілку "вгору" для перевіреного.

input#toggle + label i.toggle-icon:before {
  font-family: 'entypo', sans-serif;
  content: "\\e764";
}

input#toggle:checked + label i.toggle-icon:before {
  content: "\\e767";
}

Тепер, звичайно, нам потрібно приховати сам checkbox і додати деякі додаткові стилі до label. Важливо встановити top: 0 для label для коректної анімації. В якості альтернативи, ви можете використовувати transform.

.slider input#toggle {
  display: none;
}

.slider input#toggle + label {
  font-size: 25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 10px;
  color: white;
  background: #8f2c2c;
  position: relative;
  top: 0;
  transition: top 0.5s ease-in-out;
}

Для властивості transition ми визначаємо властивість для анімування, швидкість і функцію переходу.

А ось деякі загальні стилі для слайдера і змісту. Хоча ви можете встановити власні стилі відповідно до побажань.

.slider {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.slider .main-content {
  background: #eee;
  height: 150px;
  position: relative;
  top: -195px;
  transition: top 0.5s ease-in-out;
}

.slider .main-content h1 {
  line-height: 150px;
  color: #30303f;
  width: 100%;
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 1px 1px #000;
  font-family: "Roboto"
}

Анімуємо drop-down box з CSS3

Тепер давайте подивимося, як можна легко оживити наші елементи:

input#toggle:checked + label {
  top: 150px;
}

input#toggle:checked ~ .main-content {
  top: -45px;
}

Ми відрегулювали положення нашого checkbox label і зміст drop-down box. Це значення буде анімоване за допомогою властивості transition. Зверніть увагу, як ми використовуємо селектор ~ для класу .main-content.

Тепер ми можемо перемикати drop-down box, натиснувши на label!