HomeОбразованиеRelated VideosMore From: Codingflag

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

3476 ratings | 402377 views
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.
Html code for embedding videos on your blog
Text Comments (306)
Abulfazl Haidary (1 day ago)
nope !!!!
Bendy Lee (6 days ago)
Hi, can you share source codes please?
SHIVA GAMING (15 days ago)
Ha can u help me I getting this error togglesidebar is defined but never used.[no-unused-vars]
Warlord Time (20 days ago)
woooh finally i code for 2 hours lol
Simon Kalu (22 days ago)
Super awesome, cool, and concise
programming for you (1 month ago)
Send our code bro [email protected]
Eun Hye! (1 month ago)
It's 2:00 am and you saved my project and my life, thank u! ;^; <3
Delta X (1 month ago)
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>
Solicle (1 month ago)
so i already have other code for the div=main area but ive placed it below all that and now the navigation just pops up down the bottom left corner
Fate/Zero Saber (1 month ago)
thanks man saved my day
Redhuan Razak (1 month ago)
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>
Adil mahmood (1 month ago)
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
Fernando Rocha Olivera (2 months ago)
Anis akbar Alle (2 months ago)
videonya yelas banget coba dosen saya mengajar kaya gini saya tidak susah deh.....
陳柏霖 (2 months ago)
thanks, it's work!! This is my practice code, help u self.  https://lihi.cc/851s9
mp pm (3 months ago)
cool tutorial bro i appreciate to learn from you
Keith Bacalso (3 months ago)
im using Visual studo code but my JS wont link to my html
Harry Twat (3 months ago)
I'm so grateful I want to suck your Mexican 🍖 meat
HIRAK JYOTI (4 months ago)
add the link of the code man
hafsa rami (4 months ago)
thank you for the tutorial. does any one know if we can implement this into a SharePoint page ?
Valentyna Hayovych (4 months ago)
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?
John Torres (4 months ago)
sir can you help me? how to appear the content of the link in the right side if i click the nav?
Codingflag (4 months ago)
Give padding left to body tag
Timox TV (4 months ago)
the javascript in sublime won't work
Syed Mishar Newaz (5 months ago)
Syed Mishar Newaz (5 months ago)
Gabriel Dias (5 months ago)
It doesn't work to me :/
Codingflag (5 months ago)
What's wrong?
ALL YOU NEED (5 months ago)
Where to get this code
mohammed nihaz (5 months ago)
in java script the classlist.toggle('active') where is no identity html or css where is it come from toggle
Dana Mamkegh (5 months ago)
big thanks
Global i Web (5 months ago)
Awesome tutorial bro !!!
Loving Kashmir (5 months ago)
Give me your whatsapp number
Codingflag (5 months ago)
Nifty Miller (5 months ago)
good video
Anuradha Thiwanka (5 months ago)
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
Codingflag (5 months ago)
Can you please comment down your code. Sorry for late reply.
kapkaal (5 months ago)
Nice bro jhakkas..luved it..simple and effective..👌👏
SA Videos (5 months ago)
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
Codingflag (5 months ago)
Sure, Thanks for advice :-)
A-R-S (6 months ago)
What do u do when ur site is responsive ?
Codingflag (6 months ago)
Add some media queries depending upon screen size.
murali krishna (6 months ago)
Thank u so much.
Stephen Lai (6 months ago)
if we want to swipe to show/hide the navigation menu, how do we do that? using touch event.....
Codingflag (6 months ago)
Yes, you can create your own swipe events in js
Yung Al-Ghazali (6 months ago)
is this responsive on mobile?
Codingflag (6 months ago)
No. You need to add media query for responsiveness
renuka kulkarni (6 months ago)
which editor is used??
Codingflag (6 months ago)
codepen (online editor)
Harun Reşit Erdil (6 months ago)
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>
Praveen Kumar (6 months ago)
Very nice explanation Short and sweet
Hatori Zenzo (6 months ago)
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).
sharath C.G (6 months ago)
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>
Nitin Singh (7 months ago)
Awesome bro please do upload this kind of stuff which web application layouts like topnav,sidenav and content page.
Asma Khalaf (7 months ago)
Thanks it works perfectly
Ali Nawaz (7 months ago)
Munna Manjhi (7 months ago)
Hi my sidebar is long, it's not showing all links. how can i show my all links.
faradila athaya (8 months ago)
didn't work:"( i think i already following all the code and the menu list still not open when i click the hamburger menu:""""
strups (8 months ago)
fuck you stupid no why u past in descritpion bitch hoe
R. Report (8 months ago)
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!
R. Report (8 months ago)
@Codingflag Thank You Sir! Many BLESSINGS On BLESSINGS 2 You!
Codingflag (8 months ago)
If you need any help, let me know. I will try to help.
R. Report (8 months ago)
@Codingflag First Off thank you for even replying, some channel owners really piss me off with that this was SUPER IMPORTANT for me to understand! i finally got it to move the Js is working, now just need to figure out the styling issue on my end. Thank you Again your Brilliant Sir Fa Real Doe!
R. Report (8 months ago)
https://jsbin.com/nawakugobo/1/edit?html,css,js,output this is the updated link that you told me to fix im not sure what else you mean with the html?
piano0011 Lee (8 months ago)
How would I go about in creating another submenu on another page?
piano0011 Lee (8 months ago)
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...
piano0011 Lee (8 months ago)
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...
Free speech is dead (8 months ago)
that akcent kills all video cant listen
Ricardo Pereira (8 months ago)
Thanks ;) Simple and working .. with a little tweaks it turns out really good !!
Deither Lenesin (8 months ago)
Not Working
Codingflag (8 months ago)
Can you comment down your code so that I can help you.
Jamal A (8 months ago)
Works great and Thanks for the tutorial :)
saima younas (8 months ago)
its not working
saima younas (8 months ago)
@Codingflag same as it is code
Codingflag (8 months ago)
Comment your code, I will try to solve it.
unknown (8 months ago)
but when we have a content the sidebar dont clear th content to other side why??
Codingflag (8 months ago)
Use padding-left property on body element instead of left property.
Erick Lestrange (9 months ago)
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)
Satya Kushwaha (9 months ago)
How can we align a sidebar to the right side of the page
Ric Shu (9 months ago)
Its not working.... You should just give the source code instead.. Wtf i didn't have a wrong codes
Jatin sharma (9 months ago)
Worked for me..thanks a ton bro!!
Mohamed Hasib (9 months ago)
What software u use in the video?
Sameer Jh (10 months ago)
Vishal Pangudwale (10 months ago)
Sir Plz Make You Video In Hindi language plzz
OLOAN SIHOMBING (10 months ago)
what the name used editor...???
Prince Raj (10 months ago)
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...
Gijs Maters (10 months ago)
You have such a big accent bro
Scarlett Kris (10 months ago)
What application in video that you using to write code in widows?
Shwibi Tech (10 months ago)
INDIAN! love it.
zimotech (11 months ago)
So and what about using this menu, there are lots and lots of tutorials like this and they all stop there.
LiamelMessi (11 months ago)
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.
Сергей Чащин (11 months ago)
Can't you please upload the code somewhere and provide the link here? It'd be really helpful to follow your actions with the code itself. Anyway, thanks for your lesson.
Mathew Hammett (11 months ago)
nicely done without using a huge amount of code!
Ankit Kumar Vashist (11 months ago)
it was good bro, liked and subscribe for more such videos.
Abhishek Barve (11 months ago)
I am getting an error on JavaScript file Uncaught ReferenceError: element is not defined Running the file on chrome Please help!
Abhishek Barve (11 months ago)
Codingflag Thanks Problem Solved😊😊
Codingflag (11 months ago)
You've not selected element properly. Check id name of your html element with document.getElementById() Still you get any error, please comment down your code.
qwerrry acer (11 months ago)
js was not working, on click method.
Codingflag (11 months ago)
Can you comment down your code here, so that I can help.
m mmm (11 months ago)
i made this more animated and more responsive you can see it and download the code from https://www.youtube.com/watch?v=XiVbm76o854
Codingflag (11 months ago)
Well, keep it up. :-)
Roveir Datu (1 year ago)
i was working on this one on sublime text 3, but it doesnt work; only works at code pen the only thing that shows are the hamburger pic. not even the mark up shows. nothing happens when i click the hamburger icon either can you take a look? HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X=UA-Compatible" content="ie=edge"> <title>Responsive Side Menu</title> <link rel="stylesheet" href="css/style.css"> </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>Service</li> <li>Contact</li> </ul> </div> </script> </body> </html> 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; } #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: 3px 0px; } JS: function toggleSidebar(){ document.getElementById('sidebar').classList.toggle('active'); }
Codingflag (11 months ago)
You have not linked JavaScript file properly. Use script tag with src attribute to link it otherwise put JavaScript code in HTML file itself within script tag.
Al Sakib (1 year ago)
It's not working.Need help.... html <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> css * { margin:0px; padding:0px: font-family:sans-serif; } #sidebar{ position:fixed; width:400px; height:100%; background:#151719; left:-200px; } #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: 3px 0px; }
Codingflag (11 months ago)
HTML code seems perfect. I think you just miss to write JavaScript code.
Roveir Datu (1 year ago)
function toggleSidebar(){ document.getElementById('sidebar').classList.toggle('active'); }
Al Sakib (1 year ago)
I did't comment here... Will you check html and css code???
Codingflag (1 year ago)
Where is javascript code?
CEO PratekPharmacy (1 year ago)
Please give us full version of video its very difficult for begainers.
Aritra Sarkar (1 year ago)
very nice
Ethical Hacker (1 year ago)
can we do this without fix position?
Maaz Mehmood (1 year ago)
intro music ?
Ethical Hacker (1 year ago)
technical ayush (1 year ago)
Please give us a link
SHARAT KUMAR (1 year ago)
Dear Sir This is really very good video for me I need your help can you send me your html code at [email protected]
Richard Carroz (1 year ago)
deodatus fink (1 year ago)
Without working source it is useless... anyhow thanks for trying..
Jayakishore Tatikonda (1 year ago)
Awesome video crystal clear with explanation
wired peripheral (1 year ago)
nice video but the burger is not clickable, theres no clickable element so it cannot toggle to active.
aminos temo (1 year ago)
thank you
Mikkel Sørensen (1 year ago)
Won't work for me :(
T89 lan (1 year ago)
can we use this site offline??
Mustafa Ali (1 year ago)
class active in css you use it but you dont use it in html mark up , whats that mean because i have error
Rajemamata Limbu (1 year ago)
only worked for me with #sidebar:active
Rajemamata Limbu (1 year ago)
Codingflag (1 year ago)
This will work because of:active selector. Don't use :active instead of this toggle active class on element.
Naina Garg (1 year ago)
It is giving html inspector warning, saying "an onclick attribute was found in the html and use external script for event binding instead." pls give a solution to rectify it.
Codingflag (1 year ago)
Can you please comment down your code, so I can help you?
Danielius Maizelis (1 year ago)
JS Doesnt work for me, It shows me some errors ,Im using a program called brackets, maybe theres something different about writing code on js.
Codingflag (1 year ago)
No. You can write js code on any text editor. Maybe there is problem with your js code. Can you comment your entire code, so that I can help you to figure out where is mistake. Thanks :)
Redone zahid (1 year ago)
not working
Redone zahid (1 year ago)
Thanks a lot for your help
Codingflag (1 year ago)
replace "classlist" with "classList"
Redone zahid (1 year ago)
Please Check code and fixed it.
Redone zahid (1 year ago)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Sidebar</title> <style> *{ margin:0px; padding:0px; } #sidebar{ position: fixed; background:#152389; width:200px; height:100%; left:-200px; } #sidebar.active{ left:0px; } #sidebar ul li{ padding:10px 5px; font-size:18px; color:#fff; margin-top:20px; } #sidebar .toggle-btn { position: absolute; left: 230px; top: 20px; } #sidebar .toggle-btn span { width: 30px; background: #999; padding: 3px 0px; display: block; margin-bottom: 2px; cursor:pointer; } </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> </div> <script> function toggleSidebar(){ document.getElementById("sidebar").classlist.toggle('active'); } </script> </body> </html>
Redone zahid (1 year ago)
js code not working bro

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.