Collapsible Sidebar Menu With Pure JavaScript

Category: Javascript , Menu & Navigation | February 21, 2018
Author: StanleySathler
Views Total: 2,331
Official Page: Go to website
Last Update: February 21, 2018
License: MIT

Preview:

Collapsible Sidebar Menu With Pure JavaScript

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>

You Might Be Interested In:


Leave a Reply