Nav Effect

by Marc Malignan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="nav">
    <div id="nav-bg">
        <div id="nav-toggle">
            <i class="fa fa-bars"></i>
        </div>
    </div>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">C.V.</a></li>
        <li><a href="#">PROJECTS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);

$dark: #333;
$light: steelblue;
$btn-size: 50px;
$btn-size-big: $btn-size * 100;
$btn-space: 20px;
$nav-height: $btn-size + ($btn-space*2);

body {
    margin: 0;
    background: #ddd;
}

#nav {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: $nav-height;
    color: white;
    text-align: center;
}
#nav-bg {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    overflow: hidden;
}

#nav-toggle {
    position: absolute;
    top: $btn-space; left: $btn-space;
    width: $btn-size;
    height: $btn-size;
    line-height: $btn-size;
    border-radius: 50%;
    background: $dark;
    font-size: $btn-size/2.5;
    cursor: pointer;
    transition: all .3s;
}
#nav.open #nav-toggle {
    top: ($btn-size-big/2 - $btn-size/2 - $btn-space) * -1; 
    left: ($btn-size-big/2 - $btn-size/2 - $btn-space) * -1;
    width: $btn-size-big;
    height: $btn-size-big;
    transition: all .8s;
}

#nav ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: all .3s;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    opacity: 0;
    pointer-events: none;
}
#nav.open ul {
    opacity: 1;
    pointer-events: all;
}
#nav ul li {
    float: left;
    width: 25%;
    line-height: $nav-height;
    white-space: nowrap;
}
#nav ul li a {
    display: block;
    color: white;
    text-decoration: none;
    transition: all .2s;
}
#nav ul li a:hover {
    background: $light;
}

JavaScript

$('#nav-toggle').click(function(e) {
    e.stopPropagation();
	$('#nav').addClass('open');
});
$(document).click(function(e) {
	$('#nav').removeClass('open');
});