Hamburger Menu Exercise

[00:00:00]
>> Here is the next part. We're gonna go to the hamburger menu, all right? And over lunch, I'd like you guys to try working on this. We have an article with the original code, That talks about how to make a hamburger menu, all right? So you can go through and look at that.

[00:00:24]
We have the original code pen, which I've stripped down a little bit. Well, this is the original code pen, just to show you what that looked like. It was a whole web page. Notice that the menu up here on the top has that hamburger button, right? Okay, and then I gave you a beginning code pen here.

[00:00:50]
So I stripped out all that extra stuff and I gave you just this part of it here. So we have pretty much something that starts and behaves exactly as we want it to behave, right? We have different links. We have a logo that should be going in here for site title.

[00:01:06]
I believe everything is up here in this page for you to work on. All the JavaScript is here and working. What I'd like for you to do then is I'd like you to make a thing that looks like this. So we have our icon. The icon is here at mobile dimensions, just the icon.

[00:01:26]
And the hamburger button, and when we get to desktop, looks like this is gonna be what's here for tablet and mobile. When you get to desktop it should look like this, okay? And I've given you some things to think about as you walk through it. But I'd like you to give this a shot and see if you can at least build this part for mobile.

[00:01:52]
The audio player exercise, we had the same process where we picked out an audio player from the Internet, we forked it, we looked at the code, we added a little HTML for styling purposes. And made sure we didn't break any JavaScript, and so forth in order to get our audio player put together.

[00:02:10]
We're gonna use the same methodology now for our hamburger button. We've found a hamburger button online, and now we're gonna go about styling that. So let's start with a few questions. So first of all, hopefully, you've had a chance to take a look at the HTML and so forth.

[00:02:30]
And you can of course can get your code pen and practical.css.education. This is Chapter 4E, the hamburger menu. We are looking at our beginning code pen. The opening code pen here, the HTML is pretty simple. We have a header, e have a site title, we have a button.

[00:02:49]
This is gonna eventually the hamburger button or it's hidden from view, depending on the size of our window. And then we have our navigation, right? Okay, so pretty easy to understand. Then underneath, down here we have some css, blah, blah, blah, blah, blah. And then we have a media query with a max width of 48 REMs, okay, blah, blah, blah, blah, blah, that that one media query there.

[00:03:19]
Okay, so my first question to you is this. Is this mobile first, or is this desktop first?
>> Desktop.
>> Why do you say desktop first?
>> Because instead of going up in our media queries with min-width, we're actually taking all of our styles, and then only applying things when a max-width is reached.

[00:03:42]
>> Correct.
>> Just scaling down the browser as opposed to scaling up.
>> Correct. So what's outside of the media query here? All these styles. These are the desktop styles which is the opposite of what we have been doing. And what's inside the media query, all of these are the actual mobile styles.

[00:04:01]
Make sense? Okay, so anytime you run into desktop first, that doesn't mean you can't use it with your mobile first approach. It just means maybe your hamburger menu is desktop first and everything else is gonna wind up being built mobile first. It is really not a tragedy. But you can rewrite the code if you want.

[00:04:23]
So if you want everything to be mobile first, or you have that rule at work, you could go through the process of rewriting this, take things out of the media query, put other things into media queries, yada, yada, yada. We aren't gonna bother with that. We're just gonna keep it desktop first because it works just fine the way it is.

[00:04:42]
All right, sounds good. How about comments on the HTML structure, what do people think about the structure of this document? Anything we need to fix here? Does it look semantic? Does it look reasonable for a navbar? So if you don't normally use an unordered list for your navbars, you should.

[00:05:06]
Navigation is a list of links and they can be visited in any order. So, therefore, it is an unordered list. That is why we do that. I know a lot of people just put in links, and then they just magically line up in a row. This is the correct way to mark up a navigation bar.

[00:05:25]
And of course, that button there is going to be our hamburger button, and then we have our site title which we'll need to swap out for our logo. Fair enough, okay. Let's take a quick peek at our JavaScript. And this JavaScript is lot simpler than the audio JavaScript, right?

[00:05:46]
We're just gonna look at it just real quick to see what it's selecting here and what we can not change in order to keep this working. So you see here in line two it says getElementById main menu open. So we definitely need to keep that ID in place in order for this JavaScript to work.

[00:06:05]
Anything else here on this JavaScript that we need to worry about? Anybody? Looks pretty clear, right? Pretty clear. That's the only thing that gets selected is that main menu opens, so very good. And we see it show up here in the code a lot. And then these icons.

[00:06:30]
So there is an icon here for this hamburger button, right? Where is that coming from because it's not coming from the HTML, right? We take a look here, there is nothing here that calls for any kind of image, is there? So let's take a look and see if we can find it.

[00:06:51]
It's probably gonna be in our mobile styles. And sure enough right here on line 71, there is this content, this funky/630. That's a Unicode code [LAUGH] Unicode code. That indicates that is a hamburger button, so that's where that's coming from. When we click the hamburger button and our menu slides in view, we have an odd box that shows up here, that should be the closebutton.

[00:07:27]
For whatever reason, I don't know if it's the font or whatever, the closebutton never seems to work correctly. And I am not sure where that shows up here in this code. Which might be the whole problem come to think of it. [LAUGH] It just never shows up. So that is something we'll wanna fix, we'll want them have a working closebutton.

[00:07:51]
So this is the approach that this particular author has taken. They're using Unicode codes to call for some of these icons. So just something again to keep in mind, that we don't need to come up with SVGs or anything like that.