» »

Табы в виде аккордеона на CSS + HTML

Табы в виде аккордеона на CSS + HTML

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

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

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

Изначально все проверено на работоспособность:

1. по умолчанию или открытие страницы:

Аккордеон на чистом CSS + HTML

2. При клике раскрываем раздел или категорию:

Отзывчивый Аккордеон на чистом CSS

Установка:

HTML

Код
<section class="decebook_uloginues">
  <div>
  <input id="suesig" name="accordion-1" type="checkbox" />
  <label for="suesig">
ZorNet.Ru — сайт для вебмастера 1</label>
  <article class="sedinokas_mationub">
  <p>Если вы один из миллионов людей, заходящих в Fortnite каждый день, то есть вероятность, что вы можете быть одной из многих в настоящее время сообщающих о проблемах при входе в Fortnite Mobile с использованием входа в Google и Facebook.</p>
  </article>
  </div>
  <div>
  <input id="pamanua" name="accordion-1" type="checkbox" />
  <label for="pamanua">Тестовое название таба 2</label>
  <article class="nuaoukad_counusing">
  <p>
ZorNet.Ru — сайт для вебмастера 2</p>
  </article>
  </div>
  <div>
  <!-- ... -->
  </div>
</section>

CSS

Код
.decebook_uloginues{
  width: 545px;
  margin: 7px auto 25px auto;
  text-align: left;
}
.decebook_uloginues label {
  font-family: 'Arial Narrow', Arial, sans-serif;
  padding: 4px 18px;
  position: relative;
  z-index: 18;
  display: block;
  height: 32px;
  cursor: pointer;
  color: #3c3333;
  text-shadow: 2px 2px 2px rgba(249, 249, 249, 0.8);
  line-height: 33px;
  font-size: 19px;
  background: #f7f3f3;
  background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ece6e6), color-stop(100%,#eaeaea));
  background: -webkit-linear-gradient(top, rgb(250, 252, 255) 1%,#848181 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3efef', endColorstr='#e0dada',GradientType=0 );
  box-shadow: 0px 0px 0px 1px rgba(82, 75, 75, 0.3), 1px 0px 0px 0px rgba(239, 237, 237, 0.9) inset, 0px 2px 2px rgba(31, 29, 29, 0.17);
}
.decebook_uloginues label:hover{
  background: #f4f6f7;
}
.decebook_uloginues input:checked + label, .decebook_uloginues input:checked + label:hover {
  background: #074861;
  color: #b0e8fd;
  text-shadow: 0px 1px 1px rgba(49, 44, 44, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(121, 116, 116, 0.41), 0px 2px 2px rgba(10, 10, 10, 0.15);
}
.decebook_uloginues label:hover:after,
.decebook_uloginues input:checked + label:hover:after{
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  right: 13px;
  top: 7px;
  background: transparent url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/26907966.png) no-repeat center center;  
}
.decebook_uloginues input:checked + label:hover:after{
  background-image: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/26907972.png);
}
.decebook_uloginues input{
  display: none;
}
.decebook_uloginues article{
  background: rgba(255, 255, 255, 0.5);
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.decebook_uloginues article p {
  font-style: italic;
  color: #353333;
  line-height: 18px;
  font-size: 14px;
  padding: 12px;
  text-shadow: 1px 1px 1px rgba(239, 232, 232, 0.8);
}
.decebook_uloginues input:checked ~ article{
  -webkit-transition: height 0.4s ease-in-out, box-shadow 0.1s linear;
  -moz-transition: height 0.4s ease-in-out, box-shadow 0.1s linear;
  -o-transition: height 0.4s ease-in-out, box-shadow 0.1s linear;
  -ms-transition: height 0.4s ease-in-out, box-shadow 0.1s linear;
  transition: height 0.4s ease-in-out, box-shadow 0.1s linear;
  box-shadow: 0px 0px 0px 1px rgba(167, 162, 162, 0.3);
}
.decebook_uloginues input:checked ~ article.sedinokas_mationub{
  height: 140px;
}
.decebook_uloginues input:checked ~ article.nuaoukad_counusing{
  height: 180px;
}
.decebook_uloginues input:checked ~ article.ac-large{
  height: 230px;
}

В основном сайт использует аккордеон в разделе часто задаваемых вопросов. А также если на ресурсе или блоге мало место, то как раз такой трюк с раскрыванием поможет как можно больше держать различной информации на любой страницы сайта.

Демонстрация
2019-06-17 Просмотров: 300 Комментарий: (0)

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

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

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