Tabs (табы) | CSS

• CSS Tabs с переходом по клику
• CSS Tabs, с переходом по щелчку
• CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется.
• Меню вкладками, где смена блоков происходит при наведении мышки. Появляющееся поле не фиксируется и как только курсор уходит с формы, снова видимой становится первая часть
• Меню вкладками, где поле изначально скрыто. Появляется или при наведении, или по клику. Если щелкнуть вне меню, то оно свернётся
• Tabs с небольшим JavaScript без посторонних библиотек
• Спойлер HTML (показать/скрыть невидимый блок)
• Раздвигаемая таблица
• Раздвигаемый список CSS

CSS Tabs с переходом по клику

CSSHTMLДополнительно

<style> .korpus > div, .korpus > input { display: none; } .korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; } .korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; } .korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1), .korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2), .korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; } </style>

<div class="korpus"> <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Дополнительно</label> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> </div>

Этот же метод применяется и при показать/скрыть блок div по клику.

CSSHTMLДоп

<style> .korpus0 { position: relative; } .korpus0 > div, .korpus0 > input { display: none; min-height: 150px; /* 50px × 3 вкладки */ } .korpus0 label { position: absolute; right: 0; top: 0; width: 50px; height: 50px; border: 1px solid #aaa; line-height: 50px; text-align: center; cursor: pointer; } .korpus0 label:nth-of-type(2) { top: 51px; /* 50px + 1px border */ } .korpus0 label:nth-of-type(3) { top: 102px; /* 50px + 1px border первой вкладки + 1px border второй вкладки */ } .korpus0 input[type="radio"]:checked + label { border-left: 1px solid #fff; } .korpus0 > input:nth-of-type(1):checked ~ div:nth-of-type(1), .korpus0 > input:nth-of-type(2):checked ~ div:nth-of-type(2), .korpus0 > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 1px 55px 1px 5px; border: 1px solid #aaa; } </style>

<div class="korpus0"> <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Доп</label> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> </div>

тот же принцип, что и сверху

CSS Tabs, с переходом по щелчку

CSSHTMLДополнительно

<style> #tab2, #tab3 {position: fixed; } .menu1 > a, .menu1 #tab2:target ~ a:nth-of-type(1), .menu1 #tab3:target ~ a:nth-of-type(1), .menu1 > div { padding: 5px; border: 1px solid #aaa; } .menu1 > a { line-height: 28px; background: #fff; text-decoration: none; } #tab2, #tab3, .menu1 > div, .menu1 #tab2:target ~ div:nth-of-type(1), .menu1 #tab3:target ~ div:nth-of-type(1) {display: none; } .menu1 > div:nth-of-type(1), .menu1 #tab2:target ~ div:nth-of-type(2), .menu1 #tab3:target ~ div:nth-of-type(3) { display: block; } .menu1 > a:nth-of-type(1), .menu1 #tab2:target ~ a:nth-of-type(2), .menu1 #tab3:target ~ a:nth-of-type(3) { border-bottom: 2px solid #fff; } </style>

<div class="menu1"> <br id="tab2"/><br id="tab3"/> <a href="#tab1">CSS</a><a href="#tab2">HTML</a><a href="#tab3">Дополнительно</a> <div>вкладка 1</div> <div>вкладка 2</div> <div>вкладка 3</div> </div>

Этот же метод применяется и в случае реализации lightbox на CSS.

CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется

Если :hover заменить на :active, то будет самый чистый HTML код табов, где смена содержимого осуществляется нажатием на вкладку.

CSSHTMLДополнительноДополнительно

<style> .korpus1 { position: relative; height: 250px; } .korpus1 > span { display: inline-block; width: 20%; line-height: 28px; height: 28px; border: 1px solid #aaa; border-bottom: none; text-align: center; cursor: pointer; } .korpus1 > div { position: absolute; height: 209px; height: calc(250px - 28px - 1px - 10px - 2px); width: 100%; width: calc(100% - 10px - 2px); padding: 5px; border: 1px solid #aaa; background: #fff; } .korpus1 > div:nth-of-type(n+2) { visibility: collapse; -webkit-transition: 999999s; transition: 999999s; } .korpus1 > span + span:hover + span + span ~ div:nth-of-type(2), .korpus1 > span + span + span:hover + span ~ div:nth-of-type(3), .korpus1 > span + span + span + span:hover ~ div:nth-of-type(4) { visibility: visible; -webkit-transition: .01s; transition: .01s; } .korpus1 > span:hover + span + span + span ~ div:nth-of-type(2), .korpus1 > span:hover + span + span + span ~ div:nth-of-type(3), .korpus1 > span:hover + span + span + span ~ div:nth-of-type(4), .korpus1 > span + span:hover + span + span ~ div:nth-of-type(3), .korpus1 > span + span:hover + span + span ~ div:nth-of-type(4), .korpus1 > span + span + span:hover + span ~ div:nth-of-type(2), .korpus1 > span + span + span:hover + span ~ div:nth-of-type(4), .korpus1 > span + span + span + span:hover ~ div:nth-of-type(2), .korpus1 > span + span + span + span:hover ~ div:nth-of-type(3) { visibility: hidden; -webkit-transition: .01s; transition: .01s; } .korpus1 > div:hover { visibility: visible; } .korpus1 > div:before { border-top: 2px solid #fff; content: ""; position: absolute; left: 0; top: -2px; width: 20%; } .korpus1 > div:nth-of-type(2):before { left: 20%; left: calc(20% + 3px); } .korpus1 > div:nth-of-type(3):before { left: 40%; left: calc(40% + 5px); } .korpus1 > div:nth-of-type(4):before { left: 60%; left: calc(60% + 7px); } </style>

<div class="korpus1"> <span>CSS</span><span>HTML</span><span>Дополнительно</span><span>Дополнительно</span> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> <div>четвёртая вкладка</div> </div>

Этот же метод применяется и во втором примере прокрутки CSS.

Данные отсутствуют

Реализация попроще

CSS

<style>
#raz { /* корпус */ 
  position: relative;
  height: 250px;
  border-top: 30px solid #fff;
}
#raz > div { /* вкладка */ 
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  visibility: collapse;
  transition: 0s 9999999s;
  box-sizing: border-box;
  background: #fff;
  padding: 5px;
}
#raz > div:before { /* рамка вкладки */ 
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: #808080 solid 1px;
  border-top: none;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
  visibility: visible;
  transition: 0s;
}
#raz:hover > div:not(:hover) {
  visibility: hidden;
  transition: 0s;
}
#raz > 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;
}
#raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);}
#raz > div:nth-of-type(2) > span {left: 25%;}
#raz > div:nth-of-type(3) > span {left: 50%;}
#raz > div:nth-of-type(4) > span {left: 75%;}
#raz > div:hover > span, #raz > div:nth-of-type(1) > span {
  border-bottom-color: rgba(0,0,0,0);
  transition:  0s;
}
#raz:hover > div:not(:hover) > span {
  border-bottom-color: rgba(128,128,128,.99);
  transition:  0s;
}
#raz > 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);
}
</style>

HTML

<div id="raz">
  <div><span>CSS</span>1 вкладка</div>
  <div><span>HTML</span>2 вкладка</div>
  <div><span>Дополнительно</span>3 вкладка</div>
  <div><span>Дополнительно</span>4 вкладка</div>
</div>

Дополнительно3 вкладка

Дополнительно4 вкладка

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

Для копирования текста используйте комбинацию клавиш CTRL+C.

1. <style> .korpus2 { position: relative; height: 250px; margin: 0; padding: 29px 0 0 0; padding: calc(28px + 1px) 0 0 0; } .korpus2 li, .korpus2 li:after { position: absolute; border: 1px solid #aaa; background: #fff; } .korpus2 li { width: 100%; height: 240px; height: calc(250px - 10px); list-style: none; padding: 5px; } .korpus2 li:after { content: attr(data-tab); left: -1px; top: -30px; top: calc(-28px - 2px); width: 20%; line-height: 28px; text-align: center; cursor: pointer;} .korpus2 li:nth-of-type(2):after { left: 20%; } .korpus2 li:nth-of-type(3):after { left: 40%; } .korpus2 li:hover:after, .korpus2 li:nth-of-type(1):after { border-bottom: 2px solid #fff; } .korpus2 li:after, .korpus2 li:hover, .korpus2 li:nth-of-type(1) { z-index: 1; } </style>
2. <ol class="korpus2"> <li data-tab="CSS">первая вкладка <li data-tab="HTML">вторая вкладка <li data-tab="Дополнительно">третья вкладка </ol>
3. Этот же метод применяется и в случае если картинка меняется при наведении на неё.

Меню вкладками, где поле изначально скрыто. Появляется или при наведении, или по клику. Если щелкнуть вне меню, то оно свернётся.

1. CSS
   <style> .korpus3 { position: relative; z-index: 1; } .korpus3, .korpus3 li { margin: 0; padding: 0; } .korpus3 li { display: inline-block; border: 1px solid #aaa; padding: 5px 10px; cursor: pointer; } .korpus3 li div, .korpus3:hover li:not(:hover) div { position: absolute; top: 100%; left: 0; width: 100%; box-sizing: border-box; margin-top: -1px; border: 1px solid #aaa; background: #fff; cursor: default; visibility: hidden; } .korpus3 li:hover div, .korpus3 li:focus div { visibility: visible; } .korpus3 li:hover { background: #f1f1f1; } .korpus3 li:focus { background: #aaa; } </style>
2. HTML
   <ol class="korpus3"> <li tabindex="0">CSS<div>первая вкладка</div> <li tabindex="0">HTML<div>вторая вкладка</div> <li tabindex="0">Дополнительно<div>третья вкладка</div> </ol>
3. Дополнительно
   Тот же приём с tabindex, который использован при создании адаптивного меню и всплывающей подсказки