<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 id="primary-navigation"> <a href="#">menu</a> </div> <div id="secondary-navigation"> <a href="#">links</a> <a href="#">links</a> <a href="#">links</a> <a href="#">links</a> <a href="#">links</a> </div> <main id="main"> </main>

#primary-navigation { background:#000; color:#fff; display:inline-block; position:fixed; top:0; right:0; z-index:9999; } #primary-navigation a { color:#fff; padding:15px 10px; display:block; } #secondary-navigation { position:fixed; top:50px; right:0px; width:200px; height:500px; background:#000; color:#fff; transition:all 0.4s ease-out; transform:translateX(200px); } #secondary-navigation.opened { transform:translateX(0px); transition:all 0.4s ease-out; } body{ perspective: 600px; perspective-origin: 100% 50%; } #main { background:#f33; width:100%; height:500px; transition:all 0.4s ease-out; } .animate { transition:all 0.4s ease-out; transform: rotateY(-15deg) translate(27px, 80px); } .slide-left { /*transform:translateX(-200px);*/ }

$(document).ready(function(){ $("#primary-navigation").click(function(){ $("#secondary-navigation").toggleClass('opened'); $("#main").toggleClass('slide-left'); $("#main").toggleClass('animate'); }); });