FullScreen Responsive Menu (Pure CSS)

Friday 04th, Dec, 2015 | #Pure CSS #Modal #Menus #CSS2 / CSS3

Demo Download

FullScreen Responsive Menu (Pure CSS), this is the first of multiple components that we will develop for use in our own simple css Framework. It can be used with only grid system bootstrap template or in any project. The component include Animated Hamburger Icon with :Checked hack and a animated fullscreen fixed menu.

fullscreenmenu.css:

/* CSS 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 use? (include fullscreenmenu.css before head tag:

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

Include this html code after 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>