Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Элементы аккордеона на чистом CSS3 без JS

Дата добавления: 29.03.2017 - 00:45
Добавил: Buger
Количество просмотров: 149
Количество комментариев: 0
Размер файла: 5.1Kb
Рейтинг материала: 5.0 / 1
Элементы аккордеона на чистом CSS3 без JS
рейтинг 5.0
/
голосов 1
В настоящее время множество сайтов и другие проекты применяют элементы аккордеона, так как они очень удобны и несут в себе часть нужного и интересного материала или различную информацию для пользователей. И как ни странно множество таких элементов имеют часть кода написанного на JavaScript. Мы же предоставляем вам элементы аккордеона на чистом CSS3 без применения JavaScript кода. А это является огромным плюсом. Любой пользователь установивший его в своих проектах сможет без проблем отредактировать под свои требования и нужды. Изменить стиль, цветовую гамму и многое другое. Также данное решение снижает нагрузку на сервер и сайт.
Установка и настройка очень проста и тривиальна. Вам достаточно прописать html код элементов и подключить стили. А дальше, дело только вашей фантазии. Применяйте данную реализацию в своих проектах и экспериментируйте.

HTML
Код
<div>
  <input type="checkbox" id="box1" name="accordion" />
  <label for="box1">Box #1</label>
  <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div>
  <input type="checkbox" id="box2" name="accordion" />
  <label for="box2">Box #2</label>
  <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div>
  <input type="checkbox" id="box3" name="accordion" />
  <label for="box3">Box #3</label>
  <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div>
  <input type="checkbox" id="box4" name="accordion" />
  <label for="box4">Box #4</label>
  <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>


CSS стили
Код
body>div {
  width: 25%;
  min-width: 500px;
  margin: 0 auto;
  border-bottom: 2px solid #888;
  }
   
  input {
  display: none;
  }
   
  input~div {
  height: 1px;
  overflow: hidden;
  }
   
  input~div>* {
  opacity: 0;
  transition: 0.5s;
  font-size: 12px;
  line-height: 1.75em;
  }
   
  input+label {
  display: block;
  position: relative;
  padding: 50px 0;
  font-weight: 700;
  font-size: 14px;
  }
   
  input+label:after,
  input+label:before {
  position: absolute;
  background: black;
  content: '';
  transform: rotate(0deg);
  transition: 0.5s;
  top: 50%;
  }
   
  input+label:after {
  right: 4px;
  height: 10px;
  width: 2px;
  margin-top: -5px;
  }
   
  input+label:before {
  right: 0;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  }
   
  input:checked~div {
  height: auto;
  margin: 0 0 50px;
  }
   
  input:checked~div>* {
  opacity: 1;
  transition: 0.5s;
  transition-delay: 0.25s;
  }
   
  input:checked+label:before {
  transform: rotate(360deg);
  transition: 0.5s;
  }
   
  input:checked+label:after {
  transform: rotate(450deg);
  transition: 0.5s;
  }
   
  label:hover {
  cursor: pointer;
  }


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.