Toggle Sidebar Code Using JavaScript in Web Development



    In any modern responsive website you have surely seen an toggle sidebar which will open and close with an animation whenever the hamburger icon or menu icon is clicked. It looks nice with nice transition and is necessary to make your website responsive for mobiles. 

    Today, I will let you make your own toggle sidebar which you can implement in any website and give your website a modern enhancement. We will have to do three things, 

1. Making the HTML of the menu button and sidebar

2. Adding CSS to the elements

3. Using JavaScript, enabling the toggle functionality.

HTML: 

    One thing to be noted that the HTML code of the Menu and Sidebar can be given anywhere inside the body tag because we will finally give these elements fixed positions. Better put it just after the body. 


<div id="mobile-navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="toggle">
        <span></span>
        <span></span>
    </div>

Now, we can see that Div with id mobile-navigation contains the links and this div will be animated as a side bar. And the div with id toggle is the hamburger menu, which contains two span tags which will make the hamburger effect. Okay, now let's add the CSS.

CSS:

    The CSS is not too much difficult to understand.  Only one thing to see that, the mobile-navigation is normally {display: none}. It will not show in desktop, there you will just give desktop header navigation. But when screen becomes less than 760px, the mobile-navigation will show up and desktop navigation will become {display: none}. Also using active class we will conquer our goal to animate the sidebar. when it is not active it has {left: -100%}, that means sidebar is collapsed and when active class added( using JS) the left position will be 0. The toggle id will also have active or non-active situation using which we will make the hamburger menu and cross-icon effect. check the CSS code, remember don't forget to hide your desktop nav in screen less than 760px.


#mobile-navigation, #toggle {
    position: fixed;
}

#mobile-navigation {
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #00bbdd;
    display: none;
    align-items: center;
    justify-content: center;
    transition: 0.5s cubic-bezier(1, 0.3, 0.03, 0.001);
    z-index: 100;
}

#mobile-navigation.active {
    left: 0;
}

#mobile-navigation ul li {
    margin: 25px 0;
    list-style: none;
}

#mobile-navigation ul li a {
    font-size: 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

#toggle {
    right: 15px;
    top: 15px;
    width: 40px;
    height: 38px;
    padding: 10px 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 5px;
    z-index: 999;
}

#toggle span {
    height: 3px;
    width: 80%;
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
    transition: 0.3s;
}

#toggle.active span:first-child {
    transform: translateY(7.5px) rotate(45deg);
}

#toggle.active span:last-child {
    transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 760px){
    .navigation {
    	/*This is the desktop navigation which should be hidden in mobile view*/
        display: none;
    }

    #mobile-navigation, #toggle {
        display: flex;
    }
}


JavaScript:

Now check out the JS code, see how interestingly, the active class is toggled in the elements. The two elements are selected from DOM using their ids. Whenever the toggle is clicked a function will run and this actually toggles the "active'" class in those two elements. Check it..


const toggle = document.getElementById('toggle'),
    mobileNav = document.getElementById('mobile-navigation');

toggle.onclick = function(){
    toggle.classList.toggle('active');
    mobileNav.classList.toggle('active');
}    

Thank You, for reading this post. Hope I am able to explain the concept completely. If you have any doubt or suggestion or opinion about the content, feel free to comment below. 

You can check out this post: How to get URL parameters using JavaScript ?

Okay, have a good day. Bye....

Imon Raj

Software, Web & Android Developer

My Skills:

Comments

Popular posts from this blog

Which one is better ? GeeksForGeeks or Leetcode ? How many questions to solve ?

Random jokes generator using API (Free)