» »

Адаптивные вкладки "табы" для сайта на jQuery

Адаптивные вкладки "табы" для сайта на jQuery

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

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

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

1. Рассматривая его с описанием, чисто один текст:

Создаем эффектные вкладки на сайта

2. Здесь переключаем и видим плеер от популярного хостинг:

Вкладки (табы) на чистом CSS

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

HTML

Код
<div class="deksadun-kipa">
  <ul class="deksadun">
  <li class="active" rel="kedulomas1">ZorNet.Ru 1</li>
  <li rel="kedulomas2">ZorNet.Ru 2</li>
  <li rel="kedulomas3">ZorNet.Ru 3</li>
  <li rel="kedulomas4" class="kedulomas_last">ZorNet.Ru 4</li>
  </ul>
  <div class="kedulomas_container">
  <h3 class="sakipokdsa kedulomas_accordion" rel="kedulomas1">ZorNet.Ru 1</h3>
  <div id="kedulomas1" class="kedulomas_content" style="display: block;">
  <h2>ZorNet - портал для вебмастера 1</h2>
  <p>Первое описание
  <p>Второе описание</p>
  </div>
  <h3 class="kedulomas_accordion" rel="kedulomas2">ZorNet.Ru 2</h3>
  <div id="kedulomas2" class="kedulomas_content" style="display: none;">
  <h2>Заголовок 2</h2>
  <p>Описание текста
  <p>Продолжение.</p>
  </div>
  <h3 class="kedulomas_accordion" rel="kedulomas3">ZorNet.Ru 3</h3>
  <div id="kedulomas3" class="kedulomas_content" style="display: none;">
  <h2>Третий заголовок 3</h2>
<p>Описание темы
  <p>Продолжаем описывать</p>
  </div>
  <h3 class="kedulomas_accordion" rel="kedulomas4">Вкладка 4</h3>
  <div id="kedulomas4" class="kedulomas_content" style="display: none;">
  <h2>Содержимое Вкладки 4</h2>
  <div class="video-responsive">
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/6ECQ6G4-9E8" frameborder="0" allowfullscreen></iframe>
  </div>
  </div>
  </div>
</div>

CSS

Код
ul.deksadun {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 45px;
  border-bottom: 1px solid #093e6b;
  width: 100%;
}
   
ul.deksadun li {
  float: left;
  margin: 0;
  cursor: pointer;
  padding: 0 19px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #06295f;
  border-left: 1px solid #063767;
  border-right: 1px solid #0978b1;
  background-color: #094d90;
  color: #ece7e7;
  overflow: hidden;
  position: relative;
  font-size: 17px;
}
   
.kedulomas_last {
  border-right: 1px solid #073b65;
}
   
ul.deksadun li:hover {
  background-color: #0a4b61;
  color: #f9f8f8;
}
   
ul.deksadun li.active {
  background-color: #082542;
  color: #f7f3f3;
  border-top: 1px solid #07507b;
  display: block;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 1px 0 #0c0c0c;
}
   
.kedulomas_container {
  border: 1px solid #055267;
  border-top: none;
  clear: both;
  float: left;
  width: 100%;
  background: #f5f5f5;
  overflow: auto;
}
   
.kedulomas_content {
  padding: 15px;
  display: none;
}
   
.kedulomas_content p {
  margin-bottom: 5px
}

.video-responsive {
  margin: 15px;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  -moz-kipa-shadow: 0 8px 17px 0 rgba(12, 12, 12, 0.2), 0 6px 20px 0 rgba(8, 8, 8, 0.19);
  -webkit-kipa-shadow: 0 8px 17px 0 rgba(12, 12, 12, 0.2), 0 6px 20px 0 rgba(8, 8, 8, 0.19);
  kipa-shadow: 0 8px 17px 0 rgba(12, 12, 12, 0.2), 0 6px 20px 0 rgba(8, 8, 8, 0.19);
}
   
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
   
.kedulomas_accordion {
  display: none;
}
   
@media screen and (max-width: 480px) {
  .deksadun {
  display: none;
  }

  .kedulomas_accordion {
  position: relative;
  background-color: #266398;
  font-weight: 400;
  font-size: 15px;
  color: #d4cdcd;
  border-top: 1px solid #d0cbcb;
  margin: 0;
  padding: 12px 19px;
  display: block;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }

  .kedulomas_accordion:hover {
  background-color: #0b5f8c;
  }

  .kedulomas_accordion:before {
  content: '';
  height: 8px;
  width: 8px;
  display: block;
  border: 2px solid #fdf9f9;
  border-right-width: 0;
  border-top-width: 0;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  right: 17px;
  top: 16px
  }

  .sakipokdsa {
  background-color: #05446f;
  color: #f3f3f3;
  }

  .sakipokdsa.kedulomas_accordion:before {
  border: 2px solid #fefefe;
  border-left-width: 0;
  border-bottom-width: 0;
  top: 18px
  }
}

JS

Код
$(".kedulomas_content").hide();
  $(".kedulomas_content:first").show();
  $("ul.deksadun li").click(function () {
  $(".kedulomas_content").hide();
  var activekedulomas = $(this).attr("rel");
  $("#" + activekedulomas).fadeIn();
  $("ul.deksadun li").removeClass("active");
  $(this).addClass("active");
  $(".kedulomas_accordion").removeClass("sakipokdsa");
  $(".kedulomas_accordion[rel^='" + activekedulomas + "']").addClass("sakipokdsa");
  });

  $(".kedulomas_accordion").click(function () {
  $(".kedulomas_content").hide();
  var sakipokdsakedulomas = $(this).attr("rel");
  $("#" + sakipokdsakedulomas).fadeIn();
  $(".kedulomas_accordion").removeClass("sakipokdsa");
  $(this).addClass("sakipokdsa");
  $("ul.deksadun li").removeClass("active");
  $("ul.deksadun li[rel^='" + sakipokdsakedulomas + "']").addClass("active");
  });
  $('ul.deksadun li').last().addClass("kedulomas_last");

Здесь постараюсь описать про то, как создать адаптивные под различные размеры монитора и экранов вкладки при помощи CSS и также с подключением JavaScript, хотя вполне возможно создавать с помощью чистого стиля CSS.

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

Демонстрация
09.10.2018 Просмотров: 151 Комментарий: (0)

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

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

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