Странно, что убрали возможность создания тем в этом форуме: Новые возможности форумов 
Код адаптирован под 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)