JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<input id="menu-toggle" type="checkbox" name="menu-toggle">
<label for="menu-toggle"></label>
<div id="wrapper">
  <div id="offcanvas">
    <div class="inside">
      <div class="spacer"></div>
      <p>Facebook</p>
      <p>Facebook</p>
      <p>Facebook</p>
      <p>Facebook</p>
      <input type="search">
      <ul>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
      </ul>
    </div>
  </div>
  <header>
    <p>
      Content – Header
    </p>
  </header>
  <div id="container">
    <div id="main">
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But behold, press the three bars at the top and there shall be a menu!</p>
      <p>Some fancy web site content goes here. But...

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  min-height: 100%;
}

p,
ul {
  margin: 0 1em 1.5em;
}

ul {
  list-style: none;
  padding-left: 0;
}

html body #wrapper {
  float: none;
}

header,
footer {
  min-height: 50px;
  overflow: hidden;
}

header {
  background: yellow;
}

footer {
  clear: left;
  background: green;
}

#offcanvas a {
  color: #fff;
}

#offcanvas p {
  margin-bottom: 0;
}


/*
#menu-toggle:not(:checked) ~ #wrapper #offcanvas {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}*/

#menu-toggle:not(:checked) ~ #wrapper #offcanvas {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

#menu-toggle:not(:checked) ~ #wrapper #container #main {
  width: 100%;
}

#wrapper,
#offcanvas,
header,
#container,
footer {
  -webkit-transition: 550ms cubic-bezier(0.18, 0.89, 0.32, 1.28) all;
  transition: 550ms cubic-bezier(0.18, 0.89, 0.32, 1.28) all;
}

header,
footer {
  min-height: 50px;
  overflow: hidden;
}

header {
  background: yellow;
}

footer {
  clear: left;
  background: green;
}


/*
label[for="menu-toggle"] {
    width:40px;
    height:40px;
    top:8px;
    position:absolute;
    text-align:center;
    cursor: pointer;
    z-index: 10;
}*/

label[for="menu-toggle"] {
  width: 40px;
  height: 40px;
  right: 10px;
  top: 8px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}

label[for="menu-toggle"]:after {
  color: #000;
  font: 34px/40px Arial;
  content: "\2261";
  -webkit-transition: 5s cubic-bezier(0.18, 0.89, 0.32, 1.28) all;
  transition: 5s cubic-bezier(0.18, 0.89, 0.32, 1.28) all;
}

#menu-toggle:checked + label[for="menu-toggle"]:after {
  color: #FFF;
  content: "×";
}

#menu-toggle...

JavaScript

/*huppens pure off canvas*/
$("#wrapper").click(function() {
  if ($("#menu-toggle").is(':checked')) {
    $("#menu-toggle").prop("checked", false);
    event.preventDefault();
  }
});