Hoy os comparto este post donde os podéis descargar un menú a pantalla completa con HTML y CSS, para este post he decidido no utilizar Jquery a modo de experimento. Lo podéis descargar haciendo click en el botón que aparece abajo de este post.
Aquí podéis y probar este menú: Ver Demo
Para este menú fullscreen quería probar algunas propiedades con las que no suelo trabajar.
Por ejemplo, el icono o botón que dispará el submenú es un checkbox que está oculto con la propiedad visibilty:hidden.
Las líneas con las que están creadas el icono de menú realmente son span que están dentro de un label.
|
1 2 3 4 5 6 |
<input type="checkbox" id="open"> <label for="open"> <span></span> <span></span> <span></span> </label> |
¿Cómo se muestra el menú?
Al hacer click sobre el label que activamos el chekbox. A partir de este momento y a través del pseudo selector :cheked todos los demás elementos se muestran utilizando animaciones y transiciones de CSS.
Ejemplo: Código CSS para mostrar el menú
|
1 2 3 4 5 |
#open:checked ~ #menu{ visibility: visible; opacity: 1; animation: fadeIn 0.72s; } |
Selector ~ de CSS
Este selector permite seleccionar todos elementos que están precedidos de otro. Por ejemplo: «p ~ ul». Aquí estaríamos seleccionando todos las ul que antes tengan un p antes.
También podría interesarte este otro post de mi blog
Cómo hacer un menú hamburguesa con html y css
Espero que te haya gustado este menú a pantalla completa y te invito a descargarlo en el botón que encontrarás debajo
Recibí el link a vuelta de correo y me tira NO ENCONTRADO!
Hola Aldemar.
Estoy solucionando este problema.
Te paso un link para que lo descargues desde Drive:
https://drive.google.com/file/d/1Ke9BNUMDovQGq2LefdO3js95VECQmr2I/view?usp=sharing