Tema: ¿Menú pestañas dentro de Menú pestañas?
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 23/11/2015, 15:34
dtmayorista
 
Fecha de Ingreso: junio-2013
Mensajes: 15
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: jajaja!!! Menú pestañas dentro de Menú pestañas?
Básicamente hice esta animalada....


Alguien me ayuda?

Código HTML: 
Ver original
  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   
  5. <style>
  6.   #contenedor {
  7.     margin: 40px auto;
  8.     width: 750px;  /* Ancho del contenedor */
  9. box-sizing: border-box;
  10. -moz-box-sizing: border-box;
  11. }
  12.  
  13. #contenedor input {
  14. height: 32px;
  15. visibility: hidden;
  16. }
  17.  
  18. #contenedor label {
  19. float: left;
  20. cursor: pointer;
  21. font-size: 15px;  /* Tamaño del texto de las pestañas */
  22. line-height: 40px;
  23. height: 40px;
  24. padding: 0 20px;
  25. display: block;
  26. color: #888;  /* Color del texto de las pestañas */
  27. text-align: center;
  28. border-radius: 5px 5px 0 0;
  29. background: #eee;  /* Fondo de las pestañas */
  30. margin-right: 5px;
  31. }
  32.  
  33. #contenedor input:hover + label {
  34. background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
  35. color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
  36. }
  37.  
  38. #contenedor input:checked + label {
  39. background: #FFDA91;  /* Fondo de las pestañas al presionar */
  40. color: #444; /* Color de las pestañas al presionar */
  41. z-index: 6;
  42. line-height: 45px;
  43. height: 45px;
  44. position: relative;
  45. top: -5px;
  46. -webkit-transition: .1s;
  47. -moz-transition: .1s;
  48. -o-transition: .1s;
  49. -ms-transition: .1s;
  50. }
  51.  
  52. .content {
  53. background: none;  /* Fondo del contenido */
  54. position: relative;
  55. width: 100%;
  56. height: 350px;  /* Alto del contenido */
  57. padding: 30px;
  58. z-index: 5;
  59. border-radius: 0 5px 5px 5px;
  60. }
  61.  
  62. .content div {
  63. position: absolute;
  64. z-index: -100;
  65. opacity: 0;
  66. transition: all linear 0.1s;
  67. }
  68.  
  69. #contenedor input.tab-selector-1:checked ~ .content .content-1,
  70. #contenedor input.tab-selector-2:checked ~ .content .content-2,
  71. #contenedor input.tab-selector-3:checked ~ .content .content-3,
  72. #contenedor input.tab-selector-4:checked ~ .content .content-4 {
  73.     z-index: 100;
  74.     opacity: 1;
  75.     -webkit-transition: all ease-out 0.2s 0.1s;
  76. -moz-transition: all ease-out 0.2s 0.1s;
  77. -o-transition: all ease-out 0.2s 0.1s;
  78. -ms-transition: all ease-out 0.2s 0.1s;
  79. }
  80.  
  81.   
  82.  
  83. </style>
  84. <STYLE>
  85.         
  86.         
  87. #contenedor001 {
  88.     margin: 40px auto;
  89.     width: 650px;  /* Ancho del contenedor */
  90. box-sizing: border-box;
  91. -moz-box-sizing: border-box;
  92. }
  93.  
  94. #contenedor001 input {
  95. height: 32px;
  96. visibility: visible;
  97. }
  98.  
  99. #contenedor001 label {
  100. float: left;
  101. cursor: pointer;
  102. font-size: 15px;  /* Tamaño del texto de las pestañas */
  103. line-height: 40px;
  104. height: 40px;
  105. padding: 0 20px;
  106. display: block;
  107. color: #888;  /* Color del texto de las pestañas */
  108. text-align: center;
  109. border-radius: 5px 5px 0 0;
  110. background: #eee;  /* Fondo de las pestañas */
  111. margin-right: 5px;
  112. }
  113.  
  114. #contenedor001 input:hover + label {
  115. background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
  116. color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
  117. }
  118.  
  119. #contenedor001 input:checked + label {
  120. background: #FFDA91;  /* Fondo de las pestañas al presionar */
  121. color: #444; /* Color de las pestañas al presionar */
  122. z-index: 6;
  123. line-height: 45px;
  124. height: 45px;
  125. position: relative;
  126. top: -5px;
  127. -webkit-transition: .1s;
  128. -moz-transition: .1s;
  129. -o-transition: .1s;
  130. -ms-transition: .1s;
  131. }
  132.  
  133. .content001 {
  134. background: #999;  /* Fondo del contenido */
  135. position: relative;
  136. width: 100%;
  137. height: 350px;  /* Alto del contenido */
  138. padding: 30px;
  139. z-index: 5;
  140. border-radius: 0 5px 5px 5px;
  141. }
  142.  
  143. .content001 span {
  144. position: absolute;
  145. z-index: -100;
  146. opacity: 0;
  147. transition: all linear 0.1s;
  148. }
  149.  
  150. #contenedor001 input.tab-selector-001:checked ~ .content001 .content-001,
  151. #contenedor001 input.tab-selector-002:checked ~ .content001 .content-002,
  152. #contenedor001 input.tab-selector-003:checked ~ .content001 .content-003,
  153. #contenedor001 input.tab-selector-004:checked ~ .content001 .content-004 {
  154.     z-index: 101;
  155.     opacity: 1;
  156.     -webkit-transition: all ease-out 0.2s 0.1s;
  157. -moz-transition: all ease-out 0.2s 0.1s;
  158. -o-transition: all ease-out 0.2s 0.1s;
  159. -ms-transition: all ease-out 0.2s 0.1s;
  160. }
  161.  
  162. </STYLE>
  163.  
  164.  
  165. </head> 
  166. <body> 
  167.  <div id="contenedor">
  168.     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  169.     <label for="tab-1" class="tab-label-1">Pestaña1</label>
  170.     
  171.     <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  172.     <label for="tab-2" class="tab-label-2">Pestaña2</label>
  173.     
  174.     <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  175.     <label for="tab-3" class="tab-label-3">Pestaña3</label>
  176.     
  177.     <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  178.     <label for="tab-4" class="tab-label-4">Pestaña4</label>
  179.                             
  180.     <div class="content">
  181.         <div class="content-1">
  182.             Contenido1
  183.         </div>
  184.         <div class="content-2">
  185.             Contenido2
  186.         </div>
  187.         <div class="content-3">
  188.         
  189.         
  190.            <div id="contenedor001">
  191.     <input id="tab-1" type="radio" name="radio-set2" class="tab-selector-001" checked="checked" />
  192.     <label for="tab-1" class="tab-label-1">Pestaña1</label>
  193.     
  194.     <input id="tab-2" type="radio" name="radio-set2" class="tab-selector-002" />
  195.     <label for="tab-2" class="tab-label-2">Pestaña2</label>
  196.     
  197.     <input id="tab-3" type="radio" name="radio-set2" class="tab-selector-003" />
  198.     <label for="tab-3" class="tab-label-3">Pestaña3</label>
  199.     
  200.     <input id="tab-4" type="radio" name="radio-set2" class="tab-selector-004" />
  201.     <label for="tab-4" class="tab-label-4">Pestaña4</label>
  202.                             
  203.     <span class="content001">
  204.         <div class="content-001">
  205.             Contenido1
  206.         </div>
  207.         <div class="content-002">
  208.             Contenido2
  209.         </div>
  210.         <div class="content-003">
  211.             Contenido3
  212.         </div>
  213.         <div class="content-004">
  214.             Contenido4
  215.         </div>
  216.     </span>
  217. </div>
  218.         </div>
  219.        
  220.         <div class="content-4">
  221.             Contenido4
  222.         </div>
  223.     </div>
  224. </div>
  225.  
  226. </body> 
  227. </html>