<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>
<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() {