FullScreen menu design with CSS

menu screen full

Full screen menu with pure CSS, this example we will develop to use in our own Framework with CSS. You can use them in any project, the component includes an animated hamburger icon with a full-screen animated fixed menu.

Menu with pure css, create the file 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;
}

How to implement it? add fullscreenmenu.css to the main <head> tag:

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

Includes the following html code after the <body> tag

<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>