Off-Canvas Menu HTML

[00:00:00]
>> Jen Kramer: So this hamburger button. We're gonna put it up here at the top, right? That's where good hamburgers go, they go at the very top of the document. So let's go ahead and start this, and we're gonna put in, it's gonna be a clickable thing. So we'll start with an a href.

[00:00:18]
>> Jen Kramer: And I'm gonna have this link to main menu.
>> Jen Kramer: That's pound main menu. We'll eventually have an ID for that and the class will be menu-toggle, okay, and we're also gonna give this an ID, main-menu-toggle.
>> Jen Kramer: It's always hard the first line of code because you're like, why are you doing that?

[00:00:48]
Why are you doing that? All will become clear as we write a little bit more code here, so just sort of take my word for it for the moment. Obviously, we need to close that tag. And in between, we need to put something to click on.
>> Speaker 2: You also need a-

[00:01:04]
>> Jen Kramer: And I need a quote right there. There we go. Thank you, and then here in the middle, we'll go ahead and put in our font awesome, -span,
>> Jen Kramer: Class=fa fa-bars.
>> Jen Kramer: Okay, if you copy this right out of font awesome, it will be in an eye tag.

[00:01:28]
I've never been a fan of the eye tag, but so spam tag will do pretty much the same thing. It's a generic tag. So there's our bars, yay. There's the hamburger button. Tell me about this hamburger button right now. Is it doing anything? What is it doing?
>> Jen Kramer: It's just hanging out there on the page.

[00:01:51]
Let's go ahead and put in the next chunk of HTML here. And our nav, we're gonna put in an id of main menu. That's where it comes from. So when we click on this button up here on the top. Somehow we're gonna trigger our navigation. So those two things go together.

[00:02:15]
Makes sense? And then we're gonna give that a class. Main menu, and then inside of that we'll go on ahead and put in an a href equals,
>> Jen Kramer: Close my tag.
>> Jen Kramer: This is gonna go to main menu toggle
>> Jen Kramer: And we'll give it a class of menu-close.

[00:02:53]
>> Jen Kramer: Any one wanna guess what's gonna go inside of my a tag here?
>> Speaker 2: Awesome.
>> Jen Kramer: Fun, some kind of fun, awesome doing what?
>> Jen Kramer: How about a big x? Yeah, big x. So once again, if you copy it out of fun, awesome, it will give you an i tag.

[00:03:16]
I'm gonna use a span. Up to you, fa, fa hyphen close.
>> Jen Kramer: Close the span.
>> Jen Kramer: And then the last little thing I'm gonna add here is down at the bottom after the navigation before, actually after this slash nav tag, we're gonna add this, a href equals and this is weird.

[00:03:43]
And I don't expect you're gonna understand what it is just yet, but take my word on it, it's gonna be really cool. Main-menu-toggle.
>> Jen Kramer: And then a class of backdrop.
>> Jen Kramer: And it's gonna be hidden.
>> Jen Kramer: And that link has nothing in between. Anyone wanna take a guess what that weird little line of code might be doing?

[00:04:17]
>> Jen Kramer: Has a thing called backdrop in it. There's a hidden in it.
>> Speaker 2: If we unclick, it'll toggle the hidden or the display?
>> Jen Kramer: Yeah, there's something here going on. So what we're building is an off canvas kind of thing. We're gonna slide in the menu. So we have the menu on the page.

[00:04:35]
What happens if they don't click the x? What if they click over there somewhere? What happens?
>> Jen Kramer: I don't know, right? So this line of code is gonna do that, it's gonna make the whole screen clickable to make the menu disappear.