How to Create a Animated Sidebar Menu using HTML, CSS & JavaScript.

50
118

Learn how to create a animated sidebar menu with HTML, CSS and JavaScript. In this video we’ll walk you through step-by-step on how to add sidebar in websites/webpages.

source

50 COMMENTS

  1. uncaught reference error: toggleSidebar is not defined? is this because im working in thimble? says reference error is not defined at htmldivelement.onclick (https/thimblelivepreview…)

  2. Hi that's great tutorials , but i want to know how do you make this hamburger Menu for Desktop, Eg the hamburger menu must be at the top right corner of the header and the logo at the top left of the header, that will be responsive and appear the same on the mobile phone. and when i click on the menu must show the navigation menu. last the drop down menu mustn't be full screen must appear only under that icon menu

  3. Thank you! May I ask you a question, please? By using your solution, in my case, the menù appears over the rest of the page, by covering the part of the page. I would like it move away the rest of the page during it appers. Does it possible? (considering that the rest of the page is another <div>…

  4. this video is not at all effective. I dont wanna say this but your text editing software can distinguish between an HTML file and a script file but mine is not so intelligent like yours. I have to provide all the HTML, head, link, href, script tags and other related attributes. you should have made that part clear. this tutorial failed to satisfy me and im really sorry for that

  5. <div id="sidebar">
    <div class="toggle-btn" onclick="toggleSidebar()">
    <span></span>
    <span></span>
    <span></span>
    </div>

    <ul>
    <li>Home </li>
    <li></li>
    </ul>
    </div>
    <style>
    #sidebar{
    position:fixed;
    width:200px;
    height:100%;
    background-color:#151719;
    left:-200px;
    transition:all 500ms linear;
    }
    #sidebar.active{
    left:0px;
    }
    #sidebar ul li{
    color:rgba(230,230,230,0.9);
    list-style:none;
    padding:15px 10px;
    border-bottom:1px solid rgba(100,100,100,0.3);
    }
    #sidebar .toggle-btn{
    position:absolute;
    left:230px;
    top:20px;
    }
    #sidebar .toggle-btn span{
    display:block;
    width:30px;
    height:5px;
    background: #151719;
    margin:5px 0px;
    }
    <script>
    function toggleSidebar(){
    document.getElementById("sidebar").classList.toggle('active');
    }
    </script>

  6. I have created a website that is a parallax website which has a landing page with information below when scrolled. The images have an opacity so it fades slightly. The hamburger menu from here was visible till i added the JS. After that i could not see it etc. Any help as to how i can make it appear above the image or something as i dont know whats happened.
    Thanks in advanced

  7. Here's my code

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <!–<link rel="stylesheet" href="style.css">–>
    <title>SideBar test</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    #sidebar{
    position: fixed;
    width: 200px;
    height: 100%;
    background: #0000ff;
    left: -200px;
    transition: all 500ms linear;
    }
    #sidebar ul li{
    color: rgba(0,20,20,0.8);
    list-style: none;
    padding: 15px 10px;
    border-bottom: 1px solid #152312;
    }
    #sidebar .toggle-btn{
    position: absolute;
    left: 230px;
    top: 20px;
    }
    #sidebar .toggle-btn span{
    display: block;
    width: 30px;
    height: 5px;
    background: #151719;
    margin: 5px 0;
    }
    #sidebar .active{
    left: 100px;
    }
    </style>
    <script>
    function toggleSidebar() {
    document.getElementById("sidebar").classList.toggle('active');
    }
    </script>
    </head>
    <body>
    <div id="sidebar">
    <div class="toggle-btn" onclick="toggleSidebar()">
    <span></span>
    <span></span>
    <span></span>
    </div>
    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    </ul>
    </div>
    </body>
    </html>

LEAVE A REPLY