Click Events with CSS

[00:00:00]
>> Jen Kramer: So first of all, we're gonna use this selector, you've probably never seen before. Main menu, colon, target, anyone ever heard of this one? Anyone ever heard of target? So target basically says, when the main menu is targeted. In other words, something has been clicked on and it is a target.

[00:00:22]
So if you notice, here on our a, and on that hamburger button here, it says main menu, right? So when this is clicked on here, and it becomes now the target, we are going to do something. Anyone wanna take a guess what we are gonna do?
>> Speaker 2: Display.

[00:00:41]
>> Jen Kramer: How about display the menu, yeah. So, display, block, okay? Cuz right now it's a display none. So when it becomes the target, it will become display block. My left will become 0, so it's gonna come out and show on the screen, right? And we could say outline, none, just in case there's an unsightly outline.

[00:01:06]
Then the other things we need are, main menu, target, menu close. So what does this selector say? For anything that has a class of menu close, when the main menu is targeted, right? So, this is gonna happen when the main menu is targeted on that thing, that menu close.

[00:01:28]
What are we going to do here? We're gonna make a z-index of 1001, in other words, we're gonna bring it to the top, so you can click the X, right? When you slide that thing on, the X actually goes underneath, so we need to make sure the X is on top and clickable, so that's what that's doing, okay?

[00:01:47]
And then, also, main-menu, target, ul. Position of relative and a z-index of 1000, slightly below the close button, right? Because the close button we positioned absolutely in the top corner, we need it to be actually be underneath the menu which is on top of the screen behind us.

[00:02:19]
So, that's the three layers, the main screen, the ul and then the close button on top, makes sense? Okay. All right, now, and then the final, let's just take a quick peek at what we've got going on here, go ahead and save your code, let's look at it in a browser, what do we got?

[00:02:41]
Hey, all right, so there it is.
>> Jen Kramer: That works, okay? The other cool thing that happens because of the way this is coded, you'll notice that the URL changes here, and the back button actually works. Wow, so I can click that and hit the back button, and that will work, because of the way we've got this coded.

[00:03:07]
Now, what happens though, for the person who for whatever reason can't get this X up here or doesn't want it, and they're over here clicking away cuz usually that does something, yeah? Okay, so this last style is about that, and the last style is, we're going to say, our main menu, target once again, plus, back drop.

[00:03:37]
>> Jen Kramer: What does that mean?
>> Jen Kramer: All right, so here's what we've got going on over here in our HTML, okay? Backdrop's all the way down here at the bottom, outside of the nav tag.
>> Speaker 2: Is it sibling?
>> Jen Kramer: Yeah, so this is the immediate adjacent sibling selector. And so, what this is saying is, when backdrop immediately follows the main menu when it's targeted, yeah?

[00:04:09]
This is the big thing with these CSS selectors, we write them left to right, you read them from right to left, read them from right to left. So when backdrop here, okay? Is an immediate sibling of main menu and its targeted, what are we gonna do here? What we are going to do is we're going to say, position of fixed, okay?

[00:04:37]
And display block, what are those two things going to do? For this little link that's out here all by itself, this weirdo little link with nothing in it, what is it gonna do?
>> Speaker 3: It's gonna cover the rest of that.
>> Jen Kramer: Covers the whole screen, yeah? The whole screen becomes one great big, huge, giant clickable link, all right?

[00:05:02]
And we can then of course position it, left of zero, top of zero, width 100%, height 100%, okay? Z-index,
>> Jen Kramer: Would be 998, because we want it underneath the menu, the close button, all those other things, we want it underneath all of that. But we'll still want it above the webpage, right?

[00:05:34]
Then we can give it a background color.
>> Jen Kramer: Something like rgba 0, 0, 0, 0.85, what is that gonna do for me? Are you all familiar with this notation? What is this gonna do for me?
>> Speaker 2: Transparency.
>> Jen Kramer: A little bit of transparency, so I can kind of see the webpage over there on the side, right?

[00:06:03]
Okay, and then if you want you can also add a cursor, default, cuz you don't want them rolling over and thinking they can click on something and it'll look like the arrow that way, okay? My gosh, this is amazing, isn't it? Wow, and it was a long wait but worth it, right?

[00:06:23]
It's like one of those jokes that takes forever but has the best punch line. Okay, so let's go ahead and refresh, and take a look on what's going on now. So now I have, Uh-huh, okay? Looking more like a Java Script kind of thing? All right? And if I click over here, then the whole thing goes away.

[00:06:45]
Pretty awesome? So see that, I can scroll on down the page, still scrolling down the page, but once I click, it just makes the menu disappear. Nice? I saw some big smiles there as we were going through this target stuff, right? You may have heard of doing this kind of thing before using check box.

[00:07:04]
Check box is another way of doing this, that's kind of a hack way of doing it. The target pseudo class is much cleaner, much nicer? You don't have to put in the form element, the check box kind of thing, that's the way we used to fake an on click, okay?

[00:07:22]
But now that we have target, that's enough here to fake an on click for this kind of situation.
>> Speaker 3: Can you talk a little bit about why you're using the hidden attribute and the backdrop?
>> Jen Kramer: Because first of all, we don't actually want anyone to see that by default.

[00:07:39]
Like we run into a big link somewhere and click it and it does nothing, it's kind of weird, right? The other part of that is for accessibility purposes, so that a screen reader is not reading that out on a page and saying, here is a link you can follow that does absolutely nothing.

[00:07:56]
So we just hide it, yeah. And technically speaking as we was saying earlier, hidden or the tab index, either one of those will do, yeah. But we did belts and suspenders.