<html>
<head>
<title>Simple VCard</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="site-content">
<div class="logo-wrap">
<h2 class="title-logo">ALI <br /> AAS</h2>
</div>
<div class="header-wrap">
<h3 class="text-header">Boston designer and <br />front-end developer<br />building products <br /><strong>throughtbot</strong></h3>
</div>
<div class="img-wrap" style="background-image:url('https://static.pexels.com/photos/193355/pexels-photo-193355.jpeg'); background-repeat: no-repeat; background-size: cover; height: 500px; width: 50%; position: absolute; right: 0; top: 20px;"></div>
<div class="btn-wrap">
<div class="hamburger"></div>
</div>
<div class="menu-wrap">
<ul class="primary-menus">
<li><a href="#">Dribble</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">Behance</a></li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html> $steel-grey: #434549;
$golden-fizz: #E3E520;
$barberry: #CFD01B;
$aluminium: #85878B;
$rio-grande: #BBBC31;
$earls-green: #ABAC15;
$primary-font : 'Montserrat', sans-serif;
$secondary-font : 'Roboto Condensed', sans-serif;
body {
padding: 0;
margin: 0;
background: $barberry;
.site-content {
width: 70%;
height: 500px;
overflow: hidden;
margin: auto;
background: $steel-grey;
position: relative;
-webkit-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
-moz-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
.logo-wrap {
float: left;
margin: 50px 70px;
width: 100%;
h2.title-logo {
margin: 0;
font-family: $secondary-font;
color: $golden-fizz;
font-weight: 300;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 6px;
}
}
.header-wrap {
margin: 0 100px;
h3.text-header {
position: relative;
font-family: $primary-font;
color: #ffffff;
font-size: 2.5em;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(43, 43, 43, 0.64);
z-index: 2;
}
strong {
color: $golden-fizz;
}
}
}
.menu-wrap {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: $golden-fizz;
height: 0;
transition: all .9s ease-in-out;
z-index: 8;
ul.primary-menus {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
padding: 0;
margin: 0;
visibility: hidden;
opacity: 0;
transition: all .9s ease-in-out;
}
li {
list-style: none;
line-height: 1.5;
top: -350px;
position: relative;
a {
text-decoration: none;
font-family: $primary-font;
font-weight: 700;
font-size: 3em;
color: $steel-grey;
position: relative;
transition: all .3s ease-in-out;
&:before {
position: absolute;
content: "";
height: 4px;
width: 0;
background: $steel-grey;
bottom: -3px;
left: 0;
right: 0;
transition: all .3s ease-in-out;
}
&:hover:before {
width: 100%;
}
}
}
.active-primary-menus {
visibility: visible !important;
opacity: 1 !important;
}
}
.active {
height: 100%;
}
.btn-wrap {
cursor: pointer;
position: absolute;
right: 80px;
top: 50px;
width: 50px;
height: 50px;
background: $golden-fizz;
border-radius: 100%;
-webkit-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
-moz-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
transition: all .3s ease-in-out;
z-index: 9;
.hamburger {
position: relative;
width: 50%;
height: 2px;
margin: 50% auto;
background: $steel-grey;
&:before {
position: absolute;
content: "";
width: 100%;
height: 2px;
top: -18px;
left: 0;
right: 0;
margin: 50% auto;
background: $steel-grey;
}
&:after {
position: absolute;
content: "";
width: 100%;
height: 2px;
top: -8px;
left: 0;
right: 0;
margin: 50% auto;
background: $steel-grey;
}
}
.active-menu {
height: 0;
transition: all .9s ease-in-out;
&:before {
background: #ffffff;
top: -15px;
transform: rotate(130deg);
transition: all .9s ease-in-out;
}
&:after {
background: #ffffff;
top: -15px;
transform: rotate(227deg);
transition: all .9s ease-in-out;
}
}
}
.active-btn-wrap {
background: $steel-grey;
}
}$(document).ready(function(){
function openMenu() {
$('.btn-wrap').click(function(e){
e.preventDefault();
if ($('.btn-wrap').hasClass('active-btn-wrap')) {
$(this).removeClass('active-btn-wrap');
setTimeout(function(){
$('ul.primary-menus').removeClass('active-primary-menus');
}, 500);
setTimeout(function() {
$('ul.primary-menus li:nth-child(1)').css('top', '-350px');
$('ul.primary-menus li:nth-child(1)').css('transition', 'all .7s ease-in-out');
}, 100);
setTimeout(function() {
$('ul.primary-menus li:nth-child(2)').css('top', '-350px');
$('ul.primary-menus li:nth-child(2)').css('transition', 'all .7s ease-in-out');
}, 200);
setTimeout(function() {
$('ul.primary-menus li:nth-child(3)').css('top', '-350px');
$('ul.primary-menus li:nth-child(3)').css('transition', 'all .7s ease-in-out');
}, 300);
}else {
$(this).addClass('active-btn-wrap');
setTimeout(function(){
$('ul.primary-menus').addClass('active-primary-menus');
}, 500);
setTimeout(function(){
$('ul.primary-menus li:nth-child(1)').css('top', '0px');
$('ul.primary-menus li:nth-child(1)').css('transition', 'all .7s ease-in-out');
}, 1300)
setTimeout(function(){
$('ul.primary-menus li:nth-child(2)').css('top', '0px');
$('ul.primary-menus li:nth-child(2)').css('transition', 'all .7s ease-in-out');
}, 1000)
setTimeout(function(){
$('ul.primary-menus li:nth-child(3)').css('top', '0px');
$('ul.primary-menus li:nth-child(3)').css('transition', 'all .7s ease-in-out');
}, 700)
}
if ($('.menu-wrap').hasClass('active')) {
setTimeout(function(){
$('.menu-wrap').removeClass('active');
}, 500)
}else {
setTimeout(function(){
$('.menu-wrap').addClass('active');
}, 500)
}
if ($('.hamburger').hasClass('active-menu')) {
$('.hamburger').removeClass('active-menu');
}else {
$('.hamburger').addClass('active-menu');
}
})
}
openMenu();
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.