2.5 Hamburger Menu Icon to Cross

Welcome to project number five, where we'll create a hamburger menu icon that transforms into a cross. Now, there are two ways you can do that. You can either use SVGs or you can use just a regular HTML with a couple of span elements and we're gonna go with the second option because it's easier to understand. As usual I'm in code pen. I've set up just a presentation only style for the body tag just center aligning everything and this is the end result. So, this is the hamburger mini icon and when we click it, it's gonna be transformed into this cross, all right. So, how do we do that? First, let's go ahead a create the actual hamburger icon. So we're gonna start with an anchor tag and it goes nowhere. And we're gonna give it a class of hamburger-button. Of course, you can use any class that you want. And in here, I'm simply going to display four spans. Now, you might be wondering why well why four spans? We only have three, Lines in our hamburger icon. Well you'll see why in just a little bit. For now, we're done with the HTML, let's focus on the CSS. First things first let's style the hamburger icon. So let's reference hamburger-button, let's set a position to relative this is important because all of those spans will be positioned absolutely and let's give it a width of 45 pixels and a height of 34 pixels and these are values that I got from the CSS, from the Sketch files, excuse me. Next, let's add a transition 0.3 seconds ease in-out. Next let's do hamburger-button span. This is where it will style basically the hamburger components. So for each span we're gonna do the following. Set a position of absolute, set a height of 8 pixels, set a border radius half.value. So, half the value of the height which is 4 pixels, we're gonna set a width of 100%. And we'll set a background color of 3d. 41, 46. And there we go, that's one. We'll set the top to zero initially, and then we'll do this. We'll set a transition for transform, because we will be adding a transform later on to animate them into that cross. 0.2 seconds ease-in-out and also we're gonna transition the opacity because the way we're gonna achieve a cross from a hamburger menu icon is to hide a couple of elements. So bear with me on this, we're gonna add an opacity 0.2 seconds same easing is ease-in-and-out. Now, let's go ahead and position each element of the hamburger to its correct top position. So I'm gonna say hamburger button span nth child (1). I'm gonna set a top zero pixels yeah to start things off. But then for number two, and also number three, we're gonna set a top of 18 pixels. And again, I've got these values from the sketch files. Excuse me not 18, 13 pixels, and for number 4 the top is gonna be 26 pixels. Now what's the deal with the number 2 and number 3? Notice that because I put them at the same top value, they overlap each other, so instead of the button or the icon showing me four spans, it only shows me three spans, with the middle two being positioned one on top of the other. And this is intentional, because the way we're gonna transform this into a cross is by fading out the top and bottom spans or lines and rotating the middle two by 45 degrees, so one of them is gonna be at 45, the other at minus 45, creating an X. That's of course, one way of transforming this into a cross. You can eliminate the middle ones and rotate the top and bottom, that's also doable, or you can use three spans and just eliminate one of them and rotate the other ones, but this is, I think, the easiest option. So let's go ahead to step number two which is style the active state and create the cross. Now you might be wondering what active state is that. It's the active state that we're gonna set it in JavaScript. We're gonna write a little bit of JavaScript because otherwise, we would have to use maybe a check box or a radio button to style the check state. But I preferred to go for the simpler way which is just to use a little bit of JavaScript now. I'm gonna add jQuery here so that we will write the code a little bit faster. So I'm gonna write the function, this is equal to document ready. And this is a shorthand, basically. And here, I'm just gonna say hamburger-button on click. So when we click the button, we're gonna execute the following function. And the function receives an e, or event parameter, which we'll use. Let's actually write event here to make it clear, which we'll use to prevent the default behavior. This basically assures that when you click on a link nothing happens, and then I'm gonna save this, and this refers to the actual hamburger icon. I'm simply gonna say toggleClass active. And toggleClass is a JavaScript method that basically removes a class that exists and adds a class if it doesn't exist. So with that out of the way, if we're gonna take a look in the inspector here and let's see, let's close the console. We don't need this. Notice the hamburger button. When I click on it, see how it just toggles the active class, on and off? Well, all I have to do now is style that class. I'm gonna say hamburger-button with a class of active and then span:nth-child(1), and nth-child(4). So number 1, which is on the top, and number which 4 is on the bottom. What I'm gonna do is simply hide them completely. I'm gonna set opacity to 0 and because we added a transition for the opacity right here, this transformation will be animated. Now for the other two, well, it's quite simple. For child number two, we're gonna do transform: rotate() 45 degrees. And for the other one, We're gonna do -45deg. So, what does that give us? Well, it gives us a hamburger icon that when clicked transforms into a cross. It's that simple so if we're gonna create a pretty long animation here let's say like 5.2 seconds, you can see how the transformation actually takes place. So here we go. The top and bottom, let's actually add it here. That was stupid of me. [SOUND] Do a refresh. Click again. Top and bottom are animated out and the middle ones are being rotated to 45 degrees. Here we go again in slow motion, the reverse. These are rotated back, and the others are faded in. This is how we achieve this transformation, basically. It's that easy, let's go back and set these back to a respectable duration, Like that. And that was it for project number 5, this was actually very fun for me to do. It's a very interesting technique, and I'll be sure to use it in my own projects. Now we're almost done. We have only one more project to go, and that is to create a full page navigation overlay. That's happening in the final lesson of this course. That's coming up.