JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
  <button class="offcanvas-toggle">Open offcanvas here</button>
  <h1>Simple HTML, LESS, jQuery responsive offcanvas navigation menu</h1>
  <p>This is simple offcanvas navigation menu build on HTML, LESS and jQuery. You can use it as a starter offcanvas template for your next project. If you want to see compiled version of LESS just click on <i>"View Compiled"</i> button in CSS section. In CSS
    there are comments that highlight what's important to include. There is a full tutorial on how to use this offcanvas navigation menu at slicejack.com/blog, just click on button bellow to read full article.</p>
  <a href="#" class="btn">Read more on Slicejack.com</a>
</div>
<!-- /.page wrap -->

<div class="offcanvas">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Blog</a>
    </li>
    <li><a href="#">About us</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">Twitter</a>
    </li>
  </ul>
</div>
<!-- /.offcanvas -->

CSS

body {
  overflow-x: hidden;
}
/*
 * Page wrap
 */

.page-wrap {
  -webkit-transition: -webkit-transform 0.2s;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.offcanvas-expanded .page-wrap {
  -webkit-transform: translateX(320px);
  -ms-transform: translateX(320px);
  transform: translateX(320px);
}
/*
 * Offcanvas
 */

.offcanvas {
  width: 320px;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 5000;
  -webkit-transform: translateX(-320px);
  -ms-transform: translateX(-320px);
  transform: translateX(-320px);
  -webkit-transition: -webkit-transform 0.2s;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.offcanvas-expanded .offcanvas {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

JavaScript

$(document).ready(function() {
  $('.offcanvas-toggle').on('click', function() {
    $('body').toggleClass('offcanvas-expanded');
  });
});
$(document).click(function(e) {
  if ((e.target != $('.offcanvas')[0]) && (e.target != $('.offcanvas-toggle')[0]) && ($('body').hasClass('offcanvas-expanded'))) {
    var li_tags = $($('.offcanvas')[0]).find('li');
    var a_tags = $($('.offcanvas')[0]).find('a');
    for (var i = 0; i < li_tags.length; i++) {
      if (e.target == li_tags[i] || e.target == a_tags[i]) {
        return;
      }
    }
    $('body').toggleClass('offcanvas-expanded');
  }
});