Вкладки в постах
Добавляет вкладки в посты (и не только!). Код адаптирован под HTML в сообщениях от сервиса майбб.ру.
Автор скрипта: kolobdur74
В теории должен работать не только в сообщениях. Код состоит из двух частей, первая часть для вставки в НТМЛ верх или туда где все css-cтили (но без <style></style>), вторая в сам пост. Оформление по умолчанию минимальное. Предусмотрено добавка вкладок до 10 вкладок на каждую сторону (сверху, слева, справа и снизу), по умолчанию стоит 4 вкладки на сторону.
Коды для постов ниже.
С 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 /* Коллонки */ / 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>Верх и низ
Только низ
Справа и слева
Только слева
Только справа
Таблица с вкладками
[инструкция: мышкой тыкаешь на названия сверху, текст поехал. еще можно на картинку навести - тоже поедет].
Автор скрипта: вещий дух
Таблица с вкладками [инструкция: мышкой тыкаешь на названия сверху, текст поехал. еще можно на картинку навести - тоже поедет]. Писал для первого сообщения мастерской, но стало лень добивать последнюю вкладку с портфолио и писать туда код для превью дизайнов. Короче - отдаю даром. Настроить могу помочь, если надо, а вот переписывать чтоб там еще слева/справа прыгало и сверкало, сверху вниз шарик беспорядочно летал и еще одно окошко добавить, чтоб туда всунуть еще окошко с окошком и картинкой - не буду. Сами разберетесь тогда хд
Псст. Поскольку он весь такой красивенький, коль берете - огромная просьба не убирать копи. Спасибо х)
