CSS-only sidebar, no Javascript

This is a small example to show what CSS can do, and that Javascript isn't always needed. It is used in the sidebar of this web page, too. Click or touch the hamburger menu to open the sidebar. Click or touch anywhere to close it again.

The markup and styles required to render and animate the sidebar are minimal. The following HTML creates a sidebar with a list of links.

<div class="hamburger">
  <label class="helper">
    <input type="checkbox" name="navbar-toggle" value="0">
    <div class="navbar-wrapper">
      <span class="icon"></span>
      <span class="cover"></span>
      <nav class="sidebar">
        <div class="title">categories</div>
        <ul>
          <li><a href="/category/django.html">Django</a></li>
          <li><a href="/category/frontend.html">Frontend</a></li>
          <li><a href="/category/linuxserver.html">Linuxserver</a></li>
        </ul>
      </nav>
    </div>
  </label>
</div>

The most important bit in the HTML is the <input type="checkbox"> being immediately followed by the <div class="navbar-wrapper"> element.

We use the checkbox to remember the state: checked means that the sidebar is open, unchecked means its closed. The element itself will not be visible to the user, its hidden outside the browser window.

The <div class="navbar-wrapper"> element must come right after the checkbox, so that it can be selected with the CSS + selector as input + .navbar-wrapper.

The <label> is needed so that clicking the hamburger icon or the page cover changes the checkbox status.

.hamburger label.helper input {
  position: fixed; top: 0; right: -100px;
}

.hamburger label.helper .navbar-wrapper .icon {
  background-color: transparent;
  cursor: pointer;
  display: block; width: 56px; height: 56px;
  position: absolute; top: 0; right: 0;
  padding: 12px;
}

.hamburger label.helper .navbar-wrapper .cover {
  background: rgba(0, 0, 0, 0);
  display: none;
  transition: 0.5s ease-out;
}

.hamburger label.helper .navbar-wrapper .sidebar {
  background-color: #FFF;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
  display: block; width: 300px;
  position: fixed; top: 0; right: -320px; bottom: 0;
  transition: 0.5s ease-out;
}

.hamburger label.helper input:checked + .navbar-wrapper .cover {
  display: block;
  background: rgba(0, 0, 0, 0.25);
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  transition: 0.5s ease-out;
}

.hamburger label.helper input:checked + .navbar-wrapper .sidebar {
  right: 0; transition: 0.5s ease-out;
}

Finally, we need the "hamburger" icon. You could use some icon font for that, like Bootstrap's FontAwesome or Google's Material Design icons. But its just as easy to make the hamburger symbol using a few lines of CSS.

.hamburger label.helper .navbar-wrapper .icon:before {
  border-top: 8px solid #333;
  border-bottom: 4px solid #333;
  content: '';
  display: block; width: 32px; height: 16px;
}

.hamburger label.helper .navbar-wrapper .icon:after {
  border-top: 4px solid #333;
  border-bottom: 8px solid #333;
  content: '';
  display: block; width: 32px; height: 16px;
}