Writing an animated flyout hamburger menu
So I’m currently sitting on a plane at the moment. A recent project I started on was a travel guide where I live. Being on a plane without wifi for a long time is a quick wakeup to me how much I rely on the internet to code.
My page itself uses the minimalist Jekyll theme. I really like this theme’s typography, and clean look. However its missing a key element for my page, and that is a menu. Without the ability to google I set off writing my own menu. No libraries, and that includes jquery! The only thing I relied on was a local copy of font awesome I had recently downloaded. So the first place I started was to make the flyout menu. Here is a screen shot of the results.
Seeing as I didn’t have a button to toggle right away, I just called a few functions I wired up into the window for development purposes. I added the following html in the body tags. Notice a few things. First, I’ve used font-awesome 5 to get a circle with an
x in it. This will be used to close the menu, if you don’t want to make a selection. Then we have each link, and in my use-case I made these hash links.
So here is the css I generally used. Now I’m using
scss so I can nest some variables. There are a few things worth mentioning. First off the navbar I called hamNav, because it was a hamburger style menu nav. The second is that the navbar’s position is fixed, and it defaults to a width of 0, which means it won’t really render any pixels on the screen. Finally, I’ve added a css transition of .5s This will cause the menu to animate out from the left side.
show class to our menu bar. Once we add that class, we’ll give the menu a width and thus cause it to animate out. You would be able to see this by running
Ok, so I needed a button to open the menu. These days most websites have a small circular button on the right side, with the hamburger menu icon in it. Back to font awesome where I got a sweet hamburger icon, and I wrote the following html in the body.
Ok this will give us an a link with a hamburger icon inside. Now we have to style the a link so it looks like a round button. Back to css!
Ok, so whats going on here. Well we’re using border-radius to make our class round. We’re giving it a width and height of
50px. We’re setting its position to fixed percentages off the bottom right. This will help make it scale better for different screen sizes. Finally we adjust the margin for the hamburger icon, and make the icon white.
So thats basically it. Honestly, I’m happy with the way it came out. I’m sure there could be better way’s to do this. With the overall lack of googling ability this is what I came up with, and I like it!