A Pen by Mason Wendell.

A-Pen-by-Mason-Wendell.markdown

A Pen by Mason Wendell

A Pen by Mason Wendell on CodePen.

License.

index.html

<div id="skip-link">
  <a href="#nav" class="menu-trigger">menu</a>
</div>

<header id="header" role="banner" class="site-header">
  <a href="" >
    <h1 class="site-name">Offside Nav Demo</h1>
  </a>
</header>

<main id="main" role="main">
  <article role="article">
    <h2>Article Title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
    </p>
  </article>
</main>

<nav role="navigation" id="nav">
  <ul class="menu">
    <li>
      <a href="" title="">Nav 1</a>
    </li>
    <li>
      <a href="" title="">Nav 2</a>
    </li>
    <li>
      <a href="" title="">Nav 3</a>
    </li>
    <li>
      <a href="" title="">Nav 4</a>
    </li>
    <li>
      <a href="" title="">Nav 5</a>
    </li>
    <li>
      <a href="" title="">Nav 6</a>
    </li>
  </ul>
</nav>

script.js

// VARS
    var nav_offside_active = false;
    $('body').attr('data-nav-offside-active', nav_offside_active);
    // $('[role="banner"], [role="main"]')
    //     .wrapAll('<div id="content-wrapper" class="wrapper"></div>');

    // SHOW/HIDE MENU
    var showMenu = function() {
      nav_offside_active = (nav_offside_active === false) ? true : false;
      $('body').attr('data-nav-offside-active', nav_offside_active);
      if (nav_offside_active === true) {
        clear_pane_build();
      } else {
        clear_pane_destroy();
      }
    }

    // CLEAR PANE
    var clear_pane_build = function() {
      $('[data-nav-offside-active="true"]')
        .append('<div id="clear-pane"></div>');
    }
    var clear_pane_destroy = function() {
      $('#clear-pane').remove();
    }

    // BUTTONS
    $('.menu-trigger').click(function(e) {
      e.preventDefault();
      showMenu();
    });
    $("#clear-pane").live('click', function(e){
      $('.menu-trigger').click();
    });

style.css

.menu-trigger {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 100;
}
@media (min-width: 780px) {
  .menu-trigger {
    display: none;
  }
}

@media (max-width: 779px) {
  body {
    position: relative;
  }

  [role="navigation"], [role="banner"], [role="main"] {
    -moz-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  [role="navigation"] {
    position: absolute;
    width: 250px;
    top: 0;
    left: -250px;
  }
}
@media (max-width: 779px) {
  [data-nav-offside-active="true"] [role="navigation"] {
    -moz-transform: translateX(250px);
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  [data-nav-offside-active="true"] [role="banner"] {
    -moz-transform: translateX(250px);
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  [data-nav-offside-active="true"] [role="main"] {
    -moz-transform: translateX(250px);
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
}

#clear-pane {
  position: absolute;
  top: 0;
  left: 250px;
  width: 100%;
  height: 100%;
}

@media (min-width: 780px) {
  body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  [role="banner"] {
    -webkit-order: 1;
    order: 1;
  }

  [role="main"] {
    -webkit-order: 3;
    order: 3;
  }

  [role="navigation"] {
    -webkit-order: 2;
    order: 2;
  }
}