Fixed Overlay Menu

by Arlina Fitriyani

HTML

<main>
  <section>
<div class='post-body'>
    <h2 class='post-title'>Fixed Overlay Menu</h2>        
    <p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>    
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p> 
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>      
</div> 
  </section>
</main>

<div class="navToggle"><span class="menu"></span></div>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Playground</a></li>      
  </ul>
</nav>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}

html, body, main, nav {
    height: 100%;
    font-size: 100%;
}

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: #39484d;
    font: 1.4rem "Helvetica Neue", sans-serif;
}

main {
    padding: 30px;
}

.post-body h2 {
    color: #fff;
}

.post-body {
    max-width: 680px;
    margin: 0 auto;
    padding: 25px;
    background-color: #30abd5;
    color: #fff;
}

.navToggle {
    position: fixed;
    top: 50px;
    right: 50px;
    z-index: 10;
    text-align: center;
}

.navToggle:hover {
    cursor: pointer;
}

.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
    background: white;
}

.navToggle:hover .menuOn {
    background: transparent;
}

.menu, .menu:before, .menu:after {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 5px;
    background: #fff;
    transition: 0.3s;
}

.menu:before, .menu:after {
    content: "";
    position: absolute;
    left: 0;
}

.menu:before {
    top: 10px;
}

.menu:after {
    bottom: 10px;
}

.menuOn {
    background: transparent;
}

.menuOn:before {
    top: 0;
    transform: rotate3d(0, 0, 1, 45deg);
}

.menuOn:after {
    bottom: 0;
    transform: rotate3d(0, 0, 1, -45deg);
}

nav {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    padding: 50px 125px 50px 50px;
    transition: all .2s ease-in-out;
    color: #fff;
}

nav a {
    color: #fff;
    text-decoration: none;
}

nav a:hover {
    color: red;
}

nav.navOn {
    display: block;
    z-index: 5;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul li a {
    display: block;
    padding: 20px;
    font-weight: 100;
    font-size: 2rem;
    text-transform: lowercase;
}

nav ul li a:hover {
    color: #ff274d;
}

JavaScript

$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('nav').toggleClass('navOn');
})