Hamburger Menu with HTML, CSS, and JavaScript / Cool Hover Effects with ::after and ::before 

Another great video! These short and quick projects are gems. Thank you!

Watched this a year ago, and now that I am able to use javascript and css more, i realize how amazing your explanation is that I could understand it back then with almost no knowledge of both. Very dope! Thank you and Keep up the good work!

Im leaving you a big Like. You have no idea how much I learned watching this video. Thank you so much. God bless you

Sinceramente, um dos melhores tutoriais de menu retrátil. Me ajudou muito, obrigada.

one of the best tutorials i ever have seen

Your Udemy courses on HTML & CSS are great. Going through the projects makes it earlier to learn.

Great Video! Everything was clear and shortly explained. Keep up this good quality :)

Thank you so much for this! You have no idea how much this has helped me!! You've earned yourself a subscriber.

I subscribed immediately. This tutorial has helped me. Thank you.

Awesome and well explained tutorial. Thank you!

This helped me on a project. Really amazing, thank you.

Nice tutorial with great explanations, thumbs up👍🏻.

FIRST SECOND: ALRIGHT, TIME TO HIT THE BUTTON!

Excellent this video goes through so many concepts I needed.

Good tutorial and vcery nice effects!! Thank you!

Well explained. Best tutorial ever. Kudos to you

Im so greatful, this video helped me a lot and i learnt so much from this, it was perfectly explained and the animations were so cool. Good Job!

Thank you very much for this video! It was very clean and simple!! Needed it!

it looks great! thanks for sharing your knowledge!

You got yourself a new sub. Thank you very much !

Dude, just when I thought I was decent at css you throw in cubic bezier lol... well played, great vid!

Many things learned. Very nice job!

thank you SO much this was immensely helpful

when making the burger into the X shape, I have no idea where you can get the translate (-8px, 6px) for line 1 and translate (-8px, 6px) for line 3 from? Hopefully it was not a guess. Like how did you calculate the 8px and 6px?

It works perfectly, thank you so much :)

Thank you for this tutorial, hore you will reach the highest results on RU-vid

nice tutorial and thanks teacher we are waiting more

It is super helpful Thank you so much

You are at the right point

Merci ! So cool and clear

Thank u bro . Its just awesome 😍😍

Thank you for the help

This is incredible👍

Oh i love it!!

Thank you soo much, it's an awesome video

Very well explained sir

Te amo velho

Hey, I need help, when I do "scaleX(0)" the lines don't disappear Can you reply quick!

Awesome

Subscribed Thanks. Now I am looking your udemy courses.

Thanks Chief

Hi Every one. I have a question? How do we put images in our vs code images file to use for the website. I create the file on the vs code but not able to put picture in that from my PC.

You are AMAZING MEN!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU SOOO MUCH!!!!!!! GOD BLESS YOU :)

omg this is so cool

Amazing tutorial but i am bit confused. How do u link .change class to menu class so that it changes it position of menu not anything else on an event.

Wow!!!!!!

Great video I like the way you explain every steps wish you would use different BKG it would be more clear and viewable how to not have when you click on menu you see X is showing like line dancing.do you any video about JS with example. Thank you

how does he move around tags like that? what is it's shortcut?

love you dawg

Nice

And in Github repo, the CSS, Js files are empty(i mean 0 lines of code)

Beautiful

Hi man! Im trying to create a burger buttom like this. Its working perfectly but I need to add someting else on Javascript, the thing is that Im kinda new and i've no idea about javascript. I was wondering if you can help me. I need that when I clic on any element, the menu gets closed and the X turns back into a normal burger, same as when you clic on the X. Would you tell me the code lines I need to add on my css and js files to do so? Id really appreciate it

thank you so much

i loved this..... was very helpfull but could you explain how those js callings worked

If you have problems shaping the “X” try: top line:“transform: translateY(7px) rotateZ(45deg);” and for the bottom line: “transform: translateY(-9px) rotateZ(-45deg);”

Thank you so much

Ohohoh....Nice))) Russian man on English speaking RU-vid! Awesome!😍 Respect, bro keep going on!😎😎👊👊👊

pls help! i did all the same as you and i have a whitebackground color in navbar !!!

I dont know what happend i tried the same but the menu not remains clickable and kept hidden after appling right:-300px; in css

Loved your tutorial! I have almost successfully integrated this module into my website. Sadly, I am experiencing just one wee glitch… of course… and it's happening on only one page. On that page, a link that is meant to reveal accordion text is instead picking up a Facebook link within the nav-list. I adjusted the z-indexes to the nav-list and nav-bar to bring the intended link to the forefront, in vain. Your solution is so perfect in all other respects!! What am I missing!!

I just wanted to point out that animating position i.e right makes the animation way less smoother than animating transform: translateX(). Other than the that great tutorial

Good tutorial, but please set the finished files in github!

How to make the menu close when clicked outside of it?

What about mobile view?

voce salvou vidas

Having minor issues with the Javascript code and it does not execute. Below is the code I'm using and the error. Code const menuIcon = document.querySelector (".hamburger-menu"); const navbar = document.querySelector(".navbar"); menuIcon.AddEventlistener("click", () => { navbar.classList.toggle("change"); }); Javascript Validator Lne Col Errors 1 1 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). 2 1 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). 4 38 'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6'). There is something i'm missing and having trouble solving my problem. Been a while since I learnt Javascript and I'm missing something. Probably something i'm overlooking and simple to fix. Any help would be appreciated. Code:

is this responsive? if is not, could you explain how to make it? Thx!

right: 0 is not working at the end, but left: 1300px works just perfectly fine... why?

у меня в js добавляется к классу слово и из за этого я не могу применить класс который изменился помоги пожалуйста

Make a responsive navbar with hamburger menu on small screen using javascript please 🙏

Nice video, but it doesn't work cause im doing something wrong. Could you please upload full code of html, js, and css. Thank you!

I don't understand why if I follow everything you do , mine does not work

Where is the source code bro ? Great stuff btw :)

JS : const menuIcon = document.querySelector('.hamburger-menu'); const navbar = document.querySelector ('.navbar'); menuIcon.addEventListener('click', () => {navbar.classList.toggle('change'); });

круто!добавь русские субтитры!!! cool!add Russian subtitles!!!

can u help?

before and after don't work :(

CSS : * { margin: 0; padding: 0; } body {font-family: "Dosis", sans-serif } .container{ width: 100%; height: 100vh; background:linear-gradient (rgba(0,0,0,.4), rgba(148,48,48,.2),rgba(167,67,67,.4)); background: url(Bilder/Background.jpg) center no-repeat; background-size: cover; } .navbar { width: 300px; height: 100%; background-color: #262626; position: fixed; top: 0; right: -300px; display: flex; justify-content: center; align-items: center; border-radius: 20% 0 0 60%; transition: right .8s cubic-bezier(1, 0, 0, 1); } .change{ right: 0; } .hamburger-menu { width: 35px; height: 30px; position: fixed; top: 50px; right: 50px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; } .line { width 100%; height: 3px; background-color: chocolate; transition: all 0.8s; } .change .line-1{ transform: rotateZ(-405deg) translate(-8px, 6px); } .change .line-2{ opacity: 0; } .change .line-3{ transform:rotateZ(405deg) translate(-8px, -6px); } .nav-list{ text-align: right; } .nav-item { list-style: none; margin: 25px; } .nav-link{ text-decoration: none; font-size: 22px; color: #eee; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; position: relative; padding: 3px 0; } .nav-link::before, .nav-link::after{ content: ""; width: 100%; height: 2px; background-color: chocolate; position: absolute; left: 0; transform: scaleX(0); transition: transform 0.5s; } .nav-link::after{ bottom: 0; transform-origin: right; } .nav-link::before{ top: 0; transform-origin: left; } .nav-link:hover::before, .nav-link:hover::after { transform: scaleX(1); }

where is this class= change omg?

11:13

Checkout this playlist you will find almost every type of navbar ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-06UtXZo78ng.html

can you give me the source code sir

If JS wont work, try this: const menuIcon = document.querySelector(".hamburger-menu"); const hamburgerMenu = document.querySelector(".hamburger-menu"); const navbar = document.querySelector(".navbar"); menuIcon.addEventListener("click", () => { hamburgerMenu.classList.toggle("change"); navbar.classList.toggle("change");

can you please send source code of javascript pleaseeeeeeeeeeeee

I feel dumb.

hi its nice with this information, i try to finalize but its show some wrong as bellow transition. if you can support that for me with great pleasure .. thanks .nav-link::before, .nav-link::after { content: ""; width: 100%; height: 2px; background-color: chocolate; position: absolute; left: 0; transform: scaleX (0) transition: transform 0.5s; }