ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой аккордеон на чистом CSS

Простой аккордеон на чистом CSS

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

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

Безусловно пришлось вмешаться и исправить небольшие ошибки, где при открытии не полностью раскрывался блок. Сейчас он все отлично показывает, также вместо одного оттенка были добавлены градиенты CSS, которые значительно изменили стиль блоков. Теперь можно самостоятельно выразить себя, в том, чтоб создать оригинальный дизайн, а не просто поменять цветовую палитру.

Так выглядит при установки:

По умолчанию при открытие сайта;

При клике по заданному блоку, где автоматически он вниз открывается;

Установка:

HTML

Код

<div id="kedanuv-omebledas">

  <div class="udimsansoved">
  <label for="kodas" class="nudesamoked">
  <h2>Пункт категорий 1 <span class="arrow">»</span></h2></label>
  <input type="checkbox" id="kodas"/>
  <p class="cationson-onabuse">Первое описание.</p>
  </div>

  
  <div class="udimsansoved">
  <label for="loned" class="nudesamoked">
  <h2>Пункт категорий 2 <span class="arrow">»</span></h2></label>
  <input type="checkbox" id="loned"/>
  <p class="cationson-onabuse">Второе описание.</p>
  </div>

  
  <div class="udimsansoved">
  <label for="kason" class="nudesamoked">
  <h2>Пункт категорий 3 <span class="arrow">»</span></h2></label>
  <input type="checkbox" id="kason"/>
  <p class="cationson-onabuse">Третье описание</p>
  </div>
</div>

CSS

Код

#kedanuv-omebledas {
  width: 630px;
  height: auto;
  margin: 0 auto;
  margin-top: 3%;
  border-top: 1px solid #afafaf;
  border-left: 1px solid #afafaf;
  border-right: 1px solid #afafaf;
  border-bottom: 1px solid #bbb9b9;
  background: #f5f5f7;
}
.udimsansoved label {
  display: block;
  padding: 8px;
  color: #504747;
  text-shadow: 0 0 2px rgba(236, 236, 236, 0.6);
  cursor: pointer;
  border-bottom: 1px solid #7f7979;
  border-top: 1px solid #f1e3e3;
  background: linear-gradient(to top, #b9b7b7 20%, #ffffff 50%, #dcd8d8 80%);
  padding: 0px 0px 0px 12px;
  /* height: 50px; */
  font-size: 12px;
}

.udimsansoved p {
  color: #484040;
  padding: 8px;
  font-size: 17px;
  line-height: 1.5em;
  /* border-bottom: 1px solid #ccc4c4; */
  visibility: hidden;
  opacity: 0;
  display: none;
  text-align: left;
  background-color: rgb(255, 255, 255);
  margin-top: 0px;
}

#kodas:checked ~ .cationson-onabuse{
  display: block;
  visibility: visible;
  opacity: 1;
}

input#kodas{
  display: none;
  position: relative;
}

#loned:checked ~ .cationson-onabuse{
  display: block;
  visibility: visible;
  opacity: 1;
}

input#loned{
  display: none;
  position: relative;
}

#kason:checked ~ .cationson-onabuse{
  display: block;
  visibility: visible;
  opacity: 1;
}

input#kason{
  display: none;
  position: relative;
}

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

Демонстрация

21 Июня 2019 Загрузок: 1 Просмотров: 1878 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0