<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="view">
<main class="page">
<div class="transform-container">
<div class="catalog">
<span class="menu-opener"></span>
<span class="profile-opener"></span>
<img src="http://cdn.zmescience.com/wp-content/uploads/2011/04/mallard.jpg" alt="" />
<img src="http://cdn.zmescience.com/wp-content/uploads/2011/04/mallard.jpg" alt="" />
</div>
</div>
</main>
<div class="overlay"></div>
<div class="nav-slide side-menu">
<h2>MENU</h2>
<ul>
<li>Nav item 01</li>
<li>Nav item 02</li>
<li>Nav item 03</li>
<li>Nav item 04</li>
<li>Nav item 05</li>
</ul>
</div>
<div class="nav-slide side-profile">
PROFILE MENU
</div>
</div>
<script>
$('.menu-opener').on('click', function() {
$('body').addClass('no-scroll menu-open');
});
$('.profile-opener').on('click', function() {
$('body').addClass('no-scroll profile-open');
});
$('.overlay').on('click', function() {
$('body').removeClass('no-scroll menu-open profile-open');
});
</script>
</script>
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background: #EAEAEC;
height: 100%;
position: relative;
-webkit-tap-highlight-color: rgba(29, 29, 31, 0.1);
}
.menu-opener {
width: 50px;
height: 50px;
cursor: pointer;
background: #FFF;
background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat 20px 15px;
background-size: 60%;
display: block;
}
.profile-opener {
width: 50px;
height: 50px;
cursor: pointer;
background: #FFF;
background: url(http://images.pajezy.com/notes/profile.png) no-repeat 5px 20px;
background-size: 60%;
display: block;
position: absolute;
right: 0;
top: 0;
}
.view {
overflow: hidden;
left: 0;
top: 0;
right: 0;
opacity: 1 !important;
position: absolute;
}
.page {
width: 100vw;
height: auto;
margin: 0;
padding: 0;
display: block;
position: relative;
background: #EAEAEC;
}
body .transform-container {
-webkit-transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.catalog {
text-align: center;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
width: 100%;
height: 800px;
float: left;
top: 72px;
background: #EAEAEC;
}
.catalog img {
width: 40%;
margin: 140px 40px;
}
.overlay {
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99;
background: rgba(29, 29, 31, 0.6);
visibility: hidden;
opacity: 0;
}
.profile-open .overlay, .menu-open .overlay, .overlay {
-webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.nav-slide {
font-family: Arial;
padding: 190px 0 0 50px;
color: white;
display: block;
position: fixed;
width: 281px;
height: auto;
background: #1D1D1F;
top: 0;
bottom: 0;
letter-spacing: .1875rem;
overflow: hidden;
min-height: 500px;
z-index: 99;
margin-top: 0 !important;
-webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: translate3d(-281px, 0, 0);
-moz-transform: translate3d(-281px, 0, 0);
-ms-transform: translate3d(-281px, 0, 0);
-o-transform: translate3d(-281px, 0, 0);
transform: translate3d(-281px, 0, 0);
}
.nav-slide ul {
padding: 0;
margin-top: 40px;
}
.nav-slide li {
list-style: none;
margin-bottom: 20px;
font-size: 12px;
}
.nav-slide.side-menu {
left: 0;
-webkit-transform: translate3d(-281px, 0, 0);
-moz-transform: translate3d(-281px, 0, 0);
-ms-transform: translate3d(-281px, 0, 0);
-o-transform: translate3d(-281px, 0, 0);
transform: translate3d(-281px, 0, 0);
}
.nav-slide.side-profile {
right: 0;
left: auto;
color: black;
background: rgba(255, 255, 255, 0.68);
-webkit-transform: translate3d(281px, 0, 0);
-moz-transform: translate3d(281px, 0, 0);
-ms-transform: translate3d(281px, 0, 0);
-o-transform: translate3d(281px, 0, 0);
transform: translate3d(281px, 0, 0);
}
body.no-scroll {
overflow: hidden;
}
body.menu-open .transform-container {
-webkit-transform: translate3d(281px, 0, 0);
-moz-transform: translate3d(281px, 0, 0);
-ms-transform: translate3d(281px, 0, 0);
-o-transform: translate3d(281px, 0, 0);
transform: translate3d(281px, 0, 0);
}
body.profile-open .transform-container {
-webkit-transform: translate3d(-281px, 0, 0);
-moz-transform: translate3d(-281px, 0, 0);
-ms-transform: translate3d(-281px, 0, 0);
-o-transform: translate3d(-281px, 0, 0);
transform: translate3d(-281px, 0, 0);
}
.profile-open .overlay, .menu-open .overlay {
visibility: visible;
opacity: 1;
}
.menu-open .side-menu, .profile-open .side-profile {
-webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
