The collapsible sidebar concept is a nice collapsible sidebar menu concept that shows sidebar navigation while pressing the main content section and zooming in on the switch.

This is just a simple concept of a collapsible sidebar menu developed with vanilla JS, HTML5, and CSS3 for study purposes.

How to make use of it:

1. Create a 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>

2. Add a 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>

3. Add the main javascript and stylesheet to the web page.

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

collapsible sidebar menu, collapsible sidebar with icons Plugin/Github

See Demo And Download

Official Website(ss-javascript): Click Here

This superior jQuery/javascript plugin is developed by ss-javascript. For extra advanced usage, please go to the official website.