Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Menú hamburguesa si se anima pero no anima el menu

Estas en el tema de Menú hamburguesa si se anima pero no anima el menu en el foro de CSS en Foros del Web. Salud y saludos. Ando practicando en una web "adaptativa" con el típico menú hamburguesa. Pretendo que al hacer click sobre la hamburguesa aparezca el menú ...
  #1 (permalink)  
Antiguo 17/06/2017, 13:34
 
Fecha de Ingreso: noviembre-2014
Ubicación: Madrid
Mensajes: 81
Antigüedad: 9 años, 5 meses
Puntos: 1
Menú hamburguesa si se anima pero no anima el menu

Salud y saludos.
Ando practicando en una web "adaptativa" con el típico menú hamburguesa.
Pretendo que al hacer click sobre la hamburguesa aparezca el menú (<nav>) que está oculto a la derecha de la página.
Cuando la ventana del navegador sea menor de 800px de ancho desaparece el nav y aparece la hamburguesa. (queries)
El nav está en posición absoluta y con right de -160px que corresponde a su ancho. Así queda oculto
A su vez la hamburguesa tiene su propia animación. Las tres barras horizontales, al hacer click, cambian a un aspa. Esto si que lo hace.
La llamada para que el menú aparezca es:
Código:
#flag:checked + nav{
	right: 0;
}
Donde #flag es un checkbox

He probado a poner ese código no en las queries sino en los estilos, pero nada.
¿Tiene algo que ver que el menú sea un bloque independiente de la hamburguesa?
¿Tienen algo que ver las posiciones fijas y absolutas?
Estoy completamente perdido

Podéis verlo aquí:
http://dereprueba.web44.net/hambur/U7index2.html
  #2 (permalink)  
Antiguo 18/06/2017, 06:11
 
Fecha de Ingreso: noviembre-2014
Ubicación: Madrid
Mensajes: 81
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Menú hamburguesa si se anima pero no anima el menu

Tras volverme loco haciendo pruebas y pruebas, he descubierto el motivo por el que no funcionaba.
El orden en el código html era este:
- el nav
- el input y el label

Se soluciona poniendo antes del nav, el input y el label. Vamos invirtiendo el orden.

Etiquetas: checkbox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:36.