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




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.

Original source


50 responses to “How to Create a Animated Sidebar Menu using HTML, CSS & JavaScript.”

  1. Here you guys go, here is the correct code:

    <style>

    *{

    margin: 0px;

    padding: 0;

    font-family: sans-serif;

    }

    #sidebar {

    position: fixed;

    width: 25%;

    height: 100%;

    background: #151719;

    left: -25%;

    transition: all 500ms linear;

    }

    #sidebar.active {

    left: 0px;

    }

    #sidebar ul li {

    color: White;

    list-style:none;

    padding: 15px 10px;

    border-bottom: 1px solid rgba(100,100,100,0.3);

    }

    #sidebar .toggle-btn {

    position: absolute;

    Left: 400px;

    top: 20px;

    }

    #sidebar .toggle-btn span {

    display: block;

    width: 30px;

    height: 5px;

    background: #151719;

    margin: 5px 0px;

    }

    </style>

    <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>

    <script>

    function toggleSidebar(){

    document.getElementById("sidebar").classList.toggle('active');

    }

    </script>

  2. working code here :

    <!DOCTYPE html>

    <html>

    <head>

    <title>Hide/show menu</title>

    <style type="text/css">

    *{

    margin: 0;

    padding: 0;

    font-family: sans-serif;

    }

    #sidebar{

    position: fixed;

    width: 200px;

    height: 100%;

    background: #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;

    }

    </style>

    <script type="text/javascript">

    function toggleSidebar(){

    document.getElementById("sidebar").classList.toggle('active');

    }

    </script>

    </head>

    <body>

    <div id="sidebar">

    <div class="toggle-btn" onclick="toggleSidebar()"><a>

    <span></span>

    <span></span>

    <span></span>

    </a>

    </div>

    <ul>

    <li>Explore</li>

    <li>Sell</li>

    <li>Buy</li>

    </ul>

    </div>

    </body>

    </html>

  3. I have wanted to make the same menu, but on the right side, so instead of "left", I added "right". But somehow, on my web page there only list of the menu is visible, nothing more (I mean that css and js function does not work) :/ could someone advise what to do?

  4. Look this code i think is good :

    <!DOCTYPE html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

    body {

    font-family: "Lato", sans-serif;

    }

    .sidenav {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: #111;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

    }

    .sidenav a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s;

    }

    .sidenav a:hover {

    color: #f1f1f1;

    }

    .sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

    }

    @media screen and (max-height: 450px) {

    .sidenav {padding-top: 15px;}

    .sidenav a {font-size: 18px;}

    }

    </style>

    </head>

    <body>

    <div id="mySidenav" class="sidenav">

    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

    </div>

    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

    <script>

    function openNav() {

    document.getElementById("mySidenav").style.width = "250px";

    }

    function closeNav() {

    document.getElementById("mySidenav").style.width = "0";

    }

    </script>

    </body>

    </html>

  5. Thanks, man. This past 3 years I always do my assignment in Java and designing GUI was never been an issue. Then I tried CSS and I hate it on the first sight. Turns out I just need more time to 'get' how it works because its very different from FXML (JavaFX way of defining UI, based on XML).

  6. bro can u help me this js part is not working
    here is the code
    <!DOCTYPE html>

    <html>

    <head>

    <style>

    *{

    margin: 0;

    padding: 0;

    }

    #sidebar{

    background-color: rgba(0,0,0,.5);

    width:200px;

    height:100%;

    position: fixed;

    left:-200px;

    }

    #sidebar ul li{

    color:rgba(230,230,230,0.9);

    list-style-type: none;

    padding: 15px 30px;

    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:red;

    margin: 5px 0px;

    }

    #slidebar.active{

    left:0px;

    }

    </style>

    </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>

    <script>

    function toggleSidebar(){

    document.getElementById("sidebar").classList.toggle('active');

    }

    </script>

    </body>

    </html>

Leave a Reply