CSS - TABS ANIDADOS CSS

   
Vista:

TABS ANIDADOS CSS

Publicado por Daniel (4 intervenciones) el 10/09/2012 07:02:17
Saludos amigos he intentado cualquier variedad de cosas para intentar anidar este tab que de verdad me gusta mucho y esta muy bueno. aca les dejo la pagina que seguro les servira para sus aplicaciones. el caso es que necesito que me ayuden con la solucion para poder anidarlo Gracias.

PAGINA--> http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

TABS ANIDADOS CSS

Publicado por xve (351 intervenciones) el 10/09/2012 07:21:05
Hola Daniel, que quieres decir con anidar?? La pagina que nos muestras, muestra el código por completo, no deberías de tener muchos problemas para ponerlo en marcha.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

TABS ANIDADOS CSS

Publicado por daniel (4 intervenciones) el 12/09/2012 03:41:36
Saludos xve gracias por tomarte tu tiempo en responder. lo que quiero decir con anidar es que cuando seleeccione una pestaña aparezcan otra series de pestañas que a su vez presionando sobre cada subpestaña aparezca un subcontenido correspondiente. En el ejemplo simplemente aparece un contenido por cada TAB. he tratado de hacer la anidacion .logro colocar en el CONTENT otra pestaña pero al pulsar sobre dicha pestaña para que me muestre el contenido correspondiente se oculta toda la indormacion y no me muestra nada en el subcontenido. POR EJEMPLO INTENTE HACER LO SIGUIENTE:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">About us</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">How we work</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">References</label>
 
 
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<p>Some content</p>
</div>
 
<div class="content-2">
<p>Some content</p>
</div>
 
<div class="content-3">
 
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Contact us</label>
 
<div class="content-4">
<p>Some content</p>
 </div>
</div> <!--CIERRE DEL CONTENT 3 QUE CONTIENE LA PESTAÑA 4 QUE A SU VEZ AL CLICKEAR SOBRE ELLA ME DEBERIA MOSTRAR DENTRO DE CONTENT 3 EL CONTENT 4 (ESA ES MI IDEA PERO NO LO HACE) CADA CONTENT DEPENDE DE SU RESPECTIVO TAB -->
 
</div>
 </section>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

TABS ANIDADOS CSS

Publicado por xve (351 intervenciones) el 12/09/2012 07:22:22
Hola Daniel, no lo he probado pero segun veo, tendrias que crear otra section tabs (<section class="tabs">) dentro del class content-1 (<div class="content-1">) por ejemplo, pero recuerda que seguramente no podran tener el mismo nombre los inputs y labels...

Prueba así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<section class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">About us</label>
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">How we work</label>
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">References</label>
 
 
    <div class="clear-shadow"></div>
    <div class="content">
        <div class="content-1">
            <p>Some content</p>
        </div>
 
        <div class="content-2">
            <p>Some content</p>
        </div>
 
        <div class="content-3">
            <section class="tabs">
                <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
                <label for="tab-4" class="tab-label-4">How we work</label>
                <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
                <label for="tab-5" class="tab-label-5">References</label>
 
 
                <div class="clear-shadow"></div>
                <div class="content">
                    <div class="content-4">
                        <p>Some content</p>
                    </div>
 
                    <div class="content-5">
                        <p>Some content</p>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>


Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

TABS ANIDADOS CSS

Publicado por Daniel (4 intervenciones) el 12/09/2012 18:45:09
Que tal amigo.segui lo que comentastes y me parece q esta buena la jerarquia sin embargo sigue dando el mismo problema que me estaba dando logra mostrar la subpestaña pero al clickear en ella se desaparece la subpestaña y no muestra el contenido correspondiente. Pienso que el problema radica en la regla css del content y esta linea q sigue una secuencia segun las acciones q se realicen. Te agradezco si consigues darle la vuelta al asunto.Saludos.

CSS:
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 { <-- ESTA LINEA
bottom: 0px;
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all ease-out 0.2s 0.2s;
-moz-transition: all ease-out 0.2s 0.2s;
-o-transition: all ease-out 0.2s 0.2s;
-ms-transition: all ease-out 0.2s 0.2s;
transition: all ease-out 0.2s 0.2s;
}


<body>
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">About</label>

<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Services</label>

<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">References</label>


<div class="clear-shadow"></div>

<div class="content">
<div class="content-1">
<h2>About us</h2>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
<h3>How we work</h3>
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
</div>
<div class="content-2">
<h2>Services</h2>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p></div>

<div class="content-3">
<section class="tabs">
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">work</label>
<div class="clear-shadow"></div>

<div class="content">
<div class="content-4">
<h2>Contact</h2>
<p>some content</p>
</div>
</div>
</section>
</div>
</div>
</section>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

TABS ANIDADOS CSS

Publicado por Daniel (4 intervenciones) el 12/09/2012 18:51:40
AQUI DEJO TODO EL CSS.


.tabs {
position: relative;
margin: 40px auto;
width: 750px;
}


.tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}

.tabs input#tab-2{
left: 120px;
}
.tabs input#tab-3{
left: 240px;
}
.tabs input#tab-4{
left: 360px;
}

.tabs label {
background: #5ba4a4;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 80px;
color: #385c5b;
top: 0px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs label:after {
content: '';
background: #fff;
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 8px;
display: block;
}

.tabs input:hover + label {
background: #5ba4a4;
top: -8px;
-webkit-transition: top linear 0.2s;
-moz-transition: top linear 0.2s;
-o-transition: top linear 0.2s;
-ms-transition: top linear 0.2s;
transition: top linear 0.2s;
}
.tabs input:hover + label:after{
background: #5ba4a4;
}
.tabs input:hover + label ~ .clear-shadow {
top: -8px;
-webkit-transition: top linear 0.2s;
-moz-transition: top linear 0.2s;
-o-transition: top linear 0.2s;
-ms-transition: top linear 0.2s;
transition: top linear 0.2s;
}

.tabs input:checked:hover + label {
top: 0;
}
.tabs input:checked:hover + label:after{
background: #fff;
}
.tabs input:checked:hover + label ~ .clear-shadow {
top: 0;
background: #fff;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}

.tabs input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{
z-index: 3;
}

.tabs input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {
z-index: 2;
}

.tabs input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {
z-index: 1;
}

.tabs input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {
z-index: 0;
}
.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
z-index: 3;
}

.tab-label-3 {
z-index: 2;
}

.tab-label-4 {
z-index: 1;
}

.tabs input:checked + label {
background: #fff;
z-index: 6;
-webkit-transition: top linear 0.2s;
-moz-transition: top linear 0.2s;
-o-transition: top linear 0.2s;
-ms-transition: top linear 0.2s;
transition: top linear 0.2s;
}

.clear-shadow {
background: #5ba4a4;
position: relative;
top: 0;
height: 10px;
margin-bottom: -10px;
clear: both;
z-index: -2;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);
border-radius: 3px;
}

.content {
background: #fff;
position: relative;
width: 100%;
height: 370px;
z-index: 5;
overflow: hidden;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}


.content div {
position: absolute;
top: 0;
left: 0;
bottom: 100%;
padding: 10px 40px;
overflow: hidden;
z-index: 1;
opacity: 0;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
-o-transition: all linear 0.1s;
-ms-transition: all linear 0.1s;
transition: all linear 0.1s;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
bottom: 0px;
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all ease-out 0.2s 0.2s;
-moz-transition: all ease-out 0.2s 0.2s;
-o-transition: all ease-out 0.2s 0.2s;
-ms-transition: all ease-out 0.2s 0.2s;
transition: all ease-out 0.2s 0.2s;
}

.content div h2,
.content div h3{
color: #398080;
}
.content div p {
font-size: 14px;
line-height: 22px;
font-style: italic;
text-align: left;
margin: 0;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar