Благодарим за выбор нашего сервиса!
Тестовое сообщение
Сообщений 1 страница 2 из 2
Поделиться22023-09-16 14:21:05
<!-- В пост. Ёжик. (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>