¿Menú pestañas dentro de Menú pestañas?

dtmayorista · #1 (**permalink**) 23/11/2015, 08:03

Hola a todos...

Por limitaciones que hay en el back que carga la web de mi empresa, tengo un código HTML+CSS que tiene un menú horizontal de pestañas como este exactamente:

http://sinlevantar.blogspot.com.ar/2012/11/tabs-menu-de-contenidos-con-pestanas.html

Ahora lo que quiero hacer, lo explico casi brutamente, es poder colocar dentro de una de estas pestañas, otro menú horizontal con pestañas, como en esta web:

http://wetu.com/Itinerary/Accommodation/C170A641-AD37-F2DF-B61C-A282A77EAE3D

Les recuerdo que solo puedo trabajar con HTML, CSS o algún código JAVASCRIPT, ya que el back de mi web es un enlatado y no me deja volar.

Alguien que sepa la posta?
Gracias a todos!

dtmayorista · #2 (**permalink**) 23/11/2015, 15:34

Básicamente hice esta animalada....

Alguien me ayuda?

Código HTML:

Ver original<!DOCTYPE html> 
<html> 
  <head> 
  
<style>
  #contenedor {
    margin: 40px auto;
    width: 750px;  /* Ancho del contenedor */
box-sizing: border-box;
-moz-box-sizing: border-box;
}
 
#contenedor input {
height: 32px;
visibility: hidden;
}
 
#contenedor label {
float: left;
cursor: pointer;
font-size: 15px;  /* Tamaño del texto de las pestañas */
line-height: 40px;
height: 40px;
padding: 0 20px;
display: block;
color: #888;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 5px 5px 0 0;
background: #eee;  /* Fondo de las pestañas */
margin-right: 5px;
}
 
#contenedor input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}
 
#contenedor input:checked + label {
background: #FFDA91;  /* Fondo de las pestañas al presionar */
color: #444; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 45px;
height: 45px;
position: relative;
top: -5px;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}
 
.content {
background: none;  /* Fondo del contenido */
position: relative;
width: 100%;
height: 350px;  /* Alto del contenido */
padding: 30px;
z-index: 5;
border-radius: 0 5px 5px 5px;
}
 
.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}
 
#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}
 
  
 
</style>
<STYLE>
        
        
#contenedor001 {
    margin: 40px auto;
    width: 650px;  /* Ancho del contenedor */
box-sizing: border-box;
-moz-box-sizing: border-box;
}
 
#contenedor001 input {
height: 32px;
visibility: visible;
}
 
#contenedor001 label {
float: left;
cursor: pointer;
font-size: 15px;  /* Tamaño del texto de las pestañas */
line-height: 40px;
height: 40px;
padding: 0 20px;
display: block;
color: #888;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 5px 5px 0 0;
background: #eee;  /* Fondo de las pestañas */
margin-right: 5px;
}
 
#contenedor001 input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}
 
#contenedor001 input:checked + label {
background: #FFDA91;  /* Fondo de las pestañas al presionar */
color: #444; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 45px;
height: 45px;
position: relative;
top: -5px;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}
 
.content001 {
background: #999;  /* Fondo del contenido */
position: relative;
width: 100%;
height: 350px;  /* Alto del contenido */
padding: 30px;
z-index: 5;
border-radius: 0 5px 5px 5px;
}
 
.content001 span {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}
 
#contenedor001 input.tab-selector-001:checked ~ .content001 .content-001,
#contenedor001 input.tab-selector-002:checked ~ .content001 .content-002,
#contenedor001 input.tab-selector-003:checked ~ .content001 .content-003,
#contenedor001 input.tab-selector-004:checked ~ .content001 .content-004 {
    z-index: 101;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}
 
</STYLE>
 
 
</head> 
<body> 
 <div id="contenedor">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Pestaña1</label>
    
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Pestaña2</label>
    
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Pestaña3</label>
    
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Pestaña4</label>
                            
    <div class="content">
        <div class="content-1">
            Contenido1
        </div>
        <div class="content-2">
            Contenido2
        </div>
        <div class="content-3">
        
        
           <div id="contenedor001">
    <input id="tab-1" type="radio" name="radio-set2" class="tab-selector-001" checked="checked" />
    <label for="tab-1" class="tab-label-1">Pestaña1</label>
    
    <input id="tab-2" type="radio" name="radio-set2" class="tab-selector-002" />
    <label for="tab-2" class="tab-label-2">Pestaña2</label>
    
    <input id="tab-3" type="radio" name="radio-set2" class="tab-selector-003" />
    <label for="tab-3" class="tab-label-3">Pestaña3</label>
    
    <input id="tab-4" type="radio" name="radio-set2" class="tab-selector-004" />
    <label for="tab-4" class="tab-label-4">Pestaña4</label>
                            
    <span class="content001">
        <div class="content-001">
            Contenido1
        </div>
        <div class="content-002">
            Contenido2
        </div>
        <div class="content-003">
            Contenido3
        </div>
        <div class="content-004">
            Contenido4
        </div>
    </span>
</div>
        </div>
       
        <div class="content-4">
            Contenido4
        </div>
    </div>
</div>
 
</body> 
</html>