Табы или панель вкладок с помощью CSS

Віталий

8 років ago

Доброго времени суток 🙂

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

На моем сайте уже была статья о табах. Кому интересно можете ознакомится со статьей - Табы или панель вкладок в WordPress без плагинов. По сути табы из той статьи можно организовать где угодно, не только на WordPress. Разница между способом из той статьи и этим, в том, что там табы работают с помощью - jQuery, а в этой статье я расскажу как сделать табы, используя CSS.

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

<div id="tabs_wr">
  <div><span>Вкладка 1</span>1 вкладка и ее содержимое</div>
  <div><span>Вкладка 2</span>2 вкладка и ее содержимое</div>
  <div><span>Вкладка 3</span>3 вкладка и ее содержимое</div>
  <div><span>Вкладка 4</span>4 вкладка и ее содержимое</div>
</div>

Тут все просто. Родительский контейнер, внутри которого 4 блока. Это наши вкладки, которые переключаются нажатием на span. В нем размещаете название табов, а содержимое уже в самом блоке.

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

#tabs_wr { /* контейнер */ 
  position: relative;
  height: 250px;
  width:500px;
  margin:0 auto;
  border-top: 30px solid #fff;
}
#tabs_wr > div { /* вкладка */ 
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  visibility: collapse;
  transition: 0s 9999999s;
  box-sizing: border-box;
  background: #fff;
  padding: 5px;
}
#tabs_wr > div:before { /* рамка вкладки */ 
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: #808080 solid 1px;
  border-top: none;
}
#tabs_wr > div:hover, #tabs_wr > div:nth-of-type(1) {
  visibility: visible;
  transition: 0s;
}
#tabs_wr:hover > div:not(:hover) {
  visibility: hidden;
  transition: 0s;
}
#tabs_wr > div > span { /* таб */ 
  position: absolute;
  top: -30px;
  line-height: 30px;
  height: 30px;
  width: 25%; /* 4 таба, а значит 100/4 */ 
  text-align: center;
  box-sizing: border-box;
  border: 1px solid rgb(128,128,128);
  border-left-color: rgba(0,0,0,0);
  visibility: visible;
  transition: 0s 9999999s;
  cursor: pointer;
}
#tabs_wr > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);}
#tabs_wr > div:nth-of-type(2) > span {left: 25%;}
#tabs_wr > div:nth-of-type(3) > span {left: 50%;}
#tabs_wr > div:nth-of-type(4) > span {left: 75%;}
#tabs_wr > div:hover > span, #tabs_wr > div:nth-of-type(1) > span {
  border-bottom-color: rgba(0,0,0,0);
  transition:  0s;
}
#tabs_wr:hover > div:not(:hover) > span {
  border-bottom-color: rgba(128,128,128,.99);
  transition:  0s;
}
#tabs_wr > div:not(:nth-of-type(1)):not(:hover):after { /* появляется нижняя граница у первого таба */ 
  content: "";
  left: 0;
  position: absolute;
  top: -1px;
  width: 25%;
  border-top: 1px solid rgb(128,128,128);
}

Вот и все табы. При наличии навыков в CSS можете переделать внешний вид и задать нужные параметры, чтобы преобразить табы.

На этом все, спасибо за внимание. 🙂

Exit mobile version