Start a free Courses trial
to watch this video
Want to set up a hamburger menu for your mobile navigation with a slick animation? It's not as hard as you may think. Follow along while I tackle this small UX feature using HTML, CSS, and a bit of JavaScript!
Treehouse course
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[MUSIC] 0:00 Hey, everyone. 0:09 What's up? 0:09 My name is Dustin, and I'm a developer and technical evangelist here at Treehouse. 0:10 Today, I wanna show you how to create this simple animated hamburger menu for 0:14 mobile navigations. 0:18 It's pretty easy to set up, and only takes a little bit of HTML, CSS, and 0:20 just a little bit of JavaScript. 0:23 I'll be building this from scratch. 0:26 So if this is something you wanna learn how to do and follow along, 0:27 feel free to open up your favorite text editor and follow with me. 0:30 Let's get started. 0:34 So as always, the first thing I'll do is create a new folder on my desktop. 0:37 I'll name it hamburger-menu, and drag it to VS Code. 0:41 I'll get started by creating some files that we'll need. 0:46 I'll start off with an index.html file. 0:50 And then I'll create our styles.css stylesheet. 0:53 And we'll need some JavaScript, so I'll create an app.js file as well. 0:58 I'll get some boilerplate started in our index.html file, and 1:04 I'll change the title to Hamburger Menu. 1:08 And then I'll start linking our CSS stylesheet, and 1:12 then I'll link in our JavaScript file. 1:16 Next, I will open up our project in the browser. 1:23 And then I'll open up my text editor and browser side by side. 1:30 So the first thing we can do is just start writing some basic HTML that we'll need. 1:35 We'll put this in a nav tag. 1:40 And inside, we'll write hamburger-menu as a class name for our div. 1:42 And inside of hamburger-menu, we'll create our three hamburger-menu bars. 1:48 All three of these will have the class of ham-bar, and each one will have 1:54 their respective bar-top, bar-mid, and bar-bottom class names. 1:58 So in the stylesheet, we'll just reset our browser's default stylesheet by 2:04 just adding some margin: 0, padding: 0, and box-sizing: border-box. 2:09 Next, we can target the body rule. 2:16 And in here, all we're gonna need to do is just write a background-color. 2:19 And we'll give it a light gray background. 2:24 And next, we can start styling up our nav. 2:28 So we'll give it a padding of 1rem, And 2:32 then we'll give it a dark background-color. 2:37 I'll go with something not too dark but not too light. 2:39 Next, I'll give it a display of flex. 2:45 And since this is the only item in our nav, 2:47 I'll put the justify-content to flex-end, and I'll align the item center. 2:50 And this should push our hamburger-menu all the way to the right. 2:56 Next, we'll target our hamburger-menu itself, and we'll give it some styles. 3:01 We'll give it a height and a width. 3:06 And I'll also give it a background-color of red. 3:09 And this is just temporary so 3:11 that we can kind of see what's going on while we're creating the styles for this. 3:12 So as you can see, it's all the way to the right of our menu. 3:17 So next, what I'll do is I'll give it a position of relative 3:21 because the bars inside will need to be positioned absolute. 3:25 I'll give it a cursor of pointer, and then a padding of 1rem. 3:30 Next, we can get started on the hamburger-menu bars. 3:37 So underneath that rule, I'll create a ham-bar rule. 3:41 And this will target all three of the bars. 3:45 So all three of them will have a width of 70%, and a height of only 4 pixels. 3:48 We'll give it a white background-color. 3:54 And we'll give them a border-radius of 25 pixels. 3:57 We'll position them absolute, with a top of 50% and a left of 50%. 4:01 And the transform will translate -50% on both the x and y axis. 4:08 And if we hit Save, we'll probably just see one bar, and 4:15 that's because all three are directly on top of each other in the center. 4:18 So we'll work on that in a bit. 4:23 We'll add a transition so that whenever we click on our hamburger-menu, 4:26 they'll have a nice transition. 4:30 So we'll transform 0.6 seconds, 4:32 the opacity will be 0.8 seconds, and the top will be 0.6 seconds. 4:34 And you can play with these around to your liking. 4:40 So for bar-top, I will give it a top of 25%. 4:44 And for bar-bottom, 4:46 I'll give it a top of 75%. 4:49 So now if we hit Save, we should see all three bars, and 4:54 this should start to look like a hamburger-menu. 4:57 Now, when we want this menu to have the appearance of a clickable x, 5:01 we'll actually have a class of active set on our hamburger-menu. 5:05 So in order to write the styles for that, let's add that class to the menu now. 5:10 And once that's done, we can go back into our stylesheet, and 5:16 we can start targeting what this menu will look like when it has the class of active. 5:20 So we'll write a new rule for hamburger-menu with the class of active, 5:25 and we'll target bar-top. 5:28 And we'll transform and we'll put in the translate -50 on both x and y axis. 5:31 And we'll also give it a rotate. 5:38 So we'll rotate this -315deg. 5:40 And we'll also update the top to 50% to put it back in the middle. 5:46 And next, we'll target the hamburger-menu when it's active for the bar-mid. 5:52 And the only thing we'll do with this one is just make it disappear. 5:57 And we can do that by just setting the opacity to 0. 6:01 Next, we'll set up the hamburger-menu when it's active for the bar-bottom, and 6:05 we'll do what we did for bar-top but the opposite direction. 6:10 So we'll do transform, and we'll translate the -50% on both x and 6:13 y axis, and we'll rotate this one -225deg. 6:19 And then we'll set the top to 50%. 6:25 And now, you should see an X whenever you hit Save. 6:29 If we hop into our HTML file and remove the active class, 6:32 it should go back to just the three bars. 6:36 And adding the active class back will give us that X appearance again. 6:38 So if we hop back into our stylesheet, we can first remove the red background 6:43 from our hamburger-menu as we don't need that anymore. 6:48 And now, we can start toggling this class in the JavaScript. 6:55 So let's set up a variable for our hamburger-menu. 6:59 So we'll do const hamMenu = document.querySelector, and 7:03 we'll put the class of hamburger-menu. 7:08 And we'll write hamMenu.addEventListener. 7:11 And we wanna listen for clicks. 7:14 And when we detect a click on this hamburger-menu, 7:16 we just wanna write hamMenu.classList.toggle(active). 7:20 So if you hit Save, you should be able to hit the hamburger-menu. 7:25 And you'll notice that the animation will trigger, which is exactly what we want. 7:30 Sweet, it works. 7:38 So next in our HTML, let's create our off-screen-menu. 7:41 And we can do that by writing a div with the class of off-screen-menu. 7:45 And we don't need to put any content in this right now just to get this to show. 7:49 So in our stylesheet, let's create a rule for our off-screen-menu. 7:54 We'll write off-screen-menu. 7:59 And in here, what we'll do is we'll set up the position to fixed. 8:01 And we'll set the top to 0, and the right to -75%. 8:07 And this will make sense in a little while. 8:14 Next, we'll give it a background-color, and 8:17 we'll go a little darker than the navigation menu 8:20 Next, we can give our off-screen-menu a height 8:29 of 100 view height, and a width of 75%. 8:34 Now, by default, this off-screen-menu will not be showing. 8:40 And that's because we have the right set to -75%, which is the size of the width. 8:43 So we'll do off-screen-menu with a class of active, and 8:49 we'll set the right to 0, which should show the entire menu. 8:53 So what we can do is, in the JavaScript, when we click on our hamburger-menu, 8:58 we'll add that class of active to that as well. 9:02 And I'm just giving a transition of right: 0.5 seconds to our off-screen-menu. 9:06 That way, we have a little bit of an animation when this rolls in. 9:10 So let's create a variable for our off-screen-menu. 9:15 And we'll write const offScreenMenu = document.querySelector. 9:18 And we'll select the class of off-screen-menu. 9:24 And underneath our classList.toggle for our hamMenu, we'll do the same thing for 9:29 the off-screen-menu. 9:33 So offScreenMenu.classList.toggle(active). 9:36 And if we save and hit our menu, we should notice it working. 9:40 But that X should be when the menu is open. 9:45 Okay, so it looks like we still have the active class 9:49 on the hamburger-menu itself in the HTML. 9:51 So let's just remove that. 9:53 And now, this should work perfectly. 9:56 Sweet, it does. 9:59 We have a pretty cool animation for our hamburger-menu for our mobile navigation. 9:59 There are tons of ways to build something like this out, 10:06 and this is just the way that I'll like to do it. 10:09 I think this adds a nice user experience to a mobile navigation for your webpage. 10:11 I hope this guide helped, and I'll see you in the next one. 10:17 Until then, have fun and happy coding. 10:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up