ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Вкладки (табы) с использованием CSS и JS

Вкладки (табы) с использованием 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();
  });

});

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

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

Демонстрация
17 Января 2019 Загрузок: 2 Просмотров: 1687 Комментариев: (9)

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

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

Оставь свой отзыв

Комментарии: 9
Woody
Woody 20 Января 2019 15:241
0
Отлично выполнено в стиле ZORNET. Думаю в будущем выйдет такая же тема, но в блоке уже будет не текст, а вывод материалов "Новости сайта, Каталог файлов(сайта)"
Kosten
Kosten 20 Января 2019 18:542
0
Woody, эти закладки так по умолчанию шли, что сразу были замечены по очень знакомому дизайн.)))
ZhRoman
ZhRoman 18 Мая 2023 12:123
0
Возможно ли настроить его что бы он подстраивался под ширину вложенного контента и высоту.
Сайт не фиксированной шириной.
Kosten
Kosten 18 Мая 2023 17:364
0
Как именно подстраивался по ширине? Если говорить про текст, контент, то нужно поставить в стилях, где цвет текста text-align: justify; и текст будет подстроится под ширину.
ZhRoman
ZhRoman 18 Мая 2023 20:005
0
Если более точнее.
Сейчас у меня на сайте видео выкладывается от хостинга ютуб, в планах дублировать копию видео на vk видео-хостинге через табы на этой же странице. но видео с адаптивной шириной и высотой. Сайт не с фиксированной шириной и видео меняется в размерах в зависимости от монитора. И при оформлении в любой таб, контент под видео просто съезжает вверх под само видео.

-SAM-
-SAM- 19 Мая 2023 07:496
0
ZhRoman, и что мы должны увидеть по вашей ссылке? Вот как будут там стоять эти вкладки, тогда и пишите (а пока больше на спам похоже).
P.S.: лучше тему сделать в форуме "Просьба/Услуга" (ибо это не вопрос по uCoz), поскольку это начинаются какие-то переделки выложенного под себя, как понял... и здесь разговор вести неподходящее место (не поймут чего вы хотите, будет лишняя забивка комментариями материала).

UPD.: опять прописана была ссылка на сайт пользователя в материале. P.S.: и да, я минусы за спам тоже ставить могу (чтобы не было повадно заниматься таким). Ссылка на сайт пользователя не может считаться демонстрационной (тем более, что оно не касается текущего материала).

UPD.2: коммент про установку тех вкладок был перенесен в надлежащее место (сюда), а ссылки на сайт - удалены.
ZhRoman
ZhRoman 19 Мая 2023 08:487
0
Всё уже реализовано с помощью этих табов с не большим редактированием JS под задачу.
Итог с табами рабочими можно увидеть здесь.
В тестовом режиме запустил один материал с табами.
Kosten
Kosten 19 Мая 2023 12:248
0
На все нормально смотрится, вы бы хоть описали, что сделали, так как может другим пригодится.
ZhRoman
ZhRoman 19 Мая 2023 20:449
+1
Ну по сути, взял от сюда!
avatar