Menu Transition, Color & Scrolling

[00:00:00]
>> Now, this is again, a little jarring. It is like, we are here. We are not here, right? We can make this a little bit nicer. The first thing that we can do is add a cursor of pointer on our menu and close that people know that they are, Interactable, so pointer, cursor pointer, right?

[00:00:20]
So now we are getting that little hand icon. That is nice. But again, I would use a button element if I was redoing this. And lastly, let's go ahead and just add a little now transition onto our navigation so that it slides in as opposed to just appearing all of a sudden.

[00:00:36]
So in our now item here, inside our main query, let's add a transition, oops, transition. We want to transition our left property because that's the property that we're changing. So we'll transition left. I will not make this mistake again 0.2 seconds. And let's just say linear is our function here, right?

[00:00:58]
Let's see. Now it slides in and out. It's not too difficult to add these little transitions, as long as you know how to use that transition property. Okay, so like I mentioned, it's much more performance to animate the position from left to right than it is to animate the width.

[00:01:19]
So just keep that in mind if you do transition elements. Okay, we need to add all this code to our speakers file because if we go to our speakers page, it doesn't work, right? So let's just go ahead and copy and paste that over. What I'm going to do, let's grab this the svg code here, collapse that, want that above the CSS Day link.

[00:01:48]
CSS Day, we'll plop that right in here. Okay, so now it's applied. But you'll notice that when we click the menu icon nothing is going on. Any idea why?
>> The script is not applied to this page.
>> Sorry?
>> The script is not applied-
>> Aha, yes, the script is not applied to this page.

[00:02:12]
We wrote it in our index HTML file. So since I don't wanna repeat code here, let's go ahead and make a script file. I'm gonna copy everything inside of here, cut it out. I'll just get rid of this for a second. And then create an index file. I'll just create it in the root.

[00:02:35]
Index.js let's plop it in there. All right, and then all we need to do it's import it to both of our files. So at the bottom of our HTML files, right above that closing body tag, let's just add a script, right? Like we did before. The source is gonna be in the same folder.

[00:02:53]
But it's gonna be index.js just like that, can do that on both pages, like that. Okay, so now it's working. I mean, it looks a little silly cuz we got to fix our colors, but it's working. Okay so the last part here is to just fixed the colors on the speakers page.

[00:03:14]
So in the speakers page, let's go ahead in our CSS. What we wanna do at our breakpoint of 840 pixels that we've defined previously width, and we'll do max-width 840 or nav. We want it to have a background color of text on primary, which is white in this case.

[00:03:39]
Background color var color-text-on-primary. Color-text-on-primary. Let's make sure I get this right. Color-text-on-primary. Okay, did that actually work? It did, cool. You'll notice we can still scroll, when our menu is open which is maybe not the best user experience. So let's go ahead and fix that. To prevent this, I'm gonna set overflow hidden on the body element when our menu is active, right?

[00:04:07]
So first of all write the CSS for this. Let's call this new class body--no-scroll. We don't want you to scroll. We'll just set overflow to hidden, saying any content that's overflowing, what you can currently see, we're just gonna hide it on both the x and y-axis, right? We don't have any overflow on the x-axis right now, but I'm just going to use that overflow shorthand.

[00:04:30]
And now, what we need to do is actually apply this new class to our body element in our JavaScript as we're like hiding and showing the menu, right? So we need to add one more variable here. We'll call it body. And I'm just gonna use the Type Selector to grab the body element doesn't need that class name, although, if we look here, does have a class of body so maybe I'll just leave it.

[00:04:56]
And then, the last thing we need to do here is body.classList. We need to add that body--no-scroll. Body no-scroll. And then, reverse that, remove. I put this in the speaker CSS file. Important, scope is important. So back to the 840 pixel break point here. Here we go. I'll just put it at the top.

[00:05:25]
Okay, now it's accessible to both of our files. Cool, no more overflow scrolling issues. Building responsive sites. Very cognitively heavy. But that's it. If we go and look through our design file, it looks pretty close at this point. I would do a design critique with our designer where they would go through and tell me what to fix.

[00:05:51]
We don't have designers here today, so I say it's good enough.