» »

Вертикальные табы CSS для сайта


Вертикальные табы CSS для сайта

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

Код, который ставим так где вам нужно.

Код
<div id="container">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">вкладка 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">вкладка 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">вкладка 3</label>
<input id="tab4" type="radio" name="tabs">
  <label for="tab4">вкладка 4</label>
<section id="content1">
<p>Описание</p>
</section>  
<section id="content2">
<p>Описание</p>
</section>  
<section id="content3">
<p>Сайт ZORNET - Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.  
</p>
</section>  
<section id="content4">
<p>Описание</p>
</section>  
</div>
</div>


CSS:

Код
*{box-sizing:border-box}
.tabs {
  width: 800px;
  padding: 0px;
  margin: 0 auto;
  position: relative;
  border: 1px solid #DEE8F2;
}
section {
  display: none;  
  padding: 15px;
  background: white;
  position: absolute;
  top: 0;
  left: 180px;
}
p {
  margin: 0;
}
input {
  display: none;
}
label {
  display: block;
  width: 180px;
  padding: 15px;
  color: #4F5966;
  background: #DEE8F2;
  cursor: pointer;
}
input:checked + label {
  color: #555;
  background: white;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
  display: block;
}
section {
  animation: scale 0.7s ease-in-out;
}
@keyframes scale {
  0% {
  transform: scale(0.9);
  opacity: 0;
  }
  50% {
  transform: scale(1.005);
  opacity: 0.5;
  }
  100% {
  transform: scale(1);
  opacity: 1;
  }
}


Вертикальные табы созданы на css

Вот, если описание будет небольшое.
28.09.2016 Просмотров: 420 Комментарий: (3)

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

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

Комментарий: 3
Сопрано
Сопрано 28.09.2016 21:241
0
Под форму комментарий лучше ставить горизонтальную, но здесь табы очень понятные, но они вертикальные. happy
FeStemBer
FeStemBer 28.09.2016 22:102
0
Но написано под оригинальные сайты, на этот явно не подойдет, а может и место найдется.
tsakonter
tsakonter 28.09.2016 22:193
0
Еще бы цифры убрать. хоть и выдают сколько именно таких подарков, но как то без них красивее.
avatar