Off Canvas Slide Menu

by Arlina Fitriyani

HTML

<script src="https://arlina-design.googlecode.com/svn/trunk/javascript/prefixfree.min.js"></script>
<div class="bodyContainer">
  <main>
    <section>
      <div>
        <h1>Off Canvas Slide Menu</h1>
        <p>Consectetur adipiscing elit. Nunc a commodo tellus. Integer consectetur risus quis lacus volutpat, porta congue lorem hendrerit. Vivamus lobortis, lorem at euismod faucibus, nibh nisl aliquet lacus, ac ornare nulla nunc eget libero. Vivamus rhoncus ullamcorper libero, vel lacinia orci mollis sed.</p>
        <p>Nullam quis arcu et nibh malesuada dictum. Nam quis sapien rutrum, auctor diam ac, tempus odio. Proin a tellus vulputate, mollis elit et, bibendum elit. Phasellus tincidunt sit amet leo ac pharetra. Aliquam molestie odio massa, sit amet dignissim ipsum dictum in.</p>
           <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>  
      </div>
    </section>
  </main>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">Disclaimer</a></li>
      <li><a href="#">Playground</a></li>         
    </ul>
  </nav>

</div>
<!-- nav -->
<div class="navToggle"><span class="menu"></span></div>

CSS

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  font-size: 62.5%;
  background: #fff;
}

body {
  min-height: 100%;
  margin: 0;
  background: #f1f4f9;
    color:#fff;
  font: 1.4rem "Helvetica Neue", sans-serif;
}

.bodyContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

main,
nav {
  position: absolute;
  width: 100%;
}

main {
  left: 0;
}

nav {
  left: 100%;
}

.mainMove {
  left: -30%;
}

.navMove {
  left: 70%;
}

.navToggle {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 10;
  text-align: center;
}
.navToggle:hover {
  cursor: pointer;
}
.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
  background: #fff;
}
.navToggle:hover .menuOn {
  background: transparent;
}

.menu, .menu:before, .menu:after {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 5px;
  background: #fff;
  transition: 0.3s;
}
.menu:before, .menu:after {
  content: "";
  position: absolute;
  left: 0;
}
.menu:before {
  top: 10px;
}
.menu:after {
  bottom: 10px;
}

.menuOn {
  background: transparent;
}
.menuOn:before {
  top: 0;
  transform: rotate3d(0, 0, 1, 45deg);
}
.menuOn:after {
  bottom: 0;
  transform: rotate3d(0, 0, 1, -45deg);
}

main {
  padding: 50px;
  background: #30abd5;
  transition: all .2s ease-in-out;
}

nav {
  padding: 30px;
  transition: all .2s ease-in-out;
  color: #fff;
  background: #2f3b3f;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li a {
  display: block;
  padding: 20px;
  font-weight: 100;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  text-transform: lowercase;
}
nav ul li a:hover {
  color: #ff274d;
}

JavaScript

$(window).load(bodyContentHeight);
$(window).resize(function() {
	$('.bodyContainer, main, nav').css('height', '100%');
	bodyContentHeight();
});

function bodyContentHeight() {
	var newHeight = $(document).outerHeight() + 'px';
	$('.bodyContainer, main, nav').css('height', newHeight);
	// var docHeight = $(document).outerHeight();
	// console.log('.bodyContainer calculated on load: ' + newHeight + 'px');
}

$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('main').toggleClass('mainMove');
  $('nav').toggleClass('navMove');
})