How To Create Sidebar Menu?

In this tutorial post we are going to create simple sidebar menu.

You will only need beginner level Html, CSS and Javascript.

In this post we are going to learn to write function that toggles more than one class.

HTML

<div class="sidebar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="toggleBtn">
    <span></span>
    <span></span>
    <span></span>
  </button>    
</div>

Now let’s start styling our sidebar menu.

CSS

body{
    margin: 0;
    padding: 0;
}
.sidebar{
    background: #000;
    width: 250px;
    height: 100%;
}
ul{
    margin: 0;
    padding: 2px 0;
}
ul li{
    list-style: none;
}
ul li a{
    padding: 10px 20px;
    color: #fff;
    display: block;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
.toggleBtn{
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: #f5f5f5;
}
.toggleBtn span{
    display: block;
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
}

You can see that background does not have full height so let’s get it to full height .

And also position toggle button next to sidebar.

Add following codes to .sidebar and .toggleBtn

.sidebar{
    position: fixed;
    background: #000;
    width: 250px;
    height: 100%;
}
    
.toggleBtn{
    position:absolute;
    top: 0;
    right: -50px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: #f5f5f5;
    border: none;
}

Now what we want is:  our sidebar to collapse to the left initially and reappear when we click toggle button (.toggleBtn).

Add following code to .sidebar to hide it.

.sidebar{
    position: fixed;
    top:0;
    left: -250px;
    background: #000;
    width: 250px;
    height: 100%;
    transition: .5s;
}

You can see the initial value of left: -250px;.

Our sidebar menu is collapsed to the left and invisible. If we set left: 0; it will reappear to its previous position but we only want to set left: 0; when we click toggle button (.toggleBtn).

We will get this functionality in JS file. But first let’s add the following class in CSS file.

.active{
    left: 0;
}

This is just for stylish purpose. We want our humburger icon lines to cross each other when we toggle.

So add the following lines of codes in CSS file.

 .toggle span:nth-child(1){
    transform: rotate(45deg) translate(5px, 1px); 
}

.toggle span:nth-child(2){
     display: none;
}
 
.toggle span:nth-child(3){
    transform: rotate(-45deg) translate(5px, -3px);
}

Toggle Functionality

Now let’s get the toggle functionality of sidbar menu.

We want sidebar to appear and disappear when we click toggle button (.toggleBtn)

let toggleButton = document.querySelector('.toggleBtn');
let sideBar = document.querySelector('.sidebar')

function multiToggle(element, class0, class1) {
    element.classList.toggle(class0);
    element.classList.toggle(class1);
}

toggleButton.addEventListener('click', function(){
    multiToggle( sideBar, "active", "toggle")
})

Complete Code

HTML

<div class="sidebar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="toggleBtn">
    <span></span>
    <span></span>
    <span></span>
  </button>
</div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    background: #000;
    width: 250px;
    height: 100%;
    transition: .5s;
}

ul {
    margin: 0;
    padding: 2px 0;
}

ul li {
    list-style: none;
}

ul li a {
    padding: 10px 20px;
    color: #fff;
    display: block;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.active {
    left: 0;
}
.toggleBtn {
    position: absolute;
    top: 0;
    right: -50px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: #f5f5f5;
    border: none;
}

.toggleBtn span {
    display: block;
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
}

.toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 1px);
}

.toggle span:nth-child(2) {
    display: none;
}

.toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -3px);
}

JS

let toggleButton = document.querySelector('.toggleBtn');
let sideBar = document.querySelector('.sidebar')

function multiToggle(element, class0, class1) {
    element.classList.toggle(class0);
    element.classList.toggle(class1);
}

toggleButton.addEventListener('click', function(){
    multiToggle( sideBar, "active", "toggle")
})