<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<div id="bk-wrap">
<div id="bk-no-blur"></div>
<div id="bk-blur"></div>
</div>
<div id="bk-shadow"></div>
<p id="logo">Coffee Shop</p>
<a href="#" id="menu-link">
<span class="menu-sub">Browse Our</span>
<span class="menu-main">Menus</span>
</a>
<div id="menu-wrap">
<div id="menu-inner">
<h1 id="menu-title">Menus</h1>
<a href="#" id="close">x</a>
<div id="menu-cards">
<div class="menu-card">
<img src="http://chrisarasin.com/img/drinks.jpg" alt="drinks">
<h3>Drinks</h3>
</div>
<div class="menu-card">
<img src="http://chrisarasin.com/img/sweets.jpg" alt="drinks">
<h3>Sweets</h3>
</div>
<div class="menu-card">
<img src="http://chrisarasin.com/img/sandwiches.jpg" alt="drinks">
<h3>Sandwiches</h3>
</div>
</div>
</div>
</div>
</html>
<script>
var $menuWrap = $('#menu-wrap'),
$body = $('body'),
$menuTitle = $('#menu-title'),
$close = $('#close'),
$menuCards = $('.menu-card'),
$menuInner = $('#menu-inner'),
$menuLink = $('#menu-link');
setCardHeight();
$(window).resize(setCardHeight);
$menuLink.on('click', function(e) {
e.preventDefault();
showOverlay();
});
$close.on('click', function(e) {
e.preventDefault();
hideOverlay();
});
function showOverlay() {
$body.addClass('menu-on');
$menuWrap.addClass('display').addClass('visible');
setTimeout(function() {
$menuTitle.addClass('on');
$close.addClass('on');
}, 200);
$menuCards.each(function(i) {
var $card = $(this);
setTimeout(function() {
$card.addClass('on');
}, 200 + 50 * i);
});
}
function hideOverlay() {
$body.removeClass('menu-on');
$menuCards.removeClass('on');
$menuTitle.removeClass('on');
$close.removeClass('on');
setTimeout(function() {
$menuWrap.removeClass('display').removeClass('visible');
}, 350);
}
function setCardHeight() {
var windowWidth = $(window).width();
var topVal;
if (windowWidth >= 1300) {
topVal = ($(window).height() - 700) / 2;
} else {
topVal = ($(window).height() - 200 - (windowWidth / 1300 * 513)) / 2;
}
if (topVal < 10) {
topVal = 10;
}
$menuInner.css('top', topVal);
}
</script>
html {
height: 100%;
box-sizing: border-box;
font-size: 10px;
line-height: 1.5;
color: #333;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
margin: 0;
font-family: "Gotham Rounded", "Proxima Nova",sans-serif;
font-weight: 400;
color:#fff;
letter-spacing: .1em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
#logo {
position: absolute;
top:50px;
left: 50px;
z-index: 2100;
font-weight: 700;
font-size: 18px;
margin: 0;
letter-spacing: .125em;
transform: translateY(0);
transition: all .4s;
transition-delay: .1s;
}
.menu-on #logo {
opacity: 0;
transform: translateY(-20px);
}
#menu-link {
position: absolute;
left: 50px;
top: 50%;
margin-top: -25px;
z-index: 2100;
color: #fff;
text-decoration: none;
transform: translateY(0);
transition: all .35s;
}
#menu-link:hover {
color: #80a98a;
}
.menu-on #menu-link {
opacity: 0;
transform: translateY(-20px);
}
.menu-sub {
font-size: 14px;
line-height: 1.2;
display: block;
opacity: .6;
letter-spacing: .125em;
font-weight: 600;
}
.menu-main {
font-size: 40px;
line-height: 1.2;
display: block;
letter-spacing: .09em;
font-weight: 500;
}
#bk-wrap {
width: 120%;
height: 100%;
background: url(http://chrisarasin.com/img/bk.jpg) no-repeat center center;
background-size: cover;
position: fixed;
left:-70px;
top:0;
z-index: 1;
transform: translateX(0) scale(1);
transition: all .5s;
}
#bk-no-blur, #bk-blur, #bk-shadow {
width: 100%;
height: 100%;
background-size: cover;
position: absolute;
left:0;
top:0;
z-index: 1;
}
#bk-shadow {
index: 1;
position: fixed;
}
#bk-blur {
background: url(http://chrisarasin.com/img/bk-blur.jpg) no-repeat center center;
background-size: cover;
opacity: 0;
z-index: 2;
transition: opacity .4s;
}
.menu-on #bk-wrap {
transform: translateX(200px) scale(1.3);
}
.menu-on #bk-blur {
opacity: 1;
}
#bk-shadow {
background: transparent;
box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, .75);
z-index: 100;
}
/*.menu-on #bk-shadow {
box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, 1);
}*/
#menu-wrap {
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
z-index: 2000;
display: none;
opacity: 0;
transition: all .3s;
}
#menu-wrap.display {
display: block;
}
#menu-wrap.visible {
opacity: 1;
}
#menu-inner {
max-width: 1300px;
margin: 0 auto;
position: relative;
padding: 0 70px;
}
#menu-title {
font-weight: 400;
font-size: 28px;
padding:30px 8px;
margin: 0;
opacity: 0;
transition: all .3s;
top:10px;
transform: translateY(0);
position: relative;
}
#menu-title.on {
opacity: 1;
transform: translateY(-10px);
}
#close {
font-weight: 400;
font-size: 26px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
width: 43px;
height: 43px;
text-align: center;
border-radius: 40px;
position: absolute;
left: 20px;
top:40px;
opacity: 0;
transform: translateY(0);
transition: all .3s;
line-height: 1;
padding: 7px 0 0 3px;
}
#close:hover {
background: rgba(255, 255, 255, .25);
}
#close.on {
opacity: 1;
transform: translateY(-10px);
}
#menu-cards {
background: transparent;
perspective: 1000px;
}
#menu-cards:before, #menu-cards:after {
display: table;
content: " ";
}
#menu-cards:after {
clear: both;
}
.menu-card {
width: 33.33%;
padding: 8px;
float: left;
position: relative;
opacity: 0;
transition: all .3s;
transform: scale(.975);
}
.menu-card.on {
opacity: 1;
transform: scale(1);
}
.menu-card:hover {
transform: scale(1.025);
cursor: pointer;
}
.menu-card img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.menu-card h3 {
font-weight: 500;
font-size: 17px;
letter-spacing: .1em;
margin: 0;
}
@media (max-width: 758px) {
#menu-inner {
padding: 0 20px;
}
.menu-on #bk-wrap {
transform: translateX(100px) scale(1.3);
}
#menu-title {
padding-left: 55px;
}
.menu-card {
padding: 4px;
}
.menu-card h3 {
font-size: 14px;
}
}
