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

Code: bit.ly/3l4Mzga

YOU DESERVE OSCAR MAN THIS IS MASTERPIECE THANKS!!!!!

Awesome. Small tip: no need to design hamburger menu with css. There's already html entity of that. It is '&#9776'. Just put on html directly

Cheers man you are awesome, been looking for a responsive sidebar nav for a while and stumbled across this. Top stuff.

A great straightforward tutorial, thanks a lot man!

Thanks ;) Simple and working .. with a little tweaks it turns out really good !!

Thank you so much, Dude. You've helped me a lot.

Perfect! Congratulations!

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

Nice bro jhakkas..luved it..simple and effective..👌👏

nicely done without using a huge amount of code!

Awesome video crystal clear with explanation

very simple menu and understandably. Thanks

Works great and Thanks for the tutorial :)

Nice clean and simple. Great job man

Thanks for awesome video. Also thanks for not providing source code. This helped learning how it works

amazing tutorial....delivering nice content without a huge amount of code!!Pretty effective, beautiful and precisely done in just 10 minutes!....Just keep it up!!Got a subscriber!!...Hugs from Brazil!!

You are awesome man

Very nice explanation Short and sweet

thanks dude this was really useful!

Worked for me..thanks a ton bro!!

Você se garante Codingflag. Obrigado por nos ensinar!

liked and subscribed dude you're awesome!

Thank you! Very useful

Awesome tutorial bro !!!

Very nice video.A clear cut explanation..well done sir.

amazing, thank you so much!

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

What a great video ...explained all of his code ...... And only in 10 minutes ..... U deserve a million subs ....keep it up

Super awesome, cool, and concise

great tutorial , make one for animated "Animated Navbar" !

wunderbar, bestens erklärt! Danke sehr!

VERYYYYYY GOOOD THANKS MANNNNNNNNN

You're awesome bro. You should create some more.

simple and efficient :D

Good tutorial keep it up

INDIAN! love it.

Indians are the greatest teachers believe it or not

Nice tutorial dude. Well explained.

cool tutorial bro i appreciate to learn from you

Thank u so much.

thanks, man !

cool. i found several things that i dindt have on my jon duckett books. first adding the onclick at the html and not on the js, second the very useful classlist (didnt know it even existed), third the icon made of span display blocks was very clever, and last the transition (ive known of its existance since its very important but its not included in most my books)

thanks for the tutorial

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

I love this tutorial.

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

good tutorial

Show de bola amigo, me ajudou muito, muito obrigado

Nice Explanation

You deserve Oscar for this video.. thank you soo soo much.

I liked it!

This is good, but how can I get my main content to start to the right of the toggle menu button, right and maybe below it as well? Thanks.

Hey @codingflag how do you make the menu go away if you click outside the div?

What application in video that you using to write code in widows?

Awesome man, you are very intelligent

Excelent!

Good

big thanks

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?

Great tutorial.

Home #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; } function toggleSidebar(){ document.getElementById("sidebar").classList.toggle('active'); }

Old video but still useful :D Thank you!

good video

woooh finally i code for 2 hours lol

you're a life saver

thanks bhai you really done a great job by explaining in a simple way ... good going brother keep it up nd thanks for the help in return i will just subscribe your channel...

Awesome

mine always get overflow out of the screen don't know how to fix it. .sidebar, body { overflow-x: hidden; }

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

Thanks..

what Application were you coding in? I liked the windows and the view..Its very smart workflow.

Hey guys! Can someone explain to me what is position fixed? I roughly know a bit a bout it but not much... Can you still use the attributes left, right, top and bottom? Does it stay in one place because I do realise that when I use position relative, it does move things around sometimes...

Thank you friend

class active in css you use it but you dont use it in html mark up , whats that mean because i have error

This is a great tutorial! I am new to php and web development.. is it possible to leave questions here and get a reply promptly? I have found it hard to get some good decent help...

Thanks it works perfectly

Wow! so simple, thx!

Nice

i have problem with the spans i can see them ... any help ?

thank you

nice

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

very nice

i think i need some help, nothing happend when i click on the icon even if i put the script inside the body

How would I go about in creating another submenu on another page?

Thanks

the javascript in sublime won't work

it was good bro, liked and subscribe for more such videos.

What happens if the content exceeds the screen height. Is this side-bar scrollable?

thank q so much

awesome work done thanks .

what application do you used when you are coding ?

Thank you

Good one

Thank you so much

i'm not getting the transition while i click om the nav button

Thanks you help me

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

Please give us full version of video its very difficult for begainers.