CSS3 для реализации табов, аккордеона и тогглера без javascript

Table of Contents

Табы

JS Bin
Методика — скрытые инпуты и следующий css:

.tab-switcher input[type=radio]:checked ~ .tab-content {
  z-index: 10;
  opacity: 1;
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ label {
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ .tab-content {

z-index: 10;

opacity: 1;

background: #888;

color: white;

}

.tab-switcher input[type=radio]:checked ~ label {

background: #888;

color: white;

}

~ позволяет обращаться к элементам-«братьям».

Аккордеон

JS Bin
Методика — скрытые чекбоксы и css:

.accordion-wrap input[type=checkbox]:checked ~ .accordion-content {
  max-height: 500px;
  -webkit-transition: all 2.5s linear;
  -moz-transition: all 2.5s linear;
  -ms-transition: all 2.5s linear;
  -o-transition: all 2.5s linear;
  transition: all 2.5s linear;
}

.accordion-wrap input[type=checkbox]:checked ~ label {
  background: #ddd;
}

.accordion-wrap input[type=checkbox]:checked ~ .accordion-content {

max-height: 500px;

-webkit-transition: all 2.5s linear;

-moz-transition: all 2.5s linear;

-ms-transition: all 2.5s linear;

-o-transition: all 2.5s linear;

transition: all 2.5s linear;

}

.accordion-wrap input[type=checkbox]:checked ~ label {

background: #ddd;

}

Тогглер

JS Bin

input:focus ~ label {
    left: 11em;
}

input:focus ~ label {

left: 11em;

}

Тогглер правда не совсем «честный», т.к. при потере фокуса инпут скрывается. Но, думаю, можно реализовать и нормальный (с чекбоксами).

Источник — http://www.adobe.com/devnet/html5/articles/using-form-elements-and-css3-to-replace-javascript.html

CSS3 для реализации табов, аккордеона и тогглера без javascript

Табы

Аккордеон

Тогглер

Similar Posts

LEAVE A COMMENT Отменить ответ