NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Utilizar controles input ocultos asociados a un label.

15 de Septiembre del 2015 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : CSS, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Utilizar controles input ocultos asociados a un label.

Desde hace un tiempo me he aficionado a utilizar todo tipo de atributos para marcar estados de una transición, pero últimamente he dado un paso más y he empezado a utilizar controles input[checkbox/radio] para construir menús de opciones que requieren cierta interacción del usuario.

Utilizar este tipo de controles para interacciones simples de usuario tiene sus ventajas, pero como todo también sus desventajas.

Yo destacaría por el lado bueno, que si se hace bien no requiere prácticamente nada de JavaScript, y queda todo el tema de transiciones y cambios de estado en objetos hecho en CSS3. Por la parte mala, no suele funcionar en navegadores antiguos, y son mínimo 2 o 3 etiquetas para un solo control, por lo que si queremos hacer una lista con 1000 entradas, la cosa se va a sobrecargar un poco.

Para empezar he creado un ejemplo básico utilizando 3 input[checkbox] ocultos que han quedado enlazados a sus respectivos labels, y que al pulsarlos se quedan marcados y muestran un sub-menú.

Maquetación HTML de un menú

Veamos la maquetación de uno de los menús :

Maquetación del menú
1
2
3
4
5
<div class='Menu'>
<input id='Input_Estilo1' type='checkbox' />
<label for='Input_Estilo1'>Label que hace de menú</label>
<div class='SubMenu'>SubMenu</div>
</div>

Como podéis ver es una maquetación bastante simple, y consiste de una etiqueta con la clase .Menu que dentro contiene una etiqueta input oculta, una etiqueta label con la apariencia de un botón, y un div con la clase SubMenu donde va todo el contenido del sub-menú.

Lo más importante es el atributo for del label (línea 3), ya que este se enlaza con la etiqueta input que tenga la misma id. Al tener enlazados los controles, todos los eventos (click, keypress, etc...) que reciba el label, pasaran directamente al input.

Hay que remarcar, que aunque lo más lógico sea poner el div SubMenu dentro de la etiqueta label, no es una práctica recomendable y aunque funciona, no pasa el validador de la W3C, por la razón de que los labels no deben tener etiquetas dentro.

Estilos CSS

Vamos a empezar con el CSS :

CSS del menú
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
/* Div que contiene un menú */
.Menu {
display:inline-block;
position:relative;
}
/* El checkbox original queda escondido */
.Menu > input { display:none; }
/* El label actua como botón, y está enlazado al checkbox oculto */
.Menu > input + label {
border:1px solid #000;
background:#CCC;
padding:8px;
min-width:97px;
}
/* Cuando el checkbox está marcado el color del fondo del label es verde */
.Menu > input:checked + label { background:rgba(0, 155, 50, 0.5); }
/* Div que contiene el submenú enlazado al checkbox */
.Menu > input + label + .SubMenu {
position:absolute;
top:40px;
width:calc(100% - 22px); /* (10 * 2 del padding) + (1 * 2) del borde */
height:100px;
border:1px solid #000;
background:#CCC;
padding:10px;
transform:perspective(600px) rotateY(90deg); /* Rotamos 90 grados el eje Y para que no se vea */
transition:0.4s;
}
/* Div que contiene el submenú una vez esta marcado el checkbox, devuelve a 0 grados el eje Y del submenu */
.Menu > input:checked + label + .SubMenu { transform:perspective(600px) rotateY(0deg); }

Os he puesto todo el CSS de golpe porque quiero que veáis como funciona bien el asunto.

Líneas 2-5 : Creo una clase Menu que es un contenedor vacio auto-ajustable (dislpay:inline-block), con la position:relative para que los hijos partan de la posición del menú.
Línea 7 : Las etiquetas input hijas de la etiqueta menú quedan ocultas (display:none).
Líneas 9-14 : Asigno las propiedades para el label (sin marcar), sobretodo fijaros en el selector que he utilizado. Busco en los hijos de la clase Menu una etiqueta input que justo después tenga una etiqueta label.
Línea 16 : Como podéis ver el selector es prácticamente igual que el anterior de la línea 9, pero en este caso solo busca etiquetas input:checked. En definitiva la etiqueta se vuelve de color verde cuando el checkbox inmediatamente anterior está marcado.
Líneas 18-28 : Aquí establecemos las propiedades para el sub-menú (sin marcar), y si os fijáis el selector está formulado del mismo modo que en la línea 9, pero esta vez llega hasta la etiqueta .SubMenu. También rotamos el sub-menú de forma que quede invisible a 90 grados del eje Y con la propiedad transform.
Línea 30 : Finalmente cuando el checkbox está marcado rotamos el sub-menú a 0 grados del eje Y con la propiedad transform para que sea visible.

Lo más importante del CSS es determinar un estado normal/desmarcado (Líneas 9-14 y 18-28), y un estado para cuando el checkbox está marcado (Líneas 16 y 30). Para determinar si está marcado utilizamos el selector :checked.


Ejemplo CheckBox

Finalmente podéis ver el ejemplo en vivo y toquetear un poco si queréis :


Ejemplo RadioButton

Los RadioButton están hechos para funcionar en grupo, de forma que solo puede haber un RadioButton marcado en cada grupo.

Echad un vistazo al siguiente ejemplo :

Notareis que mientras el código es similar, el funcionamiento del primer ejemplo y el segundo es distinto. En el primer ejemplo podemos tener los 3 menús marcados, y en el segundo ejemplo solo nos permite tener un menú marcado.

Como veis no ha hecho falta JavaScript en ninguno de los dos ejemplos, y los controles son plenamente funcionales y conscientes de sus estados en todo momento.

En definitiva, esta técnica viene muy bien para terminar de encapsular dentro del CSS, aquellos momentos en que requiere alguna interacción por parte del usuario para hacer una animación/transición.

Y con esto me despido por hoy, espero que os haya parecido interesante. Saludos!