buenas,
me gustaría tener el desplegable menu del en vista movil a pantalla completa, full width y full height en vista movil.
Al desplegar el menú, el usuario sólo puede navegar en el menú, y sólo sale de ella clickando en la "X" que hemos creado para cerrar el menú.
La "X" ya lo tenemos, pero nos falta el full width y full height en vista movil.
¿Cómo podemos hacerlo?
ejemplos: apple.es o philips-hue.com
Gracias
Contenido solo visible a usuarios registrados
Que tal,
Revisando los estilos actuales del menu en móviles que tienes actualmente, si que se despliega en ancho y alto completo el problema es que no permite hacer el scroll down para ver los elementos que se vayan desplegando
Prueba los siguientes estilos CSS en los cuales he modificado algunas cosas para hacerlo funcionar
.et_mobile_menu {
overflow-y: scroll!important;
min-width: 105vw;
margin-left: -10vw;
min-height: 100vh;
-overflow-scrolling: touch!important;
-webkit-overflow-scrolling: touch!important;
}
Saludos!
hola,
creo que así va bien, pero bueno habrá que ver diferentes dispositivos moviles.
.et_mobile_menu {
overflow-y:auto;
min-width: 105vw;
margin-left:-10vw;
min-height:100vh;
}
Pero hay un problema, cuando se despliega varios submenús, desde móviles, el último item del menú que en este caso es "mi cuenta", se queda abajo y se lee y el scroll no hace lo suficiente.
Se puede meter un padding bottom o margin bottom, lo he probado pero no funciona, puede que lo esté aplicando incorrectamente.
Que tal,
Tal como en el CSS sugerido anteriormente es necesario limitar la altura mínima pero no la máxima, si colocar un max-height, por mas padding o elementos que coloques siempre se ajustara al screensize de la pantalla, ese es el uso de la medida VH,
Modificaría el CSS compartido de la siguiente manera
.et_mobile_menu {
overflow-y:auto;
min-width: 105vw;
margin-left:-10vw;
min-height:100vh;
}
Saludos!
hola, no me has puesto nada de codigo CSS diferente al mio.
Ya está en min-height, cuál sería los códigos para meter un padding bottom o margin bottom?
Gracias
Hola,
En este caso revisa si al añadir este código CSS permite que al hacer el scroll se visualice los menús
.et_mobile_menu {
overflow: scroll !important;
max-height: 84vh;
box-shadow: 0px 0px 30px rgba(0,0,0,0.3)
}
Prueba esto y nos comentas como ha ido todo
Un Saludo