A Pen by kimil.
@white: #ffffff;
@black: #000000;
@blue: rgb(51, 182, 219);
@blueOpaque: rgba(51, 182, 219, 0.9);
html, body { height: 100%; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300; }
body {
background-image: url(https://farm3.staticflickr.com/2844/12137587574_772edc9200_k.jpg);
background-size: cover;
background-repeat: no-repeat;
}
a {
color: inherit;
text-decoration: none;
&:visited {
color: inherit;
}
}
.menu-button-target {
cursor: pointer;
position: absolute;
z-index: 200;
right: 60px;
top: 60px;
height: 50px;
background-color: @blue;
padding: 0 10px;
transition: all 0.2s;
&.active {
background-color: transparent;
.menu-button {
background-color: transparent;
&:before {
transform: translateY(0%) rotate(45deg);
background-color: @white;
}
&:after {
transform: translateY(0%) rotate(-45deg);
background-color: @white;
}
}
}
}
.menu-button {
position: relative;
top: 50%;
left: 0;
display: block;
width: 60px;
height: 4px;
margin-top: -2px;
background-color: @white;
transition: all 0.2s;
&:before,
&:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
background-color: @white;
transition: all 0.2s;
}
&:before {
transform: translateY(-250%);
}
&:after {
transform: translateY(250%);
}
}
.menu-overlay {
width: 100%;
height: 100%;
background-color: @blueOpaque;
display: none;
&.active {
nav ul {
margin-top: 200px;
}
}
}
nav {
overflow: hidden;
ul {
overflow: hidden;
margin-top: 0;
transition: margin-top 0.4s ease;
li {
width: 100%;
text-align: center;
color: @white;
padding: 20px 0;
font-size: 50px;
transition: background-color 0.4s, color 0.2s;
&:hover {
background-color: @white;
color: @blue;
}
}
}
}
var $menuTrigger = $('[data-ic-class="button-trigger"]'),
$menuOverlay = $('[data-ic-class="overlay"]'),
$menuItem = $('.menu-item'),
activeClass = 'active';
$menuTrigger.click(function(){
$menuTrigger.toggleClass(activeClass);
$menuOverlay.fadeToggle(400).toggleClass(activeClass);
});
$menuItem.click(function(){
$menuTrigger.toggleClass(activeClass);
$menuOverlay.fadeToggle(400).toggleClass(activeClass);
});
<div class="menu-button-target" data-ic-class="button-trigger">
<span class="menu-button"></span>
</div>
<div class="menu-overlay" data-ic-class="overlay">
<nav role='navigation'>
<ul>
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Clients</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
Click the menu icon in the top right and view the magic!
Inspired from: http://tympanus.net/Development/FullscreenOverlayStyles/