• Friday , 5 June 2020

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

Code Canyon



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

3d Ocean

Related Posts

50 Comments

  1. Abulfazl Haidary
    July 25, 2019 at 14:42

    nope !!!!

  2. Bendy Lee
    July 25, 2019 at 14:42

    Hi, can you share source codes please?

  3. SHIVA GAMING
    July 25, 2019 at 14:42

    Ha can u help me I getting this error
    togglesidebar is defined but never used.[no-unused-vars]

  4. Warlord Time
    July 25, 2019 at 14:42

    woooh finally i code for 2 hours lol

  5. Simon Kalu
    July 25, 2019 at 14:42

    Super awesome, cool, and concise

  6. programming for you
    July 25, 2019 at 14:42

    Send our code bro sirigireddyr44@gmail.com

  7. Eun Hye!
    July 25, 2019 at 14:42

    It's 2:00 am and you saved my project and my life, thank u! ;^; <3

  8. Delta X
    July 25, 2019 at 14:42

    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>

  9. Redhuan Razak
    July 25, 2019 at 14:42

    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>

  10. Adil mahmood
    July 25, 2019 at 14:42

    Bro loved your work can you just make a short video on Youtube side bar mechanics im new to java and want to learn that youtube side bar

  11. Fernando Rocha Olivera
    July 25, 2019 at 14:42

    CHUCHA VENDES HUMO RECONCHAUMTARE

  12. Anis akbar Alle
    July 25, 2019 at 14:42

    videonya yelas banget coba dosen saya mengajar kaya gini saya tidak susah deh…..

  13. ι™³ζŸιœ–
    July 25, 2019 at 14:42

    thanks, it's work!! This is my practice code, help u self.Β 
    https://lihi.cc/851s9

  14. mp pm
    July 25, 2019 at 14:42

    cool tutorial bro i appreciate to learn from you

  15. Keith Bacalso
    July 25, 2019 at 14:42

    im using Visual studo code but my JS wont link to my html

  16. Harry Twat
    July 25, 2019 at 14:42

    I'm so grateful I want to suck your Mexican πŸ– meat

  17. HIRAK JYOTI
    July 25, 2019 at 14:42

    add the link of the code man

  18. hafsa rami
    July 25, 2019 at 14:42

    thank you for the tutorial. does any one know if we can implement this into a SharePoint page ?

  19. Valentyna Hayovych
    July 25, 2019 at 14:42

    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?

  20. John Torres
    July 25, 2019 at 14:42

    sir can you help me? how to appear the content of the link in the right side if i click the nav?

  21. Timox TV
    July 25, 2019 at 14:42

    the javascript in sublime won't work

  22. Syed Mishar Newaz
    July 25, 2019 at 14:42

    nice

  23. Syed Mishar Newaz
    July 25, 2019 at 14:42

    nice

  24. Gabriel Dias
    July 25, 2019 at 14:42

    It doesn't work to me :/

  25. ALL YOU NEED
    July 25, 2019 at 14:42

    Where to get this code

  26. mohammed nihaz
    July 25, 2019 at 14:42

    in java script the classlist.toggle('active') where is no identity html or css where is it come from toggle

  27. Dana Mamkegh
    July 25, 2019 at 14:42

    big thanks

  28. Global i Web
    July 25, 2019 at 14:42

    Awesome tutorial bro !!!

  29. Loving Kashmir
    July 25, 2019 at 14:42

    Give me your whatsapp number

  30. Nifty Miller
    July 25, 2019 at 14:42

    good video

  31. Anuradha Thiwanka
    July 25, 2019 at 14:42

    Hey, can you help me please? I have a problem with hamburger button.once I clicked it, it jist vanished and didnt see the menu bar also. I have code the exact code what you code here

  32. kapkaal
    July 25, 2019 at 14:42

    Nice bro jhakkas..luved it..simple and effective..πŸ‘ŒπŸ‘

  33. SA Videos
    July 25, 2019 at 14:42

    for your kind information i'm the web devloper so you need to show full html code for new students cause new students can be confused

  34. A-R-S
    July 25, 2019 at 14:42

    What do u do when ur site is responsive ?

  35. murali krishna
    July 25, 2019 at 14:42

    Thank u so much.

  36. Stephen Lai
    July 25, 2019 at 14:42

    if we want to swipe to show/hide the navigation menu, how do we do that? using touch event…..

  37. Yung Al-Ghazali
    July 25, 2019 at 14:42

    is this responsive on mobile?

  38. renuka kulkarni
    July 25, 2019 at 14:42

    which editor is used??

  39. Harun Reşit Erdil
    July 25, 2019 at 14:42

    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>

  40. Praveen Kumar
    July 25, 2019 at 14:42

    Very nice explanation
    Short and sweet

  41. Hatori Zenzo
    July 25, 2019 at 14:42

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

  42. sharath C.G
    July 25, 2019 at 14:42

    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>

  43. Nitin Singh
    July 25, 2019 at 14:42

    Awesome bro please do upload this kind of stuff which web application layouts like topnav,sidenav and content page.

  44. Asma Khalaf
    July 25, 2019 at 14:42

    Thanks it works perfectly

  45. Ali Nawaz
    July 25, 2019 at 14:42

    VERYYYYYY GOOOD THANKS MANNNNNNNNN

  46. Munna Manjhi
    July 25, 2019 at 14:42

    Hi my sidebar is long, it's not showing all links. how can i show my all links.

  47. faradila athaya
    July 25, 2019 at 14:42

    didn't work:"(
    i think i already following all the code and the menu list still not open when i click the hamburger menu:""""

  48. strups
    July 25, 2019 at 14:42

    fuck you stupid no why u past in descritpion bitch hoe

  49. R. Report
    July 25, 2019 at 14:42

    https://jsbin.com/pijoleziwo/1/edit?html,css,js,output Thank You for this video its not working for me, but i see for lots it did work! So i guess its something im doing wrong, can you please check my code the link is on js Bin, or i can copy and paste here THANK YOU AGAIN!

  50. We are living in the end times!
    July 25, 2019 at 14:42

    Thanks

Leave A Comment

You must be logged in to post a comment.