Animated Hamburger Menu Tutorial - CSS Effects

in this video I'll show you how to create a CSS hamburger animation hey thanks for checking out this video if you're just starting or even thinking about starting a career in web development you're in the right place I upload new videos every week hit subscribe in the Bell to get notified so I want this to be a shorter video we're gonna go a little bit quicker than normal let me know what you think about this video format would you rather that I slow down and explain things more or do you like the fast-paced just show you how it's done alright so we'll start by creating our index.html close the sidebar will use emmitt to create a boilerplate we'll name the CSS hamburger animation and then we'll include a link to our style sheet that we will create in a minute and then for the markup we're going to create a div with a class of mini button and then within that another div with the class of menu button burger and that's it for the markup so let me save this then I'm going to use live server to open this in the browser and of course we're not going to see anything right now so let's move on to our stylesheet so let's create that and we'll start out here with some normal resets margin:0 padding:0 and box-sizing border box and the body will set the background to a dark gray color and for demonstration purposes we're gonna display this as flex and justified content center and aligned items Center and we're going to set the minimum height to 100 you height that's it for the body next we'll target the menu button we're going to set the position on this one to relative and again we're going to display this as flex justify Content Center and a line items Center we're going to set the width to 80 pixels and the height to 80 pixels set the cursor to pointer and let's set our transition to all 0.5 seconds and we'll set an ease in out and then just tell you that you can see this I'm going to set a border of 3 pixels solid and white all right let's save this and see what we have so far perfect we have a mini button in the center alright so now let's start on the burger so we have our menu button burger so in here we're gonna set a width of 50 pixels a height of 6 pixels background of white a border radius of 5 pixels of a box shadow that's a faded orange color and then set our transition to 0.5 seconds as well now I know that with transitions box-shadow is not going to be great for performance if you're worried about performance you can leave the shadow out all right let's save this and see what we have so far now we have the middle line in the burger let me zoom in a little bit there we go so now let's work on the top and bottom lines so this time we're going to target our menu button burger before and the menu button burger after we're set the content to blank and the position:absolute the rest of its the same as the regular menu button burger element next we'll look at the menu button burger before on its own and in here we're going to set the transform to translate why negative 16 pixels so we want that before line to move up 16 pixels next we'll target the menu button burger after and we'll do the same thing except this time it will be 16 pixels so we want to move down 16 pixels all right let's save that and see what we have now alright now we have our before and our after so now that we have the button complete we need to work on the actual animation so for that we are going to have to use a little bit of JavaScript but don't let that scare you it's gonna be easy so first thing is we're going to create a javascript file so we'll name that main j/s and then in our HTML we'll need to include that so at the bottom just before the closing of the body we'll enter a script with a source of main j/s and that's all that we'll need to add to the HTML now in our JavaScript file we're going to create our constant for the actual menu button we're going to name that menu button we'll use document query selector and we're going to target the menu button class we're also going to create menu open so we need to know if the menu is open initially that will be false then we'll add an event listener to the menu button it's going to be a click event and we'll use an arrow function so then we're gonna say if menu open is false so then we're going to use the menu button we're going to add a class to it of open now that it's open we need to set our menu open status to true all right and then if it's open we want to do the opposite if it's already open we're going to remove the class of open and we're going to set our menu open status to false all right and so that is all of the JavaScript we're just listening for the click and if the click happens it's going to either add the class open or remove the class open alright so I'll save that and then to demonstrate that let me open up the tools here all right so here is our menu button and watch as I click it it adds the class open and I click it again open is remove so that's working now let's go back to our CSS and we need to add a little bit more so this is going to be the animation and then in here we're going to target our menu button dot open and then the menu button burger so what we're targeting right now is the middle line so we want to transform and translate the x-value which is the horizontal value a negative 50 pixels so that's going to make it move off to the left and then we want to target the background and change that to transparent so that goes away and then set the box shadow to none so I'll save that and if we click it it should disappear and go to the left so the whole thing moves and then the middle one disappears all right and so now let's target our menu button open and then the menu button burger before on this one we're going to transform and we're going to rotate 45 degrees and we're also going to translate the x value will be 35 pixels and the Y value will be a negative 35 pixels and lastly the menu button open and menu button burger after we're going to do the same thing on this one transform rotate but this time will be a negative 45 degrees and we're going to translate the x value of 35 pixels and the Y value of positive 35 pixels on this one all right now I'll save that and watch as I click we have an X the middle one goes to the left and disappears now you could do a lot of things with this you can have this middle one shrink into the middle go to the right up down whatever you'd like that would just be changed right here on this line and so for this demonstration I added the border just to show you where the actual element is so I'm going to remove that I'll just comment it out so now we have our completed CSS hamburger animation all right so that's going to be it for this video let me know what you think about these quick videos and just a quick how-to if you like this video a thumbs up is appreciated I upload new content every week so hit subscribe in the belt to get notified and if you think this video or any of the videos on my channel might be helpful to someone else please share them i'm also on twitter and instagram at code stacker thanks for watching

Channel: codeSTACKr

Views: 370,148

Keywords: animated menu icon, animate hamburger to cross, Animated Hamburger Toggle, Burger Menu Animations, CSS Hamburger Menu Icons, Hamburger Menu Design, css hamburger menu, Hamburger menu button, transforming hambrger icon, animated css toggle menu, transforming hamburger menu, How To Create a Menu Icon, hamburger menu icon css, animated menu icon jquery, responsive menu, css menu icon, toggle menu icon, pure css menu icon, pure css hamburger menu, hamburger menu, Css menu

Id: dIyVTjJAkLw

Length: 6min 54sec (414 seconds)

Published: Wed Sep 11 2019

Reddit Comments

[u/codeSTACKr]

Here is my latest video. In this one we'll create a cool animated hamburger menu. I hope this helps at least 1 person. I appreciate any and all support. Don't forget to SUBSCRIBE! Thanks!!

[u/rithikGandhi]

Thanks it was fun idea. It reminded i need to practice my animations more

[u/FiliWhiskey]

Had already subbed, glad to see you back at it.

[u/simohayha]

Really good stuff.

What keyboard are you using /u/codeSTACKr

[u/VictorKolis]

Great video!

[u/HungryPiccolo]

I dig it! Quick and easy. I will check out your other videos when I have some time, perfect for the level I'm at now.

[u/xnofox]

I enjoyed it, saved this post, and will very likely check out your channel. Kudos and thanks!