Табы на чистом CSS

@SaoMaSao · Регистрация: 10.08.2013

Студворк — интернет-сервис помощи студентам

Помогите сделать горизонтальный спойлер(ы), чтоб несколько в горизонт располагались. Но тело самого спойлера (где показывается скрытая инфа) было объединено! Если я не понятно изъяснился прилагаю к сообщению анимацию:

Сам код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html><head><link href="css.css" 
rel="stylesheet" 
type="text/css"></head><body>
<div class="open" role="tab" 
tabindex="1" ><div role="tabpanel" 
class="desc"><p>Spoiler_1</p></div> 
<span role="button" tabindex="0" 
class="close">Сполер1 
Закрыть</span></div>
<div class="open" role="tab" 
tabindex="1" ><div role="tabpanel" 
class="desc"><p>Spoiler_2</p></div> 
<span role="button" tabindex="0" 
class="close">Сполер1 
Закрыть</span></div>
</body></html>

КоД CSS:

CSS
1
2
3
4
5
6
7
8
.desc{padding: 0 5px;border-radius: 0  0px 0px;margin-top:20px;}
.desc p{cursor:text;}
.close{display:none;width:100%;height:20px;border-radius: 0px 0px 0 0;text-indent:5px;cursor:default;position:absolute;top:0px;left:0px;}
.open:before{content:'Сполер1 Открыть';cursor:default;text-indent:5px;border-radius: 0px 0px 0 0;width:100%;height:22px;display:block;position:absolute;top:0px;left:0;}
.open {margin: 0px 0 0 0px;border:solid 1px red; height:18px;width:560px;outline: #d5bfc6 inherit;float:left;position:relative;overflow:hidden;-webkit-transition: height 0.5s ease;-moz-transition: height 0.5s ease;-ms-transition: height 0.5s ease;-o-transition: height 0.5s ease;transition: height 0.5s ease;} 
.open:focus{height:auto;}
.open:focus .close{display:block;}
.open:focus:before{display: none;}

Голова уже дымится =( Может кто поможет с проблемой?

@Taatshi · 21.08.2013, 00:52

SaoMaSao, это называется табы а не спойлер. Название темы поправлено. И почитайте правила форума. Одна тема - один вопрос

@newJS · 21.08.2013, 07:31

по этим ссылкам есть несколько разных версий табов, хотя переключение и фиксация сделаны на js или вообще нет
если из этого что то похоже на требуемое, тогда и будем думать дальше, я конечно согласен с Taatshi, что это не спойлер, но кто его знает, есть же люди которые Жигуль машиной называют...
Кроссбраузерность для вкладок
сложное меню

@SaoMaSao · 21.08.2013, 08:08 **[ТС]**

Спасибо большое за разъяснения! Но у меня осталась парочка вопросов:
1. Можно ли сделать табы Изначально свернутыми что ли, выкладываю изображение чтобы меня поняли

Просто как видно на скрине у меня будет целый список фильмов. И изночально раскрытые табы портят картину (были бы они свернуты как спойлеры)

Второй вопрос я забыл =)

Дизайн получился потрясный, но вот не все умею, эх помогите.

@newJS · 22.08.2013, 07:11

Сообщение от SaoMaSao

1. Можно ли сделать табы Изначально свернутыми что ли, выкладываю изображение чтобы меня поняли

А где код? html, css.
Свернуть их все нужно, это все что можно без кода сказать.

@SaoMaSao · 22.08.2013, 19:12 **[ТС]**

Собственно код:

HTML5
1
2
3
4
5
6
7
8
<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">ONE</label>
<input type="radio" name="odin" id="vkl2"/><label for="vkl2">TWO</label>
<input type="radio" name="odin" id="vkl3"/><label for="vkl3">TREE</label> 
<div>one</div>
<div>two</div>
<div>tree</div>
</div>

CSS
1
2
3
4
5
.korpus > div, .korpus > input{display:none;text-align:left;}
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1), 
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2), 
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3){display:block;}
div{text-align:center;}

Код взят с сайта shpargalkablog.ru
Если есть мысли как облегчит код (вплоть до удаления пробелов) то пишите.
Тестил в мозилле, хроме и опере. Код кроссбраузерен. Хотя что там тестить?

Остается пара вопросов:
1. Как добавить изображения в табы (я имею в виду - и + ) подозреваю что мне поможет content:url
2. И чтобы все дело это дело менялось при разворачивании +, а при сворачивании появлялся -
3. Главный вопрос состоит в том, чтоб при загрузке страницы табы были свернуты.

Я очень благодарен что Вы мне помогли!!! И за то что не проигнорировали меня с моей проблемой.
i'll be back!

@newJS · 23.08.2013, 08:16

все это не будет работать в ие8 и ниже, это не очень хорошо

Сообщение от SaoMaSao

3. Главный вопрос состоит в том, чтоб при загрузке страницы табы были свернуты.

Удалить checked="checked" в html

С картинками сложней, на js без проблем, а на css не знаю, если и можно то опять же, не будет работать в ие8, а со скриптами будет.
Активный таб можно выделить фоном, цветом текста, и картинки не обязательно, можно символы.

Сообщение от SaoMaSao

Если есть мысли как облегчит код (вплоть до удаления пробелов)

Кто мешает сжать, берешь и удаляешь все лишнее, потом вытягиваешь в одну строку.

@SaoMaSao · 23.08.2013, 23:57 **[ТС]**

Не знаю, в ie не тестил (удалил браузер, а зря). Если говорить откровенно, то браузер удалил когда Винду переустановил (зачем мне корявый брауз?). Сайт забекапил на диске (устал я от него немного). А сейчас опять вдохновение, что ли появилось.

За checked СПАСИБО!
По поводу Js (ничего личного не имею) знаю, что утяжеляет страницы многократно. А зачем утяжелять когда можно добиться того же (чего конкретно мне требуется) на CSS и PhP?

Сообщение от newJS

Активный таб можно выделить фоном, цветом текста, и картинки не обязательно, можно символы.

Это да, но вот символы - лучше без них (если делать, тогда чтоб глаз радовало, а то зайдешь на какой-нибудь сайт от ucoz и просто хренееш!)

Сообщение от newJS

Кто мешает сжать, берешь и удаляешь все лишнее, потом вытягиваешь в одну строку.

Не о том я имел в виду. Вот к примеру можно записать так:

CSS
1
.class{background-image:url(img.gif);background-repeat:no-repeat;background-position:left;}

А можно так, существенно уменьшив код:

CSS
1
.class{background:url(img.gif) no-repeat left;}

Разница очевидна:
1. Кода меньше
2. Код более читабелен
3. Код будет интерпретироваться быстрее
Я о там что кто этого не знает, то будет пользоваться 1 вариантом.
А кто знает 2-м.
Про пробелы ёжу понятно.
Учиться самостоятельно хорошо, но медленно, обучаться у наставника (у мастера) в разы быстрее. Китайская мудрость. Немного другими словами, но суть ясна. Это я к тому, что Css я знаю не очень, потому и узнаю можно ли еще что или как-то упростить, уменьшить код и т.д.
За checked спасибо. Обратил только то, что он 1 раз повторяется для первого инпута, но теперь понятно.

Если есть какие мысли, пиши.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	21.08.2013, 00:52
	SaoMaSao, это называется табы а не спойлер. Название темы поправлено. И почитайте правила форума. Одна тема - один вопрос 1

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	21.08.2013, 07:31
	по этим ссылкам есть несколько разных версий табов, хотя переключение и фиксация сделаны на js или вообще нет если из этого что то похоже на требуемое, тогда и будем думать дальше, я конечно согласен с Taatshi, что это не спойлер, но кто его знает, есть же люди которые Жигуль машиной называют... Кроссбраузерность для вкладок сложное меню 1

@SaoMaSao 0 / 0 / 0 Регистрация: 10.08.2013 Сообщений: 5
	21.08.2013, 08:08 [ТС]
	Спасибо большое за разъяснения! Но у меня осталась парочка вопросов: 1. Можно ли сделать табы Изначально свернутыми что ли, выкладываю изображение чтобы меня поняли Просто как видно на скрине у меня будет целый список фильмов. И изночально раскрытые табы портят картину (были бы они свернуты как спойлеры) Второй вопрос я забыл =) Дизайн получился потрясный, но вот не все умею, эх помогите. 0