Hey everyone what's up my name is Dustin and i'm a developer and technical evangelist here
at treehouse today i want to show you how to create this simple animated hamburger menu
for mobile navigations it's pretty easy to set up and only takes a little bit of HTML CSS and just
a little bit of JavaScript i'll be building this from scratch so if this is something you want to
learn how to do and follow along feel free to open up your favorite text editor and follow with me
let's get started so as always the first thing i'll do is create a new folder on my desktop i'll
name it hamburger menu and drag it to VS Code i'll get started by creating some files that we'll need
i'll start off with an index.html file and then i'll create our styles.css stylesheet
and we'll need some javascript so i'll create an app.js file as well i'll get
some boilerplate started in our index.html file and i'll change the title to hamburger
menu and then i'll start linking our css style sheet and then i'll link in our JavaScript file
next, i will open up our project in the browser
and then I'll open up my text editor and browser side by side
so the first thing we can do is just start writing some basic HTML that we'll need
we'll put this in a nav tag and inside we'll write hamburger menu as a class name for our div
and inside of hamburger menu we'll create our three hamburger menu bars
all three of these will have the class of ham bar and each one will have their respective
bar top bar mid and bar bottom class names so in the style sheet we'll just reset our
browser's default style sheet by just adding some margin 0 padding 0 and box sizing border box
next we can target the body rule and in here all we're going to need to do
is just write a background color and we'll give it a light gray background
and next we can start styling up our nav so we'll give it a padding of one rim
and then we'll give it a dark background color i'll go with
something not too dark but not too light
next i'll give it a display of flex and since this is the only item
in our nav i'll put the justify content to flex end
and i'll align the item center and this should push our hamburger menu all the way to the right
next we'll target our hamburger menu itself and we'll give it some styles
we'll give it a height and a width and I'll also give it a background color of red and this is
just temporary so that we can kind of see what's going on while we're creating the styles for this
so as you can see it's all the way to the right of our menu
so next what I'll do is I'll give it a position of relative because the bars inside will need to be
positioned absolute I'll give it a cursor of pointer and then a padding of one rem
next we can get started on the hamburger menu bars
so underneath that rule i'll create a ham bar rule and this will target all three of the bars
so all three of them will have a width of 70 percent and a height of only 4 pixels
we'll give it a white background color and we'll give them a border radius of 25 pixels
we'll position them absolute with a top of 50 and a left of 50 and the transform will translate
negative 50 percent on both the x and y axis and if we hit save we'll probably
just see one bar and that's because all three are directly on top of each other in the center
so we'll work on that in a bit we'll add a transition so that whenever we click on our
hamburger menu they'll have a nice transition so we'll transform 0.6 seconds the opacity will be
0.8 seconds and the top will be 0.6 seconds and you can play with these around to your liking
so for bar top i will give it a top of 25 and for bar bottom i'll give it a top of 75
so now if we hit save we should see all three bars and this should start
to look like a hamburger menu now when we want this menu to have the appearance of
a clickable x we'll actually have a class of active set on our hamburger
menu so in order to write the styles for that let's add that class to the menu now
and once that's done we can go back into our style sheet and we can start targeting what this menu
will look like when it has the class up active so we'll write a new rule for hamburger menu the
class of active and we'll target bar top and we'll transform and we'll put in the translate negative
50 on both x and y axis and we'll also give it a rotate so we'll rotate this negative 315 degrees
and we'll also update the top to 50 percent to put it back in the middle and next we'll target the
hamburger menu when it's active for the bar middle and the only thing we'll do
with this one is just make it disappear and we can do that by just setting the opacity to zero
next we'll set up the hamburger menu when it's active for the bar bottom
and we'll do what we did for bar top but the opposite direction so we'll do transform and we'll
translate the negative 50 on both x and y axis and we'll rotate this one negative 225 degrees
and then we'll set the top to 50 and now you should see an x whenever you hit save if we hop
into our html file and remove the active class it should go back to just the three bars and
adding the active class back will give us that x appearance again so if we hop back into our style
sheet we can first remove the red background from our hamburger menu as we don't need that anymore
and now we can start toggling this class in the javascript so let's set up a variable for our
hamburger menu so we'll do const ham menu equals document.queryselector and we'll put the class of
hamburger menu and we'll write handmenu dot advent listener and we want to listen for clicks and
when we detect a click on this hamburger menu we just want to write handmenu.classlist.toggle
active so if you hit save you should be able to hit the hamburger menu and
you'll notice that the animation will trigger which is exactly what we want
sweet it works so next in our HTML let's create our off-screen menu and we can do that by writing
a div with the class of off-screen menu and we don't need to put any content in this right now
just to get this to show so in our style sheet let's create a rule for our off-screen menu
we'll write off-screen menu and in here what we'll do is we'll set up the position to fixed and we'll
set the top to zero and the right to negative 75 and this will make sense in a little while
next we'll give it a background color and we'll go a little darker than the navigation menu
next we can give our off-screen menu a height of 100 view height and a width of 75 percent
now by default this off screen menu will not be showing and that's because we have the
right set to negative 75 percent which is the size of the width so we'll do off screen menu
with a class of active and we'll set the right to zero which should show the entire menu
so what we can do is in the javascript when we click on our hamburger menu
we'll add that class of active to that as well and i'm just giving a transition of right 0.5
seconds to our off-screen menu that way we have a little bit of an animation when this rolls in
so let's create a variable for our off-screen menu and we'll write const
off-screen menu equals document.queryselector and we'll select the class of off-screen menu
and underneath our classlist.toggle for our hand menu we'll do the same thing for the off-screen
menu so offscreenmenu.classlist.toggle active and if we save and hit our menu
we should notice it working but that x should be when the menu is open so
okay so it looks like we still have the active class on the hamburger menu itself
in the HTML so let's just remove that and now this should work perfectly
sweet it does we have a pretty cool animation for our hamburger menu for our mobile navigation
there are tons of ways to build something like this out and this is just the way that I like to
do it I think this adds a nice user experience to a mobile navigation for your web page
I hope this guide helped and I'll see you in the next one until then have fun and happy coding
you