Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Вкладки в постах (HTML и CSS)


Вкладки в постах (HTML и CSS)

Сообщений 1 страница 11 из 11

1

Странно, что убрали возможность создания тем в этом форуме: Новые возможности форумов  :dontknow:

Код адаптирован под HTML в сообщениях от сервиса. В теории должен работать не только в сообщениях. Код состоит из двух частей, первая часть для вставки в НТМЛ верх, вторая в сам пост. Оформление по умолчанию минимальное. Предусмотрено добавка вкладок до 10 вкладок на каждую сторону (сверху, слева, справа и снизу), по умолчанию стоит 4 вкладки на сторону.

Первая часть в НТМЛ верх:

Код
Код:
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-start {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

Оформление в этой части кода:

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

Код для постов будет ниже в других сообщениях, по посту на код.

Инструкция по добавлению вкладок в разработке.

Навигация по теме:

1. С 4 сторон, ёжик.
2. Только верх.
3. Верх и слева.
4. Верх и справа.
5. Сверху, слева и справа.
6. Верх и низ.
7. Только низ.
8. Справа и слева.
9. Только слева.
10. Только справа.

Отредактировано kolobdur74 (Вт, 6 Июл 2021 06:33:16)

+3

2

С 4 сторон, ёжик.

Код
Код:
<!-- В пост. Ёжик. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr    
 
                 /* навигация слева и справа и поле */
                 "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
                 "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
                 "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
                 "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
                  
                 /* навигация низ */
                 "nav-bottom-start nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4 nav-bottom-end" 1fr
                   
                 /* Коллонки */
                 / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%; 
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>

  <!-- Навигация слева и справа --> 
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
  
  <!-- Навигация низ -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-bottom-start">
  <label for="nav-bottom-start" class="nav-bottom-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-bottom-1">
  <label for="nav-bottom-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-bottom-2">
  <label for="nav-bottom-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-bottom-3">
  <label for="nav-bottom-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-bottom-4">
  <label for="nav-bottom-4">Вкладка 4</label>
  <!-- Нулевой с конца -->
  <input type="radio" name="tabs-body" id="nav-bottom-end">
  <label for="nav-bottom-end" class="nav-bottom-end"></label>

  <div class="tabs-body">
	<!-- Контент вкладок сверху -->
	<div class="body-top-1">
	  <p>Текст вкладки верх 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
    
	<!-- Контент вкладок снизу -->
	<div class="body-bottom-1">
	  <p>Текст вкладки низ 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-bottom-2">Текст вкладки низ 2</div>
    <div class="body-bottom-3">Текст вкладки низ 3</div>
    <div class="body-bottom-4">Текст вкладки низ 4</div>
	
	<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
	
	<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-start {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Ёжик. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr                                   
        
         /* навигация слева и справа и поле */
         "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
        
         /* навигация низ */
         "nav-bottom-start nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4 nav-bottom-end" 1fr
                 
         /* Коллонки */
         / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>

  <!-- Навигация слева и справа -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
 
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
 
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
 
  <!-- Навигация низ -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-bottom-start">
  <label for="nav-bottom-start" class="nav-bottom-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-bottom-1">
  <label for="nav-bottom-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-bottom-2">
  <label for="nav-bottom-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-bottom-3">
  <label for="nav-bottom-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-bottom-4">
  <label for="nav-bottom-4">Вкладка 4</label>
  <!-- Нулевой с конца -->
  <input type="radio" name="tabs-body" id="nav-bottom-end">
  <label for="nav-bottom-end" class="nav-bottom-end"></label>

  <div class="tabs-body">
<!-- Контент вкладок сверху -->
<div class="body-top-1">
  <p>Текст вкладки верх 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
   
<!-- Контент вкладок снизу -->
<div class="body-bottom-1">
  <p>Текст вкладки низ 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-bottom-2">Текст вкладки низ 2</div>
    <div class="body-bottom-3">Текст вкладки низ 3</div>
    <div class="body-bottom-4">Текст вкладки низ 4</div>

<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>

<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Вт, 6 Июл 2021 06:35:01)

+1

3

Только верх.

Код
Код:
<!-- В пост. Только верх. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr
         
                 /* Поле */	
    	         "tabs-body tabs-body tabs-body tabs-body" 300px             	          	
         
                 /* Коллонки */
    	         / 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>

  <div class="tabs-body">
	<!-- Контент вкладок сверху -->
	<div class="body-top-1">
	  <p>Текст вкладки верх 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr
         
                 /* Поле */
             "tabs-body tabs-body tabs-body tabs-body" 300px                       
         
                 /* Коллонки */
             / 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>

  <div class="tabs-body">
<!-- Контент вкладок сверху -->
<div class="body-top-1">
  <p>Текст вкладки верх 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
  </div>
</div>
[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:45:02)

+1

4

Верх и слева.

Код
Код:
<!-- В пост. Верх и слева. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr                                    
         
                 /* навигация слева и поле */
                 "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
                 "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
                 "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
                 "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr         
         
                 /* Коллонки */
    	         / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  
  <!-- Навигация слева -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>   
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label> 

  <div class="tabs-body">
	<!-- Контент вкладок сверху -->
	<div class="body-top-1">
	  <p>Текст вкладки верх 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
	
	<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Верх и слева. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr                                   
        
          /* навигация слева и поле */
         "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr        
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
 
  <!-- Навигация слева -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label> 
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label>
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>   
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>

  <div class="tabs-body">
<!-- Контент вкладок сверху -->
<div class="body-top-1">
  <p>Текст вкладки верх 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>

<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
  </div>
</div>[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 11:23:14)

+1

5

Верх и справа.

Код
Код:
<!-- В пост. Верх и справа. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr                                    
         
          /* навигация справа и поле */
    	     "tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr    	 
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>
  
  <!-- Навигация справа --> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
  

  <div class="tabs-body">
	<!-- Контент вкладок сверху -->
	<div class="body-top-1">
	  <p>Текст вкладки верх 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
	
	<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Верх и справа. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr                                   
        
          /* навигация справа и поле */
         "tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr   
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>
 
  <!-- Навигация справа -->
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
 

  <div class="tabs-body">
<!-- Контент вкладок сверху -->
<div class="body-top-1">
  <p>Текст вкладки верх 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>

<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>
[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:45:30)

+1

6

Сверху, слева и справа.

Код
Код:
<!-- В пост. Сверху, слева и справа. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr                                    
         
         /* навигация слева и справа и поле */
    	     "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr     
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>
  
  <!-- Навигация слева и справа -->
  
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
  

  <div class="tabs-body">
	<!-- Контент вкладок сверху -->
	<div class="body-top-1">
	  <p>Текст вкладки верх 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
	
	<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
	
	<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Сверху, слева и справа. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr                                   
        
         /* навигация слева и справа и поле */
         "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr    
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>
 
  <!-- Навигация слева и справа -->
 
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
 
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
 
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
 

  <div class="tabs-body">
<!-- Контент вкладок сверху -->
<div class="body-top-1">
  <p>Текст вкладки верх 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>

<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>

<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>
[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:45:43)

+1

7

Верх и низ.

Код
Код:
<!-- В пост. Верх и низ. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr                                    
         
         /* Только поле (навигация сверху или снизу) */
    	     "tabs-body tabs-body tabs-body tabs-body" 300px              
         
         /* навигация низ */
         "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->  
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  
  <!-- Навигация низ -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-bottom-1">
  <label for="nav-bottom-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-bottom-2">
  <label for="nav-bottom-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-bottom-3">
  <label for="nav-bottom-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-bottom-4">
  <label for="nav-bottom-4">Вкладка 4</label>
  

  <div class="tabs-body">
	<!-- Контент вкладок сверху -->
	<div class="body-top-1">
	  <p>Текст вкладки верх 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
	
	<!-- Контент вкладок снизу -->
	<div class="body-bottom-1">
	  <p>Текст вкладки низ 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-bottom-2">Текст вкладки низ 2</div>
    <div class="body-bottom-3">Текст вкладки низ 3</div>
    <div class="body-bottom-4">Текст вкладки низ 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Верх и низ. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr                                   
        
         /* Только поле (навигация сверху или снизу) */
         "tabs-body tabs-body tabs-body tabs-body" 300px             
        
         /* навигация низ */
         "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed">
  <!-- Навигация верх --> 
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
 
  <!-- Навигация низ -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-bottom-1">
  <label for="nav-bottom-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-bottom-2">
  <label for="nav-bottom-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-bottom-3">
  <label for="nav-bottom-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-bottom-4">
  <label for="nav-bottom-4">Вкладка 4</label>
 

  <div class="tabs-body">
<!-- Контент вкладок сверху -->
<div class="body-top-1">
  <p>Текст вкладки верх 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>

<!-- Контент вкладок снизу -->
<div class="body-bottom-1">
  <p>Текст вкладки низ 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-bottom-2">Текст вкладки низ 2</div>
    <div class="body-bottom-3">Текст вкладки низ 3</div>
    <div class="body-bottom-4">Текст вкладки низ 4</div>
  </div>
</div>
[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:45:58)

0

8

Только низ.

Код
Код:
<!-- В пост. Только низ. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* Только поле */
    	     "tabs-body tabs-body tabs-body tabs-body" 300px              
         
         /* навигация низ */
         "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">  
  <!-- Навигация низ -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-bottom-1" checked>
  <label for="nav-bottom-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-bottom-2">
  <label for="nav-bottom-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-bottom-3">
  <label for="nav-bottom-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-bottom-4">
  <label for="nav-bottom-4">Вкладка 4</label>
  

  <div class="tabs-body">
	<!-- Контент вкладок снизу -->
	<div class="body-bottom-1">
	  <p>Текст вкладки низ 1</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
    <div class="body-bottom-2">Текст вкладки низ 2</div>
    <div class="body-bottom-3">Текст вкладки низ 3</div>
    <div class="body-bottom-4">Текст вкладки низ 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Только низ. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* Только поле */
         "tabs-body tabs-body tabs-body tabs-body" 300px             
        
         /* навигация низ */
         "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed"> 
  <!-- Навигация низ -->
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-bottom-1" checked>
  <label for="nav-bottom-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-bottom-2">
  <label for="nav-bottom-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-bottom-3">
  <label for="nav-bottom-3">Вкладка 3</label>
  <!-- Четвертый -->
  <input type="radio" name="tabs-body" id="nav-bottom-4">
  <label for="nav-bottom-4">Вкладка 4</label>
 

  <div class="tabs-body">
<!-- Контент вкладок снизу -->
<div class="body-bottom-1">
  <p>Текст вкладки низ 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-bottom-2">Текст вкладки низ 2</div>
    <div class="body-bottom-3">Текст вкладки низ 3</div>
    <div class="body-bottom-4">Текст вкладки низ 4</div>
  </div>
</div>[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:46:10)

0

9

Справа и слева.

Код
Код:
<!-- В пост. Справа и слева. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация слева и справа и поле */
    	     "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">  
  <!-- Навигация слева и справа -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1" checked>
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
  

  <div class="tabs-body">
	<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
	
	<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Справа и слева. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация слева и справа и поле */
         "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed"> 
  <!-- Навигация слева и справа -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1" checked>
  <label for="nav-left-1">Вкладка 1</label> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
 
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
 
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
 

  <div class="tabs-body">
<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>

<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>
[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:46:23)

0

10

Только слева.

Код
Код:
<!-- В пост. Только слева. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация слева и поле */
    	     "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">  
  <!-- Навигация слева --> 
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1" checked>
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
   
  <div class="tabs-body">
	<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Только слева. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация слева и поле */
         "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed"> 
  <!-- Навигация слева -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1" checked>
  <label for="nav-left-1">Вкладка 1</label> 
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label>
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
   
  <div class="tabs-body">
<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>
  </div>
</div>
[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:46:36)

+1

11

Только справа.

Код
Код:
<!-- В пост. Только справа. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация справа и поле */
    	     "tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">  
  <!-- Навигация справа --> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1" checked>
  <label for="nav-right-1">Вкладка 1</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
  
  <div class="tabs-body">
	<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>

[html]
<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  padding: 12px 20px;
  transition: background-color .3s;
  text-align: center;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: transparent;
  color: #191970;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #4EC6DE !important;
  color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
  border: 2px solid #4EC6DE;
  background: transparent;
  color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-end {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
  width: auto;
  height: auto;
  position: relative;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>

<!-- В пост. Только справа. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация справа и поле */
         "tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
        
         /* Коллонки */
         / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;        
}
</style>

<div class="tabbed"> 
  <!-- Навигация справа -->
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1" checked>
  <label for="nav-right-1">Вкладка 1</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
 
  <div class="tabs-body">
<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>
[/html]

Вернуться к первому посту

Отредактировано kolobdur74 (Пн, 5 Июл 2021 00:46:48)

+4


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Вкладки в постах (HTML и CSS)