Off-canvas Push Menu In Pure HTML / CSS

Preview:

Description:

A pure Html / CSS solution used to create an App style off-canvas push menu for site navigation using CSS3 :target selector.

How to use it:

Create a navigation for your website.

<nav class="site-nav" id="site-nav">
  <a href="#">Home</a>
  <a href="#">Services</a>
  <a href="#">Works</a>
  <a href="#">Portfolio</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Create menu toggle buttons inside your main content.

<div class="page-wrap">
  <header class="main-header">
    <a href="#site-nav">&#9776;</a>
    <a href="#" class="close-menu">&#9776;</a>
    <h1>Pure CSS Push Menu</h1>
  </header>
  <div class="content">
    Main Content Here
  </div>
</div>

The core CSS / CSS3 rules.

.site-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #222;
  overflow-y: auto;
  transition: width 0.3s ease;
  white-space: nowrap;
  text-transform: uppercase;
}
.site-nav a {
  display: block;
  border-bottom: 1px solid #666;
  color: white;
  padding: 34px;
}
.site-nav a:hover,
.site-nav a:focus {
  background: #333;
}
.site-nav:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
#site-nav:target {
  width: 30%;
}
#site-nav:target + .page-wrap {
  width: 70%;
}
#site-nav:target + .page-wrap .close-menu {
  display: block;
}
#site-nav:target + .page-wrap .main-header {
  width: 70%;
  left: 30%;
}
.main-header {
  background: #222;
  padding: 5px 0 5px 65px;
  color: white;
  position: fixed;
  width: 100%;
  left: 0;
  transition: all 0.3s ease;
}
.main-header a {
  position: absolute;
  left: 20px;
  top: 20px;
  color: white;
  font-size: 32px;
}
.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}