Comments 27
webkit такой webkit :(
в том самом небольшом примере на хроме проблемы, капитальные. Опера ок.
Спасибо за обзор.
в том самом небольшом примере на хроме проблемы, капитальные. Опера ок.
Спасибо за обзор.
+3
> Автобус.jpg
Троллейбус.jpg!
Троллейбус.jpg!
+4
Выпадающее меню с использованием :checked. Страница предназначена для небольших экранов, поэтому чтобы увидеть в действии — сожмите окно браузера < 800px.
+1
Пошел на qutim.org и проверил, не вышла ли новая версия :) Вы зачем qutIM упомянули? :)
0
типа опа
Functional CSS Tabs Revisited
Там же в комментах:
jsfiddle.net/bUjQm/21/
jsfiddle.net/paullferguson/Sv54G/3/
Functional CSS Tabs Revisited
Там же в комментах:
jsfiddle.net/bUjQm/21/
jsfiddle.net/paullferguson/Sv54G/3/
0
Прочитав статью решил по экспериментировать, ниже реализация с использованием input:focus:
HTML:
CSS:
HTML:
<section>
<input type="text" value=" "/>
<input type="text" value=" "/>
<input type="text" value=" "/>
<hr/>
<article>Text 1</article>
<article>Text 2</article>
<article>Text 3</article>
</section>
CSS:
input
{
text-indent: -999999px;
cursor: pointer;
border: 0;
outline: none;
background: #0F0;
width: 50px;
}
input:focus
{
background: #F00;
}
input:focus + input + input + hr + article,
input:focus + input + hr + article + article,
input:focus + hr + article + article + article
{
display: block;
}
article
{
display: none;
}
/* Hack for Webkit */
section {-webkit-animation: 0.1s hack infinite}
@-webkit-keyframes hack{from{margin:0;padding:0}to{margin:0;padding:0}}
0
Интересно, почему для реализации одного логического элемента надо обязательно использовать элемент с совершенно другой логикой и перецарапать полностью его поведение?
0
Общность, равноценная общности кошки с попугаем по критериям количества глаз на голове. По мне так тут больше подходит список определений, пушо табы это не выбор опции, это выбор показывать контент, релевантный заголовку в табе, который этот контент определяет. Плюс вот тебе и ярлыки, вот тебе и сменные области, вот тебе и замыкающая оболочка, не говоря уже о простоте стилевого и скриптового контроля.
0
Список определений, имхо, куда меньше подходит. Заголовок таба же это нечто вроде тултипа или лабела :) — так, справочная информация для удобства. Но никак он контент не определяет.
+1
UFO just landed and posted this here
Ну в табе с заголовком «Кошка» инфу про попугая никому же не придет в голову искать, согласны? Чем не определение контента соответствующего таба и чем не повод считать длку подходящей для этой структуры?
0
Имхо, если уж сязались с CSS3, то можно сделать проще:
В этом случае ваш хак с анимацией не нужен, работает и без него.
Есть и другой вариант, для этого нужно добавить либо id для <article>, либо другой атрибут с уникальным значением, например:
После чего правила становятся проще:
#tab1:checked ~ article:nth-of-type(1),
#tab2:checked ~ article:nth-of-type(2),
#tab3:checked ~ article:nth-of-type(3),
#tab4:checked ~ article:nth-of-type(4) {
display: block;
}
В этом случае ваш хак с анимацией не нужен, работает и без него.
Есть и другой вариант, для этого нужно добавить либо id для <article>, либо другой атрибут с уникальным значением, например:
<input type="radio" id="tab1" name="radiobutton" checked="checked"/>
<label for="tab1" class="tabs">qutIM 0.1</label>
...
<article class="contenttab" tabcontent="tab1">
qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году.
</article>
После чего правила становятся проще:
#tab1:checked ~ [tabcontent="tab1"],
#tab2:checked ~ [tabcontent="tab2"],
#tab3:checked ~ [tabcontent="tab3"],
#tab4:checked ~ [tabcontent="tab4"] {
display: block;
}
0
Only those users with full accounts are able to leave comments. Log in, please.
Поговорим про :checked