Tema: persistencia para que no se cierre menu desplegable al seleccionar un input text
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 18/10/2011, 15:41
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: persistencia para que no se cierre menu desplegable al seleccionar un inpu
Como curiosidad ahí va lo siguiente:
Opciones persistentes sólo con css. Nada de javascript, y mucho menos librerías.
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Kseso? jugando con css</title>
  5. <style type="text/css">
  6. .tabs {
  7.   position: relative;
  8.   min-height: 200px;
  9.   width: 400px;
  10.   clear: both;
  11.   margin: 25px 0;
  12. }
  13. .tab {
  14.   float: left;
  15. }
  16. .tab label {
  17.   background: #eee;
  18.   padding: 10px;
  19.   border: 1px solid #ccc;
  20.   margin-left: -1px;
  21.   position: relative;
  22.   left: 1px;
  23. }
  24. .tab [type=radio] {
  25.   display: none;
  26. }
  27. .content {
  28.   position: absolute;
  29.   top: 28px;
  30.   left: 0;
  31.   background: white;
  32.   right: 0;
  33.   bottom: 0;
  34.   padding: 20px;
  35.   border: 1px solid #ccc;
  36.   overflow: hidden;
  37.   opacity: 0;
  38.   -webkit-transition-duration: 2s;
  39.     -moz-transition-duration: 2s;
  40.     -o-transition-duration: 2s;
  41. }
  42. .content > * {
  43.   position: relative;
  44.   top: 400px;
  45.   left: 0;
  46.   -webkit-transition-duration: 1s;
  47.     -moz-transition-duration: 1s;
  48.     -o-transition-duration: 1s;  
  49. }
  50. [type=radio]:checked ~ label {
  51.   background: white;
  52.   border-bottom: 1px solid white;
  53.   z-index: 2;
  54. }
  55. [type=radio]:checked ~ label ~ .content {
  56.   z-index: 1;
  57.   top: 28px;
  58.   left: 0;
  59.   opacity: 1;
  60.   -webkit-transition-duration: 2s;
  61.     -moz-transition-duration: 2s;
  62.     -o-transition-duration: 2s;
  63. }
  64. [type=radio]:checked ~ label ~ .content > * {
  65.   top: 0;
  66.   left: 0;
  67.   opacity: 1;
  68.   -webkit-transition-duration: 1s;
  69.     -moz-transition-duration: 1s;
  70.     -o-transition-duration: 1s;
  71.   
  72. }
  73. </style>    
  74. </head>
  75. <body>
  76. <div class="tabs">
  77.  
  78.    <div class="tab">
  79.        <input type="radio" id="tab-1" name="tab-group-1" checked>
  80.        <label for="tab-1">Opción 1</label>
  81.  
  82.        <div class="content">
  83.            <ul>
  84.                 <li><a href="#">El Blog</a></li>
  85.                 <li><a href="blog/stats.php">Estadísticas</a></li>
  86.                 <li><a href="#">Artículos</a></li>
  87.             </ul>
  88.        </div>
  89.    </div>
  90.  
  91.    <div class="tab">
  92.        <input type="radio" id="tab-2" name="tab-group-1">
  93.        <label for="tab-2">2 Opción</label>
  94.  
  95.        <div class="content">
  96.            <ul>
  97.                 <li><a href="#">Contactar</a></li>
  98.                 <li><a href="#">El Autor</a></li>
  99.                 <li><a href="#">Términos de Uso</a></li>
  100.             </ul>
  101.        </div>
  102.    </div>
  103.  
  104.     <div class="tab">
  105.        <input type="radio" id="tab-3" name="tab-group-1">
  106.        <label for="tab-3">Tercera Op.</label>
  107.  
  108.        <div class="content">
  109.            <ul>
  110.                 <li><a href="#">En Twitter</a></li>
  111.                 <li><a href="#">Gacetilla CSS</a></li>
  112.             </ul>
  113.        </div>
  114.    </div>
  115.  
  116.     <div class="tab">
  117.        <input type="radio" id="tab-4" name="tab-group-1">
  118.        <label for="tab-4">Más Opciones</label>
  119.  
  120.        <div class="content">
  121.            <p>Cualquier tipo de contenidos. No sólamente listas.</p>
  122.            <p>Funcional en Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, and IE 9+</p>
  123.            <p>Créditos: en base a idea original de Chris Coyier en css-tricks.com</p>
  124.        </div>
  125.    </div>
  126.  
  127. </div>
  128. </body>
  129. </html>

Nota: los efectos sobre opacity y position sólo verificados en chrome y ff