Collapsible Sidebar Menu With Pure JavaScript

Category: Javascript , Menu & Navigation | February 21, 2018
Views Total:2,868 views
Official Page:Go to website
Last Update:February 21, 2018


Collapsible Sidebar Menu With Pure JavaScript


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">
    <li><a href="#">Menu #1</a></li>
    <li><a href="#">Menu #2</a></li>
    <li><a href="#">Menu #3</a></li>

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>
  <section class="sth-content">
    Main Content Here

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