Pure Html / CSS Off-canvas Mobile Menu

Preview:

Description:

A mobile-friendly responsive navigation which turns a horizontal menu into an off-canvas side menu using pure CSS and html checkbox & label tricks.

How to use it:

Create a normal horizontal navigation menu for your site.

<header>
  <div class="container page-wrapper">
    <div class="row">
      <div class="span-4">
        <div class="title-heading">off canvas menu</div>
      </div>
      <div class="span-8">
        <nav>
          <ul>
            <li><a href="#">Menu item 1</a></li>
            <li><a href="#">Menu item 2</a></li>
            <li><a href="#">Menu item 3</a></li>
            <li><a href="#">Menu item 4</a></li>
            <li><a href="#">Menu item 5</a></li>
            <li><a href="#">Menu item 6</a></li>
          </ul>
        </nav>
      </div><!-- .eight -->
    </div><!-- .row -->
    <label for="nav-checkbox" class="icon-menu menu-toggle"><span>Menu</span></label>
  </div>
</header>

Create the off-canvas menu.

<input type="checkbox" id="nav-checkbox">
<label for="nav-checkbox" class="body-trigger"></label>
<nav class="mobile off-canvas">
  <div class="block">
    <ul>
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
    </ul>
  </div>
  
</nav>

Add your main content to the container ‘main’.

<section class="main">
  <div class="container">
  </div>
</section>

The main CSS for the navigation menu.

.container {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 60px;
}
.container:before {
  display: table;
  content: "";
}
.container:after {
  display: table;
  clear: both;
  content: "";
}
ul ul, ol ol, ul ol, ol ul, ul li {
  font-size: 100%;
  list-style: none;
}
input {
  display: block;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #e2e2e2;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 15px;
  padding: 5px;
  width: 100%;
}
button, .btn {
  display: block;
  margin: 0 auto;
  width: 40%;
  opacity: 1;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  border: 1px solid #006992;
  border-radius: 4px;
  font-size: 20px;
  line-height: 40px;
  -webkit-transition: opacity 200ms ease-out;
  -o-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
  background-color: #009DDA;
  color: #FFF;
}
 @media screen and (max-width: 991px) {
button, .btn { width: 100%; }
}
.main .row { margin-bottom: 20px; }
.main .row:before {
  display: table;
  content: "";
}
.main .row:after {
  display: table;
  clear: both;
  content: "";
}
.row [class*="span-"] {
  float: left;
  margin-bottom: 0;
  /* Reset */
  margin-top: 0;
  /* Reset */
  margin-right: 2%;
}
.row [class*="span-"]:before {
  display: table;
  content: "";
}
.row [class*="span-"]:after {
  display: table;
  clear: both;
  content: "";
}
.row [class*="span-"]:last-child { margin-right: 0; }
.row .span-1 { width: 6.5%; }
.row .span-2 { width: 15%; }
.row .span-3 { width: 23.5%; }
.row .span-4 { width: 32%; }
.row .span-5 { width: 40.5%; }
.row .span-6 { width: 49%; }
.row .span-7 { width: 57.5%; }
.row .span-8 { width: 66%; }
.row .span-9 { width: 74.5%; }
.row .span-10 { width: 83%; }
.row .span-11 { width: 91.5%; }
.row .span-12 { width: 100%; }
.row .append-1 { margin-right: 10.5%; }
.row .append-2 { margin-right: 19%; }
.row .append-3 { margin-right: 27.5%; }
.row .append-4 { margin-right: 36%; }
.row .append-5 { margin-right: 44.5%; }
.row .append-6 { margin-right: 53%; }
.row .append-7 { margin-right: 61.5%; }
.row .append-8 { margin-right: 70%; }
.row .append-9 { margin-right: 78.5%; }
.row .append-10 { margin-right: 87%; }
.row .append-11 { margin-right: 95.5%; }

The core CSS for the off-canvas menu.

@media screen and (max-width: 767px) {
.row .span-4, .row .span-6, .row .span-8 {
  width: 100%;
  margin-bottom: 20px;
}
}
nav { float: right; }
@media screen and (max-width: 991px) {
nav { display: none; }
}
.menu-toggle {
  width: 1em;
  height: 1em;
  transition: left 0.3s ease;
  display: none;
  color: #fff;
  top: 0;
  float: left;
}
@media screen and (max-width: 991px) {
.menu-toggle {
  text-transform: uppercase;
  display: block;
  position: absolute;
  right: 50px;
  top: 15px;
}
}
nav ul > li {
  display: inline-block;
  text-transform: capitalize;
  line-height: 40px;
}
nav ul > li a {
  color: #fff;
  text-decoration: none;
}
nav ul > li:after { content: ' | '; }
nav ul > li:last-child:after { content: ''; }
@media screen and (max-width: 991px) {
nav ul > li:after { content: ''; }
}
#nav-checkbox { display: none; }
#nav-checkbox:checked ~ .off-canvas {
  left: 0;
  z-index: 2000;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
#nav-checkbox:checked ~ .icon-menu {
  left: -290px;
  transition: left 0.3s ease;
}
#nav-checkbox:checked ~ .body-trigger {
  pointer-events: auto;
  z-index: 100;
  height: auto;
  position: absolute;
  overflow: hidden;
}
#nav-checkbox:checked ~ .page-wrapper {
  right: -290px;
  overflow: hidden;
}
#nav-checkbox:checked ~ body {
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.body-trigger {
  position: absolute;
  top: 35px;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  float: left;
  display: block;
  height: 100%;
}
.off-canvas {
  position: absolute;
  left: -290px;
  width: 290px;
  background: #191a19;
  transition: left 0.3s ease;
  height: auto;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.off-canvas .block {
  display: block;
  z-index: 105;
  float: left;
  width: 100%;
  height: auto;
}
.off-canvas .block ul { display: block; }
.off-canvas .block ul li { display: block; }
.off-canvas .block ul li a {
  display: block;
  color: #818181;
  font-size: 18px;
  font-family: SkyRegular, Arial, Helvetica, Geneva, sans-serif;
  line-height: 27px;
  padding: 11.5px 23px;
  border-bottom: 1px solid #212221;
  border-top: 1px solid #212221;
}
.off-canvas .block ul li a:hover {
  color: #fff;
  background: #000;
}
.page-wrapper {
  transition: right .3s ease;
  display: block;
  position: relative;
  overflow: hidden;
}
li.navsplitter {
  background-color: #262726;
  color: #fff;
  font: 13px SkyBold, Arial, Helvetica, Geneva, sans-serif;
  padding-top: 4px;
  padding-left: 23px;
  padding-bottom: 4px;
}