Responsive Animated Sidebar Menu From Scratch with HTML & CSS
HTML-код
- Опубликовано: 9 мар 2018
- ➢Tutorial Files: m.w3newbie.com/w/tutorial-20.zip
➢Courses: w3newbie.com/courses/
➢Website Resources: w3newbie.com/resources/
Create A Responsive Animated Sidebar Menu From Scratch with HTML & CSS!
this video saved me hours of gruesome thinking. thank you.
The best. Other tutorials make it wayy too fancy, this is perfect.
you are the MAN! thank you so much. i've been dying to figure this out.
Exactly what I nedded man, thaks
it was absolutely amazing thank you for the video it REALLY helped me out
This is awesome. I've been struggling to make one.
seriously dude such a great and smooth tutorial thanks a lot seriously.
thank you very much for such an awesome video...loved it !!!
wow thank you, you're amazing, so well perfectly explained! i'm trying learn to do things the vanilla way, and this was very helpful, thank you again
Awesome, thanks for watching!
thanks man! great help :)
Very good..simple and efective
the best of explaining
Great tutorial! Thanks!
This is really helpful!! Thank you 🥰
I had forgotten I subscribe to your channel awhile ago and I was about to subscribe again haha
thanks for the great video. I was hoping to try to make my website by my self but I'm a beginner so I probably shouldn't have expected so much. Thanks again.
There is an error on the onclick on the close button... he made the typo but never corrected it. For the close icon tag, your onclick should be onclick="closeSlideMenu()" not onclick="closeSideMenu()"
Thanks bro you are awesome for past my life i was wondering why this close button is not closing. You are like an angle
Hello ! Thank you very much for this tutorial, it was super helpful. However, I'm struggling with something : how could I open AND close the menu with the hamburger instead of having to use the cross? The menu I am working on is quite big because it has the summary of my thesis in it. It causes another problem, The text in the menu is moving within the dark case when I open and close the menu
Thank you so much for that, I thought my sight had gone bad
Thank you for this amazing tutorial
Oh ok i copied the link on top and now its fine. Thanks a lot!
Nice work.
You Are A Good Teacher
Hello ! Thank you very much for this tutorial, it was super helpful. However, I'm struggling with something : how could I open AND close the menu with the hamburger instead of having to use the cross? The menu I am working on is quite big because it has the summary of my thesis in it. It causes another problem, The text in the menu is moving within the dark case when I open and close the menu. :)
Thanks very much..! - Great idea to create a NavMenu without any library, only code...! Thanks
Thank you for your tutorial! But, if you want to change the icon into something else, what should you do?
how do I do the exact same although have the Menu coming from the right side? In js I have changed to 'style.marginRight' and doesn't work.
Thank you for the easiest tutorial in the world.
i think in starting it's little tuff, but after watched complete video it's so easy, you explain in easy way thanks
Thanks! I know what you mean.
Does sb know why I get sent back to the top of the page when I close the navbar? I implemented this into my private Project and turned .slide a position to sticky, so when I scroll down my page, the navbar follows . Now when I close the navbar while I scrolled down, it sents me back to the top of the page. If I turn any other positions in css to sticky from this tutorial, the navbar won't work properly (which is why I turned ".slide a" to sticky)
where does that x and burger menu come from at the start?
What can I do if I want the same navbar in the right side also?
Thank you very much! Great video! I wanted to know how to stop text from falling down in the nav while closing and opening. For example if we have an 'a' tag as "Reach Us".. When I open the nav it starts with Reach and Us in different lines. Same while closing, as it gets to the edge they both jump in different lines. I don't want this to happen. Again thanks for the help.
Thanks for watching! You can add minimum width to the .nav a { min-width: 150px; } but then you'll need to pull the "X" to the right: .nav .close {
position: absolute;
top: 0;
left: 150px;
font-size: 30px
}
@@w3newbie Thanks man! Appreciate it
thank you sir
Great video! Good job! Is it possible to make the sidebar menu show when you log on to the website? And then you can click to hide it.
You're arr the best teacher
Ur d best
Thanks
Great
Hello ! Thank you very much for this tutorial, it was super helpful. However, I'm struggling with something : how could I open AND close the menu with the hamburger instead of having to use the cross? The menu I am working on is quite big because it has the summary of my thesis in it. It causes another problem, The text in the menu is moving within the dark case when I open and close the menu... If anyone has a suggestion, you are very welcome :)
Yes, and I like you, can he explain to us how to solve this problem?
thank you bro
how can ı float it to right ı used the float property but it didnt work out for me ca n you help
how do we display another page for example form1.html inside a in place of responsive Animated Sidebar Menu when I click the Home for instance? keeping the sidebar on the page as it is...
Search for "Javascript menu no refresh"
Hey can someone help me move the position of the sidebar? I want it to be at the bottem left
Edit: Neverind I got it fixed by setting the top tag to 1 and adding a bottem tag and setting it to 0 and changing the height. Its odd how this works
The three-line menu does not show up on my web browser and all the code is correct. Any ideas on what might be the problem
Yeah I think its some kind of a lie, im super annoyed. I inspected the website he gave us to download and his is commented out and theres like all kinds of weird code in there that he did not put in the video or in the file he shared. . U can just put a png probably instead of the and it should work.
Thank you for the tutorial. Do you know how to fix this error: Uncaught TypeError: Cannot read property 'style' of null
at openSlideMenu
I did move the script at the end of the page before the closing the body tag, but still I am getting this error
Hi Sami, sorry but I'm not familiar with this error you are receiving. I would double check your code to the video to make sure everything matches (should be fine if it matches) and you can always ask at the stack overflow forum which I recommend.
Can you apply this technique using dreamweaver?
awesome
How did he get the three bar icon in the first place?
It's a free to use library fontawesome.com
how can we make this slider menu only for mobile, means on desktop come horizontal navigation bar and on mobile view when we click on toggle button it slide like this.
Use Media Queries, search "CSS Media Queries"
thxxx
thank u
man, is that script for this menu in Java Script? or in html only?
I’m following this word for word in Dreamweaver CC, and its not closing when I copy and paste the function for it to close, what am I doing wrong?
heres the code for it:
Responsive Animated Sidebar Menu
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
Home
About
Services
Contact
S.T. Graffix Menu
@Steve Tad there is an error on the onclick on the close button... he made the typo but never corrected it. For the close icon tag, your onclick should be onclick="closeSlideMenu()" not onclick="closeSideMenu()"
Am having issues creating the 3buttons icon can i get help pls m just stucked here
Your need the Font Awesome library, google Font Awesome CDN or Font Awesome Get Started
sir pls share the fontawesome script link.
For everyone who is wondering "How did he get the bar icon" just paste this inside the head menu tag
hello sir.. i have a problem about this codes.. i click the icon and the side bar show.. but when i click the x button.. its failed.. can you help me? thank you for the tutorial :)
PROBBABLY YOU TYPED closeSideMenu() , the correct is closeSlideMenu()
I LOVE YOU !! Thanks
it's just a typography error
background color apply nahi ho raha hai!1
Nice tuto, thank you !!!
Just to say ... I'm stunned when reading the comments, by how many people ask for help AFTER copy/paste or typing the code ... and how few of them take some time to understand what they are doing and how code works ! Too bad, they don't LEARN from you, but just use your code and skills ...
You tried to hide your mistake real good ;-)
Editing 😉
👍
Nav Bar not working,,,
background color is not applying!! why??
when i gave the width of navbar then the background color is applying then not applying!!
Check your background colour in the css is background-color: #111;
You are using javascript aswell..
need source code
Gunga se