Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <div class="container">
    <div class="site-header">
      <a href="#nav" class="nav-toggle"><span>Nav</span></a>
      <div class="site-title">This is my site</div>
    </div>
    <div class="content">
      <div class="main">
        <h1>This is my article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla enim, facilisis quis urna et, ultrices hendrerit nibh. Integer adipiscing facilisis elementum. Etiam vitae lectus vulputate, facilisis tortor eu, aliquam nunc. Duis ut euismod quam, eu luctus erat. Donec tincidunt adipiscing ullamcorper. Aliquam non scelerisque nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In aliquam libero quam, eu ultrices enim gravida et. Sed tincidunt mauris nisl, eget tempus urna tristique vitae. Proin eu nulla et lacus volutpat faucibus. Curabitur libero eros, mattis eget porttitor in, pretium pretium libero.</p>
        <p>Ut auctor libero eget libero vehicula faucibus. Mauris sit amet gravida ligula, et placerat massa. Donec aliquet aliquam varius. Vestibulum mollis vitae velit sit amet fermentum. Suspendisse ullamcorper, purus vitae vestibulum lobortis, enim arcu semper velit, sit amet vehicula mi dolor et erat. Pellentesque sed lacus a libero imperdiet porta in quis justo. Vivamus sit amet est at nulla accumsan tincidunt. Curabitur vehicula porttitor felis, id viverra mi tristique a. Nulla elit nibh, interdum ac purus et, malesuada ultricies urna.</p>
        <p>Aliquam gravida tincidunt metus, sit amet tincidunt enim rhoncus vel. In ac mi et est dictum adipiscing ac non diam. Aliquam at ligula massa. Integer non felis a dui semper ultricies. Integer nisi ipsum, mattis vitae semper sit amet, tempor cursus metus. Praesent bibendum consequat viverra. Proin congue ligula et neque auctor, sed elementum leo pellentesque. Phasellus ac leo elit. Fusce ac tellus in risus gravida ultrices quis at leo. Fusce tincidunt ante varius neque ultricies pharetra. Sed tempus metus vitae tortor tristique posuere.</p>
        <p>Donec et nisi varius, tempus enim in, tristique enim. Duis eu eleifend nisl, nec egestas justo. Praesent a cursus velit. Ut erat metus, molestie tincidunt venenatis et, viverra vitae lorem. Donec a suscipit lorem. Proin vel luctus erat. Nunc a neque leo. Quisque congue erat id lacinia accumsan. Vestibulum auctor arcu eget lobortis varius. In ut leo interdum, varius urna vitae, porttitor sem. Curabitur suscipit justo mauris, at iaculis risus pellentesque semper. Maecenas purus sapien, venenatis at orci eget, vehicula vehicula sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla venenatis scelerisque imperdiet.</p>
        <p>Proin ut lacus venenatis, blandit lectus a, auctor elit. Ut imperdiet mauris urna, id eleifend lorem pellentesque vel. Maecenas volutpat nisi vitae gravida ultricies. Nam vel ultricies mi. Nulla vestibulum rutrum consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum mollis orci adipiscing tincidunt. Morbi est tortor, feugiat eu urna in, faucibus imperdiet sapien. Nulla eget nibh diam. Integer eu rutrum neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor at nisl vel varius. In adipiscing ante et justo sagittis luctus. In eget dui hendrerit, mollis diam ac, euismod enim. Aliquam vehicula metus id ante molestie dignissim.</p>
      </div>
      <nav id="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Twitto</a></li>
          <li><a href="#">Myface</a></li>
          <li><a href="#">Snapsquare</a></li>
          <li><a href="#">Githug</a></li>
        </ul>
      </nav>
      <aside>
        <img src="https://s3.amazonaws.com/com.jakearchibald/posts/flexbox-vs-grid/me.18b583092683.jpg">
        <p>Hi, I'm Clarence Quince thanks for reading my blog please visit again soon. I need the attention.</p>
      </aside>
    </div>
  </div>
</body>
</html>
 
// Nav open/close
(function() {
  var transitionProps = ['transition', 'WebkitTransition'];
  var transformCSSProps = ['transform', '-webkit-transform'];
  var transitionEndEvents = ['transitionend', 'WebkitTransitionEnd'];
  var docEl = document.documentElement;
  var navEl;
  var containerEl;
​
  function end() {
    transitionProps.forEach(function(transitionProp, i) {
      containerEl.style[transitionProp] = navEl.style[transitionProp] = '';
      containerEl.removeEventListener(transitionEndEvents[i], end);
    });
  }
​
  function navToggle() {
    transitionProps.forEach(function(transitionProp, i) {
      containerEl.style[transitionProp] =
        navEl.style[transitionProp] =
        transformCSSProps[i] + ' 0.3s ease-out';
​
      containerEl.addEventListener(transitionEndEvents[i], end);
    });
​
    docEl.classList.toggle('nav-open');
  }
​
  function ready() {
    navEl = document.querySelector('nav');
    navEl.classList.add('enhanced');
    containerEl = document.querySelector('.container');
​
    document.querySelector('.nav-toggle').addEventListener('click', function(event) {
      event.preventDefault();
      navToggle();
    });
  }
​
  if (document.readyState == "interactive" || document.readyState == "complete") {
    ready();
  }
  else {
    document.addEventListener('DOMContentLoaded', ready);
  }
}());
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jakearchibaldpro
0viewers