Create A Siding Off-canvas Menu with Pure CSS

Preview:

Description:

In this post we’re going to create a mobile app-style off-canvas menu that will slide out from the edge of your screen and push the main content to the right. No Javascript (jQuery) needed.

How to use it:

Create an off-canvas navigation menu using Html unordered list.

<nav class="site-menu">
  <h2>Menu</h2>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>
</nav>

Create links to open and close the off-canvas menu.

<a href="#site-canvas" class="toggle-nav">&#x2261;</a>

<a href="#" class="close-canvas"></a>

Insert other contents into the Html document. The full Html should be like this.

<div class="site-wrapper">
  <div class="site-canvas" id="site-canvas">
    <nav class="site-menu">
      <h2>Menu</h2>
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul>
    </nav>
    <div class="site-content">
      <header class="header"> <a href="#site-canvas" class="toggle-nav">&#x2261;</a>
        <h1>Off-Canvas Menu with Pure CSS</h1>
      </header>
      <div class="content">
        Your Main Content Goese Here
      </div>
    </div>
    <a href="#" class="close-canvas"></a> </div>
</div>

The required CSS/CSS3 styles to enable the off-canvas menu. Tweak the CSS or add your own styles as you wish.

.site-wrapper {
  height: 800px; /* Temp */
  overflow: hidden;
  position: relative;
  width: 100%;
}

.site-canvas {
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 300ms ease all;
  -moz-transition: 300ms ease all;
  -ms-transition: 300ms ease all;
  -o-transition: 300ms ease all;
  transition: 300ms ease all;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.site-canvas--active,
#site-canvas:target {
  -webkit-transform: translateX(300px);
  -moz-transform: translateX(300px);
  -ms-transform: translateX(300px);
  -o-transform: translateX(300px);
  transform: translateX(300px);
  -webkit-transform: translate3d(300px, 0, 0);
  -moz-transform: translate3d(300px, 0, 0);
  -ms-transform: translate3d(300px, 0, 0);
  -o-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}

.site-menu {
  background: #e74c3c;
  color: White;
  height: 100%;
  left: -300px;
  padding: 15px;
  position: absolute;
  top: 0;
  width: 300px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.site-content { position: relative; }

.close-canvas {
  background-color: transparent;
  bottom: 0;
  cursor: pointer;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#site-canvas:target .close-canvas { display: block; }

/* Extra... */

a { color: CornflowerBlue; }

.header {
  background-color: #2c3e50;
  padding: 15px;
  position: relative;
}

.header a {
  color: White;
  text-decoration: none;
}

.toggle-nav {
  font-size: 2.8em;
  left: .3em;
  margin-top: -.7em;
  position: absolute;
  top: 50%;
}

h1 {
  color: White;
  margin: 0;
  padding-left: 1em;
}

.content { padding: 15px; }