How to Create a Animated Sidebar Menu using HTML, CSS & JavaScript.
HTML-код
- Опубликовано: 21 июн 2017
- 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.
Code: bit.ly/3oC1MXB
Code: bit.ly/3l4Mzga
Hi, instead of using onclick() within the HTML, I assigned 'id=toggleID' to the div of the burger menu , and then i Did this in the JavaScript file but it didnt work like the onclick() method.
let toggleMyMenu = document.getElementById("toggleID");
toggleMyMenu.addEventListener("click", () => {
document.getElementById("sidebar").classList.toggle("active");
});
Would appreciate your reply and reasons as to why it didnt work thanks!
@@Jamesomnipotent Can you please share whole HTML and JavaScript code so that I can help
YOU DESERVE OSCAR MAN THIS IS MASTERPIECE THANKS!!!!!
A great straightforward tutorial, thanks a lot man!
Nice bro jhakkas..luved it..simple and effective..👌👏
Thank you so much, Dude.
You've helped me a lot.
Thanks ;) Simple and working .. with a little tweaks it turns out really good !!
Awesome. Small tip: no need to design hamburger menu with css. There's already html entity of that. It is '☰'.
Just put on html directly
Wait is there actually!
yes it is. you can change its style as any html element as well, just google it: hamburger html entity!
No Android, renders weird on Windows Chrome, Internet Explorer, etc. ?
But how do you style it in css? I want to make it a menu. Do you just create a div class/id?
Just stick with the css, I looked up what they're talking about and its a bit outdated or not well supported, a bit more head ache than its worth for a menu.
Perfect! Congratulations!
Cheers man you are awesome, been looking for a responsive sidebar nav for a while and stumbled across this. Top stuff.
Very nice explanation
Short and sweet
You are awesome man
Awesome video crystal clear with explanation
Works great and Thanks for the tutorial :)
Nice clean and simple. Great job man
nicely done without using a huge amount of code!
it can also be done with pure css too. Was hyped when i learnt of it
liked and subscribed dude you're awesome!
very simple menu and understandably. Thanks
Thanks for awesome video. Also thanks for not providing source code. This helped learning how it works
It's 2:00 am and you saved my project and my life, thank u! ;^;
Worked for me..thanks a ton bro!!
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!!
thank you for the tutorial. does any one know if we can implement this into a SharePoint page ?
thanks dude this was really useful!
cool tutorial bro i appreciate to learn from you
Good tutorial keep it up
Awesome tutorial bro !!!
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
Glad it helped
Very nice video.A clear cut explanation..well done sir.
Super awesome, cool, and concise
great tutorial , make one for animated "Animated Navbar" !
Você se garante Codingflag. Obrigado por nos ensinar!
You're awesome bro. You should create some more.
amazing, thank you so much!
wunderbar, bestens erklärt! Danke sehr!
Nice tutorial dude. Well explained.
What application in video that you using to write code in widows?
thanks for the tutorial
Thank you! Very useful
Bro loved your work can you just make a short video on RUclips side bar mechanics im new to java and want to learn that youtube side bar
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.
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)
Nice Explanation
good tutorial
what Application were you coding in? I liked the windows and the view..Its very smart workflow.
Hey @codingflag how do you make the menu go away if you click outside the div?
thanks, man !
Awesome man, you are very intelligent
simple and efficient :D
VERYYYYYY GOOOD THANKS MANNNNNNNNN
what application do you used when you are coding ?
Thank u so much.
Great tutorial.
Excelent!
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 ...
Simply give padding-left to body.
??? nothing change
You deserve Oscar for this video.. thank you soo soo much.
Glad it helped
awesome work done thanks .
Show de bola amigo, me ajudou muito, muito obrigado
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...
I love this tutorial.
clear explanation good video
Thank you :-)
Old video but still useful :D
Thank you!
Glad it helped!
What software u use in the video?
Wow! so simple, thx!
Glad it helped!
INDIAN! love it.
Ha can u help me I getting this error
togglesidebar is defined but never used.[no-unused-vars]
same here!
I liked it!
you're a life saver
Thank you
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...
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...
big thanks
Good
Thanks it works perfectly
can we do this without fix position?
good video
Thanks for the reply . Can I ask you this what's the difference between and
Firs it Header tag and another is id used for css stuff
How would I go about in creating another submenu on another page?
WELL DONE
Hi. After clicking the links of the leftmenu, the left-menu should close so the user get full visibility of the webpage. This is especially important if the web designer has used internal anchor tags (a href “#), since the link will jump downward of page. Any thoughts of how to implement that in your specific code?
See code & demo here - goo.gl/CxRzrM
Insert below javascript code & replace #sidebar with your sidebar id.
(function(){
var sidebarAnchors = document.querySelector("#sidebar").getElementsByTagName('a');
for(var i=0;i
Awesome
mine always get overflow out of the screen don't know how to fix it.
.sidebar, body {
overflow-x: hidden;
}
it was good bro, liked and subscribe for more such videos.
For more creative designing videos subscibe us ruclips.net/video/E39cG2Eys4o/видео.html
Hi! Thanks for the tutorial! I would like to know how i can modify these codes for android application?
using cordova app?
Yes.
put meta viewport tag in head. & use this source code - goo.gl/Xjr5E9
I have enter that tag in my code already. But I'm still unable to have the side bar to slide in and out from the right.
Please help me view codes here: stackoverflow.com/questions/47000005/toggle-btn-right-navigation-side-bar-doesnt-work
@@sohmy3495 Same problems! Tracing & checking numerous times, can't find the bug.
Good one
thankyou so much😘😘😘😘
Thank you so much
Indians are the greatest teachers believe it or not
Thank you friend
very good .helpful bro
Glad it helped
woooh finally i code for 2 hours lol
the javascript in sublime won't work
Thanks..
Very nice video.
Thank you
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
thank q so much
Thanks you help me
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
use z-index property by setting position of hamburger to relative
Codingflag so css
Position: relative;
Z-index: 1;
Correct?
give max z-index according to your website control arrangement.
try to increase z-index util you get proper expected result.
Codingflag Okay, thank you