Collapsible Sidebar Menu With Pure JavaScript

Preview:

Description:

A fancy Collapsible Sidebar Menu concept that shows a sidebar navigation while pushing and zooming the main content section when toggled. Built using pure JavaScript and CSS.

How to use it:

Create the sidebar menu.

<nav class="sth-menu" id="menu-panel">
  <div class="picture">
    <img src="your-logo.png">
  </div>
  <ul>
    <li><a href="#">Menu #1</a></li>
    <li><a href="#">Menu #2</a></li>
    <li><a href="#">Menu #3</a></li>
  </ul>
</nav>

Add the menu toggle button to your main content.

<main class="sth-container" id="page-content">
  <section class="sth-appbar">
    <div class="menu" id="menu-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </section>
  <section class="sth-content">
    Main Content Here
  </section>
</main>

Add the main JavaScript and Stylesheet to the webpage. Done.

<link rel="stylesheet" href="dist/css/app.css">
<script src="dist/js/app.js"></script>