» »

Вкладки с переходом на аккордеон для сайта

Вкладки с переходом на аккордеон для сайта

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

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

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

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

Вертикальное меню аккордеон на CSS+JS

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

Переход к вкладке аккордеона + её раскрытие

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

HTML

Код
<button class="negpaymenus_bovegakinam">Здесь первый вопрос</button>
<div class="denganizakon">
  <p>Размещаем все то, что вам нужно по тематике.</p>
</div>

<button class="negpaymenus_bovegakinam">Второй вопрос</button>
<div class="denganizakon">
  <p>Можно поставить информер</p>
</div>

<button class="negpaymenus_bovegakinam">Название под третий вопрос</button>
<div class="denganizakon">
  <p>Здесь для размещение описание или скрипта.</p>
</div>

CSS

Код
.negpaymenus_bovegakinam {
  background-color: #084552;
  color: #eae6e6;
  cursor: pointer;
  padding: 16px;
  width: 50%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.7s;
  border-bottom: 1px solid #736969;
}

.genpaymen, .negpaymenus_bovegakinam:hover {
  background-color: #07537d;
}

.negpaymenus_bovegakinam:after {
  content: '\002B';
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.genpaymen:after {
  content: "\2212";
}

.denganizakon {
  padding: 0 20px;
  color: #443f3f;
  background-color: #e2dcdc;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  width: 47%;
}

JS

Код
var acc = document.getElementsByClassName("negpaymenus_bovegakinam");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
  this.classList.toggle("genpaymen");
  var denganizakon = this.nextElementSibling;
  if (denganizakon.style.maxHeight){
  denganizakon.style.maxHeight = null;
  } else {
  denganizakon.style.maxHeight = denganizakon.scrollHeight + "px";
  }  
  });
}

При помощи CSS для создания вертикального аккордеона прописано плавное скольжение с красивыми эффектами на основе переходов. При нажатии панель скользит вниз, но сама основа остается на своем месте, где сделано для светлого сайта.

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

Демонстрация
2019-03-06 Загрузок: 1 Просмотров: 362 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 2019-03-06 22:591
0
Также можете посмотреть материал вкладок, который по оформлению и дизайну почти аналогичны, только эта вкладки работают без библиотеки, а вот эти вкладки подключены к шрифтовым иконкам. Что на эти также можно подключить, где сделать более информационными.
avatar