Menu que Cubra toda la Pantalla (Fullscreen)

Hola gente, esta vez traigo un tutorial para colocar un menu que cubra toda la pantalla en nuestro blog, si ya lo notaste cambie el diseño del blog, pues estaba un poco cansado con el anterior aunque no estaba nada mal a mi parecer, aprovechando, puse una navegación tipo fullscreen, este le dio un respiro fresco a mi pagina, solo tienes que presionar las 3 lineas que están en la esquina (icono de la hamburguesa  ≡) para desplegarlo, saldrá desde la esquina izquierda, es una gran ventaja tener uno de este tipo, gracias al icono de la hamburguesa que cada vez es mas frecuente en tabletas y smartphones, así pues , este se adapta a toda la pantalla y muestra las secciones.
Cuando alguien visite el blog y vea la figura, sabrá exactamente que se trata de un menu, tiene un estilo fresco, simple pero muy atractivo, por eso no cuenta con submenus, si lo que querías era uno con desplegables pues tendrás que buscar por otro lado, por mi parte no necesito los submenus, pues cada uno pertenece a una pagina principal, bueno, ya con este desplegado, para cerrarlo solo debes dar click en símbolo x que aparecerá en la esquina, dejando la palabrería de lado, mira esta demostración de su funcionamiento, presionarlo y mira como funciona!
×
Acerca de Articulos Buscar Enlazanos
 ≡Pues que te pareció? genial no? bien eso es lo te tendremos en el blog, un menu que ocupe todo el ancho y alto de pagina, ademas de lo visto el código para implementarlo es bastante corto, pero lo mejor es que es responsive! osea que se adapta a los dispositivos móviles, manos a la obra.

Como Hacer el Responsive Menu Fullscreen?

Primero tenemos que tener nuestro código HTML, (esto lo haré orientado a blogs de blogger, si usas wordpress o cualquier otra plataforma pues tu ya entenderás como implementarlos), en donde estarán las listas o secciones, es donde colocaremos los enlaces, usaremos este código:

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="enlace1">Pagina1</a>
    <a href="enlace2">Pagina2</a>
    <a href="enlace3">Pagina3</a>
    <a href="enlace4">Pagina4</a>     

  </div>
</div>
<div id='spani'>
<span onclick="openNav()">&#160;&#8801;</span></div>

Para colocarlo en el blog:

1. Copia el código que te mostré.
2. Nos vamos a a diseño 
3. Añadir un gadget
4. Elegimos  uno del tipo HTML/Javascript 
5. Pega los códigos que copiaste 
6. y guarda.

Con esto tendremos lo primero, ahora vamos a agregar los estilos para darle forma:

.overlay {
height: 100%; /*Alto del menu*/
width: 0;
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
background-color: rgba(0,0,0, 0.9); /*Color de fondo*/
overflow-x: hidden; 
transition: 0.5s; /*Tiempo que tarda el despliegue*/
}
.overlay-content {
position: relative;
top: 25%; /*Altura de enlaces desde el top de pantalla*/
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px; /*Tamaño texto de enlaces*/
color: #818181; /*Color de enlaces*/
display: block; 
transition: 0.3s; /*Tiempo hover de enlaces*/
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1; /*Cuando pasa el raton en un enlace*/
}
.overlay .closebtn {
position: absolute;
top: 20px; /*Altura de la X*/
right: 45px; /*Posicion de la X*/
font-size: 60px; /*Tamaño de la X*/
}
#spani span{
font-size:60px; cursor:pointer;font-family: "Times New Roman", Georgia, Serif;
}

• Ve a Personalizar
• En Avanzado 
• Busca en lo ultimo Añadir CSS 
• Pega el código de arriba

Otra forma mas manual es:

• Ve Plantilla 
• Editar HTML 
• busca con CTRL+F ]]></b:skin> y pegalo justo arriba de este y guarda los cambios.

Bien, los estilos están listos para terminar con todo haremos lo siguiente, colocaremos un trozo de script que se encargara de la función de despliegue.

<script type='text/javascript'>
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}</script>

• Copia el código
• Ve Plantilla 
• Editar HTML 
• Busca con CTRL+F </body> y pegalo justo arriba de este 
• Guarda los cambios.

Con esto ya tenemos lista nuestra navegación que ocupa toda la pagina!!

Configuración del Menu: 

En el código HTML: el texto en color verde es la dirección que se abrirá al presionar una sección, lo que tiene que hacer es cambiarlo por la URL que quieras que abra, lo de color rojo es el nombre de la pagina que abrirá, cámbialo según lo que quieras mostrar.
Si quieres agregar otro link solo debes agregar este código debajo de cualquiera de los otros enlaces:

<a href="enlace5">Pagina5</a>

En el CSS: hay etiquetas de color rojo mostrando algunos atributos como el tiempo de despliegue, tamño de letra etc, cambia estos valores si quieres para ir probando y personalizando tu menu fullscreen a tu gusto
En el Script: dejalo asi,

BONUS Si quieres abrir el menu de arriba a bajo

El despliegue es de izquierda a derecha, pero si en ligar de eso te gustaría mas que lo hiciera de arriba a abajo solo tienes que hacer esto:
En la parte de CSS en el primer fragmento intercambia los valores de height: 100%; y width: 0; de manera que queden height:0; y width:  100%;
Y en la parte de Script en vez de style.width ponemos style.height y listo, eso sera todo.
Te ha gustado este truco? puedes ver su versión original en w3schools, si es así agradezco lo compartas con tus amigos, no siendo mas nos estamos leyendo!