Pure CSS Off-canvas Bootstrap Navigation

Preview:

Description:

A CSS extension for Bootstrap that lets you create an off-canvas navigation menu for your web project.

How to use it:

Create a Bootstrap navbar as this:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sample</a>
    <label for="off_canvas" class="navbar-toggle custom1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </label>
  </div>
</nav>

Create the html for the off-canvas menu.

<div class="off-canvas">
  <input type="checkbox" id="off_canvas" />
  <div class="cstm-shade">
    <div class="cstm-navi">
      <div class="cstm-navi-content">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" class="active">
            <a href="#">
              <span class="glyphicon glyphicon-home"></span>
              Home
            </a>
          </li>
          <li role="presentation">
            <a href="#">
              <span class="glyphicon glyphicon-heart"></span>
              Favourites
            </a>
          </li>
          <li role="presentation">
            <a href="#">
              <span class="glyphicon glyphicon-user"></span>
              Profile
            </a>
          </li>
          <li role="presentation">
            <a href="#">
              <span class="glyphicon glyphicon-cog"></span>
              Account Settings
            </a>
          </li>
          <li role="presentation">
            <a href="#">
              <span class="glyphicon glyphicon-off"></span>
              Logout
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

The core CSS styles.

.custom1 {
  display: block;
  cursor: pointer;
}
.off-canvas > .cstm-shade {
  width: 0;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  transition: background 0.5s ease, width 0s ease 0.5s, height 0s ease 0.5s;
}
.off-canvas > input[type="checkbox"] {
  display: none;
}
.off-canvas > input[type="checkbox"]:checked ~ .cstm-shade {
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  transition: background 0.5s ease;
}
.off-canvas > .cstm-shade > .cstm-navi {
  background: white;
  width: 300px;
  height: 100%;
  position: fixed;
  right: -300px;
  transition: right 0.5s ease;
}
.off-canvas > input[type="checkbox"]:checked ~ .cstm-shade > .cstm-navi {
  right: 0;
}
.cstm-navi-content {
  padding: 20px;
  padding-top: 80px;
}