Pure CSS Sidebar Toggle Menu – Sidekick

Preview:

Description:

Sidekick is a pure HTML / CSS based off-screen sidebar menu for your mobile site navigation. Click on the toggle menu you will see a sidebar navigation slides out from the left side of the screen while pushing the main page to the right.

Basic usage:

First you need to include the Sidekick.css in the header of your html page.

<link href="styles/sidekick.css" rel="stylesheet">

Create the menu toggle with a SVG based toggle icon as follows:

<input type="checkbox" id="sidekickToggle">
<label class="sidekick-toggle" for="sidekickToggle">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  <g>
    <rect x="96" y="241" width="320" height="32"/>
    <rect x="96" y="145" width="320" height="32"/>
    <rect x="96" y="337" width="320" height="32"/>
  </g>
  </svg>
  <span class="sr-only">Menu Toggle</span>
</label>

Insert the sidebar navigation together with main content into your html page.

<div class="sidekick">
  <nav class="sidekick-panel">
    <h1>Sidekick Menu</h1>
    <ul>
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
      <li><a href="#">Nav Item 4</a></li>
    </ul>
  </nav>
  <div class="sidekick-body">
    <h1>Sidekick Demo</h1>
    <h2>Documentation Will Go Here</h2>
  </div>
</div>