var main = function() { /* Push the body and the nav over by 285px over */ $('.icon-menu').click(function() { $('.menu').animate({ left: "0px" }, 200); $('body').animate({ left: "285px" }, 200); }); /* Then push them back */ $('.icon-close').click(function() { $('.menu').animate({ left: "-285px" }, 200); $('body').animate({ left: "0px" }, 200); }); }; $(document).ready(main) /* Initial body */ body { left: 0; margin: 0; overflow: hidden; position: relative; } /* Initial menu */ .menu { background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top; left: -285px; /* start off behind the scenes */ height: 100%; position: fixed; width: 285px; } /* Basic styling */ .jumbotron { background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png'); height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0; } .menu li { border-bottom: 1px solid #636366; font-family: 'Open Sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px; } .menu a { color: #fff; font-size: 15px; text-decoration: none; text-transform: uppercase; } .icon-close { cursor: pointer; padding-left: 10px; padding-top: 10px; } .icon-menu { color: #fff; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 16px; padding-bottom: 25px; padding-left: 25px; padding-top: 25px; text-decoration: none; text-transform: uppercase; } .icon-menu i { margin-right: 5px; }