[CSS] Pure CSS Tab UI
CSSだけで実現させるタブです。ラジオボタンと疑似クラス、隣接セレクタを駆使して実装しています。position:absoluteを使っているので、親要素の高さを決める必要あり。ですが、safariでの挙動がおかしい。なので現時点では実用的ではないですね。まあ、CSSだけでこういうこともできるんだよ程度に。
DEMO
-
content 1
Quisque eu pellentesque magna. Nam lacinia porta odio non varius. Fusce lobortis non lacus a semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet arcu in quam blandit aliquet. Nunc diam turpis.
Quisque eu pellentesque magna. Nam lacinia porta odio non varius. Fusce lobortis non lacus a semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet arcu in quam blandit aliquet. Nunc diam turpis.
Quisque eu pellentesque magna. Nam lacinia porta odio non varius. Fusce lobortis non lacus a semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet arcu in quam blandit aliquet. Nunc diam turpis.
-
content 2
Curabitur dapibus eu ante nec porttitor. Nunc varius interdum ante, quis auctor elit tristique id. Nullam tortor metus, tincidunt id tellus nec, vulputate pulvinar mi.
-
content 3
Integer sed mi vitae tortor convallis aliquet. Donec luctus sapien urna, a mattis mauris auctor in. Maecenas condimentum dolor sit amet dui viverra suscipit.
HTML
-
content 3
テキストテキストテキスト
-
content 3
テキストテキストテキスト
-
content 3
テキストテキストテキスト
CSS
.tab * {
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.tab {
position: relative;
padding: 0;
height:12.5em;
}
.tab li {
float:left;
list-style: none;
overflow:hidden;
}
.tab input[type=radio] {
display: none;
}
.tab label {
display: block;
padding: .5em 1em;
background: #ddd;
cursor: pointer;
}
.tab label:hover {
background: #ccc;
}
.tab input[type=radio]:checked + label {
background: #fff;
}
.tab .content {
visibility:hidden;
opacity:0;
filter: alpha(opacity=0);
position: absolute;
left: 0;
padding:1em;
background: #fff;
overflow: auto;
height:10em;
}
.tab .content h3 {
margin:.5em 0;
}
.tab input[type=radio]:checked + label + .content {
visibility:visible;
opacity:1;
filter: alpha(opacity=100);
}
0 件のコメント :
コメントを投稿