ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный аккордеон с помощью CSS+JS

Адаптивный аккордеон с помощью CSS+JS

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

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

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

Эффект анимированного аккордеона, что создается простым способом.

Это уже при клике по знаку, где низ уходит и появляться скрытый контент.

В этом моменте открыли нижний элемент, что также все в аналогичном порядке.

Создание Аккордеонного меню только с CSS3

Приступаем к установке:

HTML

Код

<div id="voluptad-kacusantum">
  <div class="sacusaudan-dumantum">
  <a href="#" class="cusanmcig-sunantum">ZorNet - портал для вебмастера<span class="toggle-icon"></span></a>
  <div class="nadaump-cinangum">
  <img src="Ссылка на изображение №1" alt=""/>
  <p>Здесь описание, которое закреплено к изображению.</p>
  </div>
  </div>
  <div class="sacusaudan-dumantum">
  <a href="#" class="cusanmcig-sunantum">Пример Аккордеона<span class="toggle-icon"></span></a>
  <div class="nadaump-cinangum">
  <img src="Вторая ссылка на изображение" alt=""/>
  <p>Второе пояснение к закрепленной картинке.</p>
  </div>
  </div>
</div>

CSS

Код

#voluptad-kacusantum{
  margin:38px auto;
  width:95%;
  min-width:315px;
  max-width:957px;
}

.sacusaudan-dumantum {
  width: 100%;
  margin: 0 0 18px;
  clear:both;
}

.cusanmcig-sunantum {
  position: relative;
  display: block;
  padding: 18px;
  font-size: 21px;
  font-weight: 300;
  background: #19293a;
  color: #dcd9d9;
  text-decoration: none;
}
.cusanmcig-sunantum.open {
  background: #16a085;
  color: #f5efef;
}
.cusanmcig-sunantum:hover {
  background: #0c5446;
}

.cusanmcig-sunantum span.toggle-icon:before {
  content:"+";
}

.cusanmcig-sunantum.open span.toggle-icon:before {
  content:"-";
}

.cusanmcig-sunantum span.toggle-icon {
  position: absolute;
  top: 8px;
  right: 18px;
  font-size: 37px;
  font-weight: bold;
}

.nadaump-cinangum {
  display: none;
  padding: 17px;
  overflow: auto;
}

.nadaump-cinangum p{
  margin:0;
}

.nadaump-cinangum img {
  display: block;
  float: left;
  margin: 0 14px 9px 0;
  width: 49%;
  height: auto;
}

@media (max-width: 767px) {
  .nadaump-cinangum {
  padding: 10px 0;
  }
}

Код

$(function(){
  $(".cusanmcig-sunantum").click(function(e){

  e.preventDefault();

  var contenido=$(this).next(".nadaump-cinangum");

  if(contenido.css("display")=="none"){ //open
  contenido.slideDown(250);
  $(this).addClass("open");
  }
  else{ //close
  contenido.slideUp(250);
  $(this).removeClass("open");
  }

  });
});

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

Если вам не подходит палитра цвета, то стилистика дизайна полностью изменяется в CSS. При поддержке CCS и JS выстраивается действительно привлекательные вещи для веб-проектов.

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

10 Февраля 2019 Загрузок: 3 Просмотров: 2637 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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