» »

Вкладки (табы) с использованием CSS и JS

Вкладки (табы) с использованием CSS и JS

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

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

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

Проверен на работоспособность, где будет представлена demo страница.

Табы с вкладками на CSS3

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

HTML

Код
<div class="kedumpvansed">
  <ul class="kedumpvansed__tabs">
  <li><a class="determinesud" href="#gasakeceiv-1"><i class="fa fa-star"></i> Zornet.Ru</a></li>
  <li><a href="#gasakeceiv-2"><i class="fa fa-link"></i> CSS</a></li>
  <li><a href="#gasakeceiv-3"><i class="fa fa-photo"></i> SEO</a></li>
  <li><a href="#gasakeceiv-4"><i class="fa fa-user"></i> Контакт</a></li>
  </ul>
  <section class="kusagned-navigadon">
  <article id="gasakeceiv-1" class="sigadondake-delookouge gasakeceiv-determinesud">
  <h3>ZorNet - портал для вебмастера</h3>
  <p>Первое описание на вкладке.</p>
  </article>
   
  <article id="gasakeceiv-2" class="sigadondake-delookouge">
  <h3>Смотреть кино</h3>
  <p>Здесь можно поставить плеер</p>
  </article>

  <article id="gasakeceiv-3" class="sigadondake-delookouge">
  <h3>Шаблоны на портал</h3>
  <p>Краткое описание под номером 3</p>
  </article>
   
  <article id="gasakeceiv-4" class="sigadondake-delookouge">
  <h3>Скрипты для сайта</h3>
  <p>Четвертое описание по тематике</p>
  </article>

  </section>
  <div class="donumpon-gansetove"></div>
  </div>

CSS

Код
.kedumpvansed__tabs {
  list-style: none;
  overflow: hidden;
}
.kedumpvansed__tabs li {
  float: left;
  margin-right: 2px;
  font-size: 1.3em;
}
.kedumpvansed__tabs a {
  padding: 1em;
  background: #333b48;
  display: inline-block;
  color: #FFF;
  text-decoration: none;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2);
}
.kedumpvansed__tabs a:hover {
  background: #515a68;
}
.kedumpvansed__tabs a.determinesud {
  color: #333b48;
  background: #FFF;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.kedumpvansed__tabs a.determinesud i {color: #80cbb7;}
.kedumpvansed__tabs a i {
  margin-right: 3px;
  color: #aaaaaa;
}

.kedumpvansed {
  margin: 55px auto;
  width: 80%;
  max-width: 600px;
  position: relative;
}
.kusagned-navigadon {
  padding: 2em;
  position: relative;
  z-index: 400;
  background: #FFF;
  min-height: 300px;
  -webkit-border-radius: 0 4px 4px 4px;
  -moz-border-radius: 0 4px 4px 4px;
  border-radius: 0 4px 4px 4px;
}
.donumpon-gansetove {
  position: absolute;
  z-index: 300;
  bottom: -5px;
  height: 25px;
  width: 100%;
}
.donumpon-gansetove:after,
.donumpon-gansetove:before {
  content: '';
  display: block;
  width: 50%;
  height: 25px;
  position: absolute;
  left: 0;
  background: rgba(0,0,0,0.2);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  -webkit-box-shadow: 0 0 15px 5px rgba(0,0,0,0.25);
  -moz-box-shadow: 0 0 15px 5px rgba(0,0,0,0.25);
  box-shadow: 0 0 15px 5px rgba(0,0,0,0.25);
  -webkit-transform: scale(0.8) rotate(-4deg);
  -ms-transform: scale(0.8) rotate(-4deg);
  -o-transform: scale(0.8) rotate(-4deg);
  transform: scale(0.8) rotate(-4deg);
}
.donumpon-gansetove:after {
  right: 0;
  left: auto;
  -webkit-transform: scale(0.8) rotate(4deg);
  -ms-transform: scale(0.8) rotate(4deg);
  -o-transform: scale(0.8) rotate(4deg);
  transform: scale(0.8) rotate(4deg);
}
.kusagned-navigadon .sigadondake-delookouge {
  line-height: 1.3;
  color: #76716f;
  display: none;
}
.kusagned-navigadon .sigadondake-delookouge.gasakeceiv-determinesud {
  display: block;
}
.kusagned-navigadon .sigadondake-delookouge h3 {
  font-size: 1.8em;
  color: #333b48;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 5px;
  margin-bottom: 12px;
}
.kusagned-navigadon .sigadondake-delookouge p {
  font-size: 1.3em;
  line-height: 1.6em;
  color: #76716f;
}

JS

Код
$(function() {

  var $kedumpvansed_tabs = $('.kedumpvansed__tabs li a');  
  $kedumpvansed_tabs.on('click', function(e) {
  e.preventDefault();
  $kedumpvansed_tabs.removeClass('determinesud');
  $(this).addClass('determinesud');

  $('.sigadondake-delookouge').fadeOut(300);
  $(this.hash).delay(300).fadeIn();
  });

});

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

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

Демонстрация
2019-01-17 Загрузок: 1 Просмотров: 417 Комментарий: (2)

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

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

Комментарий: 2
Woody
Woody 2019-01-20 15:241
0
Отлично выполнено в стиле ZORNET. Думаю в будущем выйдет такая же тема, но в блоке уже будет не текст, а вывод материалов "Новости сайта, Каталог файлов(сайта)"
Kosten
Kosten 2019-01-20 18:542
0
Woody, эти закладки так по умолчанию шли, что сразу были замечены по очень знакомому дизайн.)))
avatar