Diseño de menú a pantalla completa con CSS

Menú sensible a pantalla completa con pura CSS, este ejemplo lo vamos a desarrollar para usar en nuestro propio Framework con css. Los puedes usar en cualquier proyecto, el componente incluye un icono de hamburguesa animado con un menú fijo animado de pantalla completa.


Menú de hamburguesa con puro css, crea el archivo fullscreenmenu.css

 /* CSS Only Document */

#nav-btn{
    cursor: pointer;
    height: 56px;
    opacity: 0;
    position: absolute;
    right: 0;
    width: 56px;
    z-index: 100;
}
#nav-btn + label{
    display: block;
    height: 4px;
    height: 56px;
    left: 18px;
    position: absolute;
    right: 18px;
    top: 44px;
    width: 56px;
}
#nav-btn + span{
    background-color: #ccc;
    cursor: pointer;
    display: block;
    height: 4px;
    position: absolute;
    right: 20px;
    top: 44px;
    width: 56px;
    z-index: 99;
}
#nav-btn + span::before,
#nav-btn + span::after{
    background-color: #ccc;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 56px;
}
#nav-btn + span::before{
    top: -20px;
}
#nav-btn + span::after{
    bottom: -20px;
}
#nav-btn:checked + span{
    background-color: #F5060A;
}
#nav-btn + span::before,
#nav-btn + span::after{
    transition-delay: 0.3s, 0s;
    transition-duration: 0.3s, 0.3s;
}
#nav-btn + span::before{
    transition-property: top, transform;
}
#nav-btn + span::after{
    transition-property: bottom, transform;
}
#nav-btn:checked + span{
    background: none;
}
#nav-btn:checked + span::before{
    top: 0;
    transform: rotate(45deg);
}
#nav-btn:checked + span::after{
    bottom: 0;
    transform: rotate(-45deg);
}
#nav-btn:checked + span::before,
#nav-btn:checked + span::after{
    transition-delay: 0s, 0.3s;
}
#nav-btn:checked ~ nav{
    left: 0px;
    opacity: 100;
    position: fixed;
    visibility: 1;
    z-index: 98;
}
#nav-btn:checked ~ nav ul{
    transform: translate(-50%, -50%);
}
nav{
    background: rgba(52, 82, 113, 0.98) none repeat scroll 0% 0%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 0.5s ease 0s, visibility 0s ease 0.5s;
    visibility: 0;
    width: 100%;
    z-index: -1;
}
nav ul{
    left: 50%;
    moz-transition: all 1s ease-in-out;
    o-transition: all 1s ease-in-out;
    position: absolute;
    top: 50%;
    transform: translate(-50%, 0%);
    transition: all 1s ease-in-out;
    webkit-transition: all 1s ease-in-out;
}
nav li{
    font-size: 30px;
    list-style: none;
    padding-bottom: 10px;
    text-align: center;
}
nav ul li a:hover{
    color: #fff;
}
nav li a{
    color: #ccc;
    text-decoration: none;
}

¿Cómo implementarlo? agrega fullscreenmenu.css en la etiqueta <head> principal:

 <link href="fullscreenmenu.css" rel="stylesheet">

Incluye el siguiente código html después de la etiqueta del <body>

<input type="checkbox" name="nav-btn" id="nav-btn" />
<span></span>
<nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</nav>

 

Artículos relacionados
Tipos de CSS (hoja de estilo en cascada)
Tipos de CSS (hoja de estilo en cascada)

La hoja de estilo en cascada (CSS) se usa para

Curso gratuito de CSS3
Curso gratuito de CSS3

Si quieres aprender a crear p&aacute;ginas web

6 trucos CSS para alinear el contenido verticalmente
6 trucos CSS para alinear el contenido verticalmente

En este artículo vamos a hablar de la alineaci

0 Comentarios
Enviame un comentario