ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Раздвижной аккордеон с описанием на CSS

Раздвижной аккордеон с описанием на CSS

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

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

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

Так выглядит наш аккордеон, что появится после установочного процесса:

Вертикальное многоуровневое меню типа аккордеон

В целом, это хорошо продуманный дизайн, который вы можете использовать как таковой на своем веб-сайте.

Нужно подключить библиотеку

Код

HTML

Код

<section class="avesanaya-navigatsiya">
  <div class="kenusla">
  <img src="http://zornet.ru/ABVUN/Aba/pin.png" alt="imagen" />
  <h3>Скрипты для сайта</h3>
  </div>
  <p>
  Здесь идет описание про скрипты.
  </p>

  <div class="kenusla">
  <img src="http://zornet.ru/ABVUN/Aba/files-and-folders.png" alt="" />
  <h3>Музыка</h3>
  </div>
  <p>
  Поставим плеер с ипопулярной композицией.
  </p>

  <div class="kenusla">
  <img src="http://zornet.ru/ABVUN/Aba/idea.png" alt="" />
  <h3>Шаблоны</h3>
  </div>
  <p>
  Ознакомитесь про тематические шаблоны.
  </p>

  <div class="kenusla">
  <img src="http://zornet.ru/ABVUN/Aba/book.png" alt="" />
  <h3>Дизайн</h3>
  </div>
  <p>
  Все про стилистика и как оформить сайты.
  </p>

  <div class="kenusla">
  <img src="http://zornet.ru/ABVUN/Aba/thunderbolt.png" alt="" />
  <h3>Блоги</h3>
  </div>
  <p>
  Описание материалов под новый материал.
  </p>
  </section>

CSS

Код

.avesanaya-navigatsiya {
  margin: 50px auto;
  width: 49%;
  cursor: pointer;
  background: #f6f4e6;
  border: solid 6px;
  border-radius: 3px;
  border-color: #4d4646;
}
.avesanaya-navigatsiya .kenusla {
  height: 100px;


}
.avesanaya-navigatsiya .kenusla h3 {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  padding-left: 70px;
  font-family: "Verdana";
  font-size: 30px;
  font-weight: 1000;
}
.avesanaya-navigatsiya .kenusla img {
  padding-left: 25px;
  width: 40px;
  vertical-align: middle;
}
.avesanaya-navigatsiya .kenusla h3:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.avesanaya-navigatsiya .kenusla:first-of-type {
  background: #c57d6f;
  color: #fff8ec;
}
.avesanaya-navigatsiya .kenusla:nth-of-type(2) {
  background: #264667;
  color: #f7f1e7;
}
.avesanaya-navigatsiya .kenusla:nth-of-type(3) {
  background: #2b7979;
  color: #f9f4ea;
}
.avesanaya-navigatsiya .kenusla:nth-of-type(4) {
  background: #61286d;
  color: #f7f4ef;
}
.avesanaya-navigatsiya .kenusla:last-of-type {
  background: #ca13c4;
  color: #fbf7f1;
}
.avesanaya-navigatsiya p {
  font-family: "JF Flat Regular";
  font-size: 17px;
  font-weight: 400;
  padding: 14px;
  display: none;
  box-shadow: inset 0 3px 7px rgba(12, 12, 12, 0.2);
}
.avesanaya-navigatsiya p:first-of-type {
  background: #ab594a;
  color: #f7f3ec;
}
.avesanaya-navigatsiya p:nth-of-type(2) {
  background: #1f3954;
  color: #f9f6f0;
}
.avesanaya-navigatsiya p:nth-of-type(3) {
  background: #286161;
  color: #f7f4ee;
}
.avesanaya-navigatsiya p:nth-of-type(4) {
  background: #723f7d;
  color: #fdfbf9;
}
.avesanaya-navigatsiya p:last-of-type {
  background: #982195;
  color: #f7f5f1;
}

@media screen and (max-width: 860px){
.avesanaya-navigatsiya{
  margin: 0px auto;
  width: 95%;
  border: solid 6px;
  border-radius: 3px;
  border-color: #4d4646;
}
}

@media screen and (max-width: 860px){
.avesanaya-navigatsiya .kenusla h3{
font-size: 19px;
}
}

Код

(function($) {
  "use strict";
  $(".kenusla").on("click", function() {
  $(this)
  .next()
  .slideToggle("150");
  $("p")
  .not($(this).next())
  .slideUp("fast");
  });
})(jQuery);

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

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

11 Февраля 2020 Загрузок: 2 Просмотров: 1085 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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