How to Create an Accessible Full Screen Menu in Bricks

1 0:00:00 Hey, what’s up Inner Circle? Cracka here. Welcome to another exciting tutorial.

This is one of those videos that you’re going to learn a lot of things all at once. So we’re going to be talking about a fully accessible full screen navigation. And when I say fully accessible full screen navigation, you’re going to learn a lot more than that. We’re going to be taking a look at a lot of different things in the process of building this navigation. So I’m just going to go ahead and show you what we’re going to be building.

Now if you take a look at the middle left of the website, you’re going to see a hamburger. And then if I click it, you’re going to have a full screen navigation. Now you may wonder what is special about this. I’ve seen this before and you may be right, but there are a lot of things that we’re going to be doing in here that is going to show you how to do a couple of other things in a couple of other use cases. For example, we have a menu here and this menu is not your regular WordPress menu.

This is a custom navigation that is built using the query loop and custom fields. But these are actually the regular pages and you could also use custom post types. Now the reason I didn’t use custom post type is because I didn’t want to go through the process in this video of setting up custom post types. So I decided to use just the pages. And if you’re going to set it up using custom post types, then you’re going to do exactly the same thing.

The only difference is that you’re going to query the post types. So I’m just going to right click here and we’re going to inspect this. So you see we have this as a ULI list and these are taken from the pages. So as we build this, I’m going to show you how I set this up to determine which of the pages should be in this menu. Being able to manage menus has been some of the most critical decisions people have to make.

Sometimes they are torn in between using the WordPress menu or building their own navigation. But if you’re building your own navigation, how do you manage it without always going into the builder to add or remove more? So in this video, I’m going to show you how to do just that. Another thing we’re going to be taking a look at is the fully accessible feature of this menu. So I’m just going to go out of this menu and then I’m going to click this to reload the page.

Now I’m going to use the keyboard to navigate this menu. So I’m going to go tab and then you can see the focus dial here moving from here to here and then to the hamburger. Now I’m going to hit enter and then once that menu opens I’m just going to hit to navigate. Now once I get to maybe wherever I want to get to, the first thing I want to show you is once I tap outside this menu, this menu is going to close automatically. So once I leave the last link in the menu, as you can see I’m about to tap out so the last link is going to lose focus.

And once I do that, the menu is going to close automatically and the focus is going to jump to the next focusable element on the page, which is this title here. I’m going to hold down Shift-Tab and go back to that menu. And then I’m going to hit Tab, Enter again I mean. And then I’m going to show you that if you hit Escape key while you are in the menu, it’s going to close. And then when you hit Tab again, the focus is going to go to the next focusable element on the page.

And I also want to let you know that this is fully screen reader accessible. So I’m just going to turn on my screen reader. 2 0:03:17 Okay.

Okay. So I’m just going to move all the way. 3 0:03:24 Okay.

1 0:03:25 Let’s come back here again. You can hear it says, open full screen navigation, button collapsed. Now, because I’ve opened it, the open button turns into the close button.

2 0:03:47 Now, when I close it, it says open because I’m still there. Button collapsed. Okay.

So, that’s about what I want to show you. 1 0:04:05 So what you’re going to learn in this video, you’re going to be able to apply it in any kind of components that you build, whether it’s a menu or any other thing that requires accessibility. We’re going to be using CSS, we’re going to be using JavaScript for the accessibility and we’re also going to look at these animations, how to make it happen.

So you can see this animation comes in and they have a stagger effect. While I was planning this tutorial, I was thinking of using Gsap for this. While I was working on it with Gsap, I thought using pure CSS will be the best way to go because of the way people might tend to play with it. You see what I’m doing right now? Trying to do this like this very fast.

Now, if you’re using Gsap to do this, except you know of a very special technique to avoid glitches from happening. Gsap tends to have issues with having to play around things like this. Sometimes some of the things will just disappear and doesn’t come back again. So I decided to scrap the idea of using Gsap. We’re going to use CSS animation for this and I’m going to show you how to make it such that they come in and they stagger.

And then another thing you may have noticed is that this is black okay and then when the menu opens it turns into white to accommodate the color of that. So buckle up we’re gonna go into a real journey. This is the site we’re going to be using to build our full screen navigation. I’m going to go to the back and what I want to do is to create the header so I’m going to go to templates, bricks, templates. I’m going to create the header template I’m going to add a new template and then I’m going to say full screen header.

I’m going to choose my template type to be the header. I’m going to publish that and I’m going to edit with Brics. To create my header, what I’m going to do is to insert a block. I don’t want to use a section so I’m going to go in and insert a block. Inside that block, I’m going to right-click here and insert a div and that is going to be my logo wrapper.

Now I’m going to insert the logo. Now Brics has a logo element but I’m not going to use the logo element. I’m going to use an SVG because of how I want to set up this template. I’m going to explain why later. So I’m going to type SVG.

The reason I want to use SVG is because I want to use the header height to automatically calculate the height of the header because I’m going to use the header height variable in other places while I’m working on the full screen navigation. And if I use the logo element, I’m not going to be able to set a height to the logo element. Okay, but if I do it with the SVG, I’ll be able to set a height to it. So I’m going to select a logo and that is going to be my logo. Now I’m going to come here and insert another div.

So I’m going to insert a div. I didn’t click that, insert div. So we have another div. Now this is going to hold the right hand side of the header, all the content on the right hand side. The menu is on this side.

This my logo is white and I want it to be black. I don’t have a black version so I’m just going to come here to Fill and then I’m going to change it to black. Then right here I want to drop in another div. So I’m going to insert a div and that div is going to be my hamburger. I’m going to call this Open Nav Toggle and then inside there I’m going to drop in another div and that’s going to be the main hamburger.

So this is going to be a button. So I’m going to go to HTML tag, I’m going to go to custom and then I’m going to change it to a button because that’s what we’re going to be using to open this. So before I do any other thing, let me just quickly align this. I’m going to go here to flex direction. I’m going to set it to horizontal row and then I’m going to set it to space between and then I’m going to centralize this for the logo wrap I’m going to set the tag to link, let’s make it link then I’m going to select the link type, I’m just going to use external link and then put a slash there to link back to the home page now you can see that this button has a default style applied to it, I’m going to call it nav toggle and then I’m going to go into the custom CSS and what I want to do is to write roots, so I want to remove that background first of all.

I’m going to say background none so we don’t have that background anymore. Then I’m going to give this a class I’m just going to call it OpenNavHamburger. So I’m going to call it Open. Now what was the class there again? It was NavToggle.

Sorry. So I’m going to call it NavToggle underscore underscore hamburger alright. I don’t know if I got that spelling right. It doesn’t matter. It should be one.

There should be no. Yup. I don’t think there should be. Anyway, let me just call it like that, hamburger. So I’m going to go ahead and I will just click here to copy that.

Then I want to style it from the parent. So I’m going to come all the way here. Formally, I usually use root and then I do it like that. But I don’t think it is really necessary to put that root here because on the front end it’s going to show. .

. I mean since we’re using BEM, we already have the nav toggle, but since we’re using BEM, I don’t think it is always necessary to add this anymore. So I’m just going to leave it like that because it’s just going to be over qualification. So it’s really over specifying it. It’s not really going to look nice in the code.

We all know that these are styling the child element. Because you don’t want to style anything outside the child element in the parent. I’m going to open that and close. I’m going to go ahead. Now I want to create this.

This is what I want to create right now. So let’s go back. I’m going to say width is going to be, I want to make it 33 pixels. Now you can see that we have just two of it, not three as usual. That means we’re going to use before and after for this but for the main div itself, we don’t want to show it.

So what I’m going to do is to give it a height. The height is going to be zero. So the background, I’m going to give let’s say base and then okay so that I think that looks okay let’s look at base medium see how it is maybe I’m just going to go with shade okay okay I think that’s fine shade medium for that one I don’t want it to have a pointer say pointer event, pointer event, none. Now inside the builder we are still seeing it as a very big square. I think that is because of how Brics forces that size inside the builder.

So I’m just going to give it a minimum width to take that off inside the builder. Minimum width 0 and then we’re going to give it a minimum height of 0. And that takes care of that. Now the next thing we want to do is to style the before and after. So I’m going to copy this and I’m going to paste here and close it.

But then we want to style the before and after before. Then I’m going to put a comma and then I’m going to just copy this and then of course with the comma there, I’m going to put after here. So we’re going to style both the before and the after. So I want to give it a content. That’s the first thing.

The content is just going to be that, the position absolute. Did we remember to make this position relative? No, we did not. So I’m just going to put that position relative. All right, let’s go back here.

Now for the background I want it to inherit the background of the parent. So I don’t want to always be setting a background on it. So the background is here. So it’s going to inherit the background of the parent. I’m going to give it a height of 3 pixels and I’m going to give it a width of 80% of the parent.

Now nothing is showing here. I’m not quite sure. Let me select something different and see. So you can see that it’s showing up there. Can you see that?

Let’s go back. We’re going to target the before. If there’s a way to turn off this stuff in Brics, please tell me. Let me know. So I’m just going to copy something there.

Yep, the before. Okay. So we’re going to target just the before. And now we want to move the after down. So I’m going to say transform, translate Y, negative 6 pixels.

But then I have to put a rotate value because we are going to rotate this on hover. And in order for you to rotate it on hover, the normal state also needs to have a rotate. So we’re just going to make that rotate 0. Okay. Degree.

You have to put degree there and then that. So I’m just going to copy this and this will be the after. The after will move not negative 6 pixel but 6 pixel. So if I come here you can see we already have that. So I’m going to save this.

Now we’re not done with the header. Okay so this is our main header so I’m just going to write header here. And what I want here right now is to give this header a height. So what I’m going to do is I’m just going to give this a class. I’m just going to give it maybe IC header, Unicircle header.

Now I want to declare some local variables here. Now these variables, I want to use them to determine my header height. I’m not a fan of giving the header height a specific height. I don’t want to go into the height section and put a header height. I have a right now.

So I’m going to write root. I’m going to open and close. The first thing I want to declare is my logo height. So one of the things that’s going to be very pivotal in the calculation of your header height will be the height of the logo. I’m going to give it 50 pixels.

Then I’m going to declare the top and bottom padding of the header. So I’m just going to say header at Y. And then I’m going to hook into ACSS. It’s a great feature. It makes writing this thing very easy.

And then for the header height, once we have those two variables, we’re going to use those two variables to declare the header height. And then we’re going to use a calc function. So that is going to do header pad Y, then I’m going to do times 2 plus logo height. All right. Powerful.

That is very powerful. You can see that variable expansion that is being controlled by ACSS. I think I might just need to add a closing bracket to that. So I need to close that properly. So I’m going to put another one here and then I’m going to put another one here.

Because I want this variable, these two to be grouped together just like that, okay, before I add it to this. But that variable expansion is very handy. So it gives a very powerful calculation unit. So I’m going to go to the header and then I’m going to go into the layout and the height and then I’m just going to say, Header, Height. Okay, Enter.

And then it’s going to give me my header padding, what I want to do is just to give it that header pad Y there. Then I’m going to copy the same thing and put here. That is how I have my header height. Let’s see my container. It’s here.

The header. I think I like to centralize all this, you know, these. I like it to be centered. I’m just going to do this and then I’m going to center it just like that. Okay.

So that centers this properly in case there was any doubt that it wasn’t centered. And then because we are not using a section, so we don’t have our padding. So I’m just going to go back in there and just going to right-click and select the section pad X here. So we have our padding for all screen sizes. So that’s beautiful.

Now I’m going to save that. Now the thing is that we don’t even need to put that header height variable that we created here in that calculated function. Oh dear, collapse, collapse. So we’re going to be using this in other places because we have a logo height, we have a header part Y, so we already have a height for the header without actually putting it in. So you really, really do not need to put that value.

So I’m just going to save this. Then I’m going to preview on the front end to see what is going on here. So we have this. And so the clicking aspect is what we are going to be dealing with. But let’s see if there’s any other thing we need to deal with.

All right, so before we deal with the clicking aspect, we’re going to build out every other thing that has to do with the menu. So we have this container here. Then the next thing we’re going to do is to insert a block here. Now that is going to be our full screen menu. I’m going to right click here and then I’m going to insert a block right there.

So that block is going to be our full screen navigation. I’m just going to rename this to full screen nav. I’m going to give it a class of full screen nav wrapper. It’s going to be the overall wrapper for the full screen navigation. Now don’t worry that it’s here because it doesn’t matter the layout option we choose here.

This is not going to be inside here like that. The first thing I want to do is to give it a background. So I’m just going to go in, just give it a background. So I’m just going to give it a background of that. That is the primary color.

And I’m going to go to the layout and then I’m going to set the position to fixed. And then the top is going to be 0, 0, 0. Everywhere is going to be 0. And for the Z-Index, I think I’m going to move it as the index of like 600 because I just don’t want, I mean, sorry, 200. I don’t want to, I kind of don’t want certain things to be above it.

But I’m going to go to the Logo Wrapper and set the Z-Index of the Logo Wrapper to say like maybe 9999, something like that. Okay. Because I want that to always be on top of it because once we open it like this, we want the logo to be on top. I want to right click on this and insert another block. So I’m going to insert a block.

As you can see, that is the block. But I don’t want that block to be on top, right there where you have the logo because that’s where I’m going to be putting my content. I want it to start right below the header. And that is where the power of the header height comes in. I’m going to go in here and then I’m going to set a top padding of header height.

And then it pushes it, it gives it a padding that is exactly equal to the height of the header. And this is really dynamic. That is because even if I want to go and change the height of my logo or the size of the paddings, everything is going to adjust automatically so we won’t have any issues with that. I also want to give it some margins, some padding left and right. I’m going to right click here and give it a space M.

Then on this side, because it’s the overall container of the full screen navigation, I want it to have the same padding as a section left and right. I’m going to right click here and go to section. I’m going to do that there, go to section and then choose that left and right section padding. You can see that the content of the menu is going to align to the content of the page. I’m going to save that so far.

Now even if it is on top of, I mean even if the header is, the padding moves the content, but the header itself is also on top in the builder. Now if you’re working like this, you want a situation what you’re building is not getting in the way of other things that you’re building. So right now, if I wanted to walk on my header, this full screen is always going to get in the way. So right inside the builder, we need to find a way to move it away from the header. So I’m going to go to the custom CSS, and then I’m going to say, data builder mode equal to custom.

Now that is because I’ve set my builder mode to custom. Now, if you go to the back of WordPress, go to Bricks Settings and you come here. I think, let’s see, Builder. You see, I’ve set my builder mode to custom. So you have different builder modes.

So you have builder mode, builder mode. So I’ve set mine to custom. So if you hit the F12 while you’re inside the builder and you come to the body, you’re going to see data builder mode equals the custom. But then, perhaps if we use just builder mode as the attribute without putting anything it’s still going to work. That is in case anyone comes to change.

So I’m just going to say data builder mode and then I’m going to close that, okay, square bracket. And then I’m going to move, give it a margin top of header height. Ok so it moves it. So now this only happens in the builder. So if you have anything you want to apply CSS to right in the builder, just only in the builder, this is how you do it by using data builder mode.

Now so this block here is going to be our inner wrap and then I’m going to give it a class of fullscreen-nav__innerwrap. So that’s going to be our fullscreen inner wrap that’s going to have the contents. And then for that, the height is going to be 100 VH. So I’m just going to go in there and give it 100 VH. And the reason for this inner wrap is that it is going to contain the contents of the menu, but it also going to serve as the scroll wrapper because you want to be able to scroll menu when the contents overflows.

So I’m going to go into the custom CSS and then this is where I want to write like that one. This is where I want to write that because you can have overflow Y because there’s overflow right here but overflow Y is not there. So you have overflow. That deals with both the X and the Y but I want to specifically say overflow dash y and then I’m gonna say scroll and then you have a very big ugly scroll bar coming in there and I don’t want that. I hate the ugly scroll bars.

I want to take it off. So I’m going to just write some CSS to take off, to not take off but to beautify it a little bit so I’m gonna write some CSS there. I’m going to say root and I’m going to say dash webkit dash scrollbar track and I’m going to copy this and we’re going to deal with three things. The scrollbar track, the scrollbar itself and then the scrollbar thumb. For the scrollbar track, I’m going to give it a background of transparent.

For this, I’m going to give it a width of 5 pixels. Okay, so we already have somewhere we’re going. 5 pixels. Let’s try 10. So 5 should be okay.

Even 10 is not showing in the builder. Something is taking effect. I’m going to give this a background color, the thumb, of grey. Let’s use grey for now. So nothing is showing there.

So let’s change this to background color. We don’t have items. Now when we have items, we’re going to see that scroll bar here. Alright. So what I’m going to do is to momentarily give this a background.

So I will be sure that we’re doing the right thing. So I’m just going to give it that, something like that black there. Let’s see what it looks like on the front end. Alright, so we are on point. Okay, I’m just going to take that away.

Inside here, now you can see that this goes beyond the side width. So what I’m going to do is to put in a container. I’m going to insert a container here. I don’t know why that doesn’t do on the first click. So that is going to contain the content.

Now, you may wonder why do we have to have an inner wrap and then have a container? The inner wrap will control the scrolling. It’s very important because the inner wrap will control the scrolling. It is very important because the inner wrap will control the scrolling. So the content will be all be inside this container.

And this is the full screen. So this structure is very important, especially it may not seem like it matters right now, but when you’re walking, so when we start going towards the mobile menu, if you don’t do it like this, I’m not saying that you must do it like this, but I’ve found that if I don’t do it like this, I have issues with the scrolling. I’m going to do this and then I’m going to put three columns here which is going to house like this. Those three columns but I’m not going to use columns for it. I’m going to use flexbox.

I’m just going to go to grid I meant to say. Let me just turn that off for now. I’m full screen, that’s how I spelled it. Nav, then that will be my content wrap. Okay, so that’s wrapping the content.

What was this called? This was called inner wrap, this is the content wrap. Then I’m going to display it as grid. Sorry, and then I need a grid 3. And then I want to give it a gap of grid gap.

Then for these columns, I want to give them a class. So I’m just going to call this Full Screen Nav Column. Then inside here, before I do anything, I’m just going to work on this one. I’m going to throw in a heading there. I’m just going to go.

That heading is going to have a class of Full Screen Nav Title. Let me call it Heading. Alright and it is an H3 so we’re going to leave it as H3 and I’m going to go into the styling of the text I’m just going to give it a small text size. I’m going to give it a color of white and then for the fonts I’m going to choose 500 and I’m going to make it all caps and then I’m going to give it a layer spacing of 1 I want doesn’t seem to cut it. I’m going to give it 4 for what I want to use it for and then I’m just going to call this one side map so that’s the first piece for the columns.

I’m going to just do that, save it, then remove this other two and duplicate this. So we have that. I’m going to rename this, say, Address or Headquarter. Then I’m going to call this Social. I’m going to save that.

Let’s look at the front end what happens. So that’s how it looks and it’s right there at the very top. We need it to center, to be centered. And to make it centered, I’m just going to select this container which we haven’t applied any styling to. I’m going to go to the layout.

I’m going to change this to auto. I’m going to change this to auto. And then for the space here, I’m going to give it a space M. Space M, that is the padding I meant. So that brings it to the space M.

How did I choose XXL? M. Okay. So for my headquarter, I’m going to just drop in a basic text. I’m just going to drop that in.

I pinned it instead of dropping it. Alright, I dropped that in. I’m going to give it a class of FullscreenNavText. And the color, I want to make it white. I want it to just have a little bit just as big as that.

Then I’m just going to change this text. I’m going to copy a text from somewhere here so that’s the address and then I’m going to duplicate this. I want to turn this to the phone I’m just going to put a phone number there. That phone number I want to link it so I’m going to say link to external URL and then I’m going to copy this and then this is going to be tell and I’m going to put that there. Then I want this to have an area level so I want it to be Colors On so I’m just going to put that Colors On in a span so I’m just going to say Colors On on that because I want the screen reader to read it out like this but I want this to be in a span and I want that to close up.

Yep Close span. Alright. Now what I want to do is to give this span a hidden accessible class from ACSS. So I’m just going to call it class equal to double that and then I’m just going to say hidden accessible. Did I spell that right?

Oh yeah, something was wrong there. That was equal to. Alright. So now you can see that hidden accessible stuff showing there. So but on the front end, it’s just going to show properly.

And now we have our hover effect for the links here being a color that is the background color and we don’t want that. I want it to be the action color. So what I’m going to do is to select this class which we already have some styling on. I’m going to go to the custom CSS. I’m just going to say A because I’m going to be targeting the links and then I’m going to say roots.

So the link, the root that is a link and then I’m just going to say color action. Let’s save and see if it works. I’ve not made any So it’s action, no? So that is supposed to be hover. Okay.

Okay. Hover. Now unfortunately bricks has been messing up a lot. So, yep, the hover state is that color. So we need to give some spacing here.

So I have this, this. I’m going to select this. I’m going to go and give it a row gap of space X, X. So I want it to be a bit smaller than the normal content gap. So let’s look at how that looks here.

All right, so that looks great. For the heading, I want to move it a bit away from it. Because of that, I think I’m going to give it. . .

Now, I don’t want to group. . . Now, I could group this and use this to separate the heading and this some more, but let me just give it a margin bottom. Okay, I’m going to go there.

You know what, on a second thought, I think it’s always a good practice to just put this in a div. I’m just going to wrap this with a div and then I’m going to put this there. Okay. So that is going to enable me to separate the two of them in a good way, in a better way. So I’m just going to say, I’m going to call this a content gap and then this div is going to have that.

I’m going to set it to flex and then this div is going to have that space xl so I have my nice content gap there so let’s look at the front end so yeah so that is separated I’m not quite sure why yeah because I changed that to flex and it’s behaving like that so let’s look at it again save oh dear what is going on here? So this, this. So what else you want from me? So yeah, so there’s been this issue with bricks lately but I dare you, if I put another element for example, I’m going to insert a div here. Once I insert that div, I think inserting a new element will just make the whole thing.

I don’t know. So let’s see. Let’s try going directly to the page. So why is it behaving like this? This is a bricks issue.

Okay, so what I’m going to do, I’m going to ignore that for now. We’re going to deal with that later. But what if I change this to grid at once? Okay, just to deal with this issue. Just changing it to grid.

See if that works. Alright that works. So let’s just leave it at grid and then the gap will be that XS. It’s going to save that. So we’ve separated those contents like that.

So the next thing I want to do is to create the social handles. So I’m going to copy this for the socials. And you know as a matter of fact I’m going to copy the whole of this div. I’m going to go here and paste that div. Yep, allow to paste.

I’m going to delete. Now I have to move my picture from here. I’ll make it smaller because it’s getting in the way. Okay, so that seems better. I’m going to remove this.

I’m just going to call this social. That is going to be one of the socials. Maybe this is going to be Facebook. Then I’m going to turn this to Visit Us on Facebook. Now that is the advantage of using this method instead of using the area label because a lot of times when you duplicate it you may forget to change the area label but here all you need to do is just to change this and you can’t forget because you are seeing it that is you’re dealing with it okay that seems to be that visit us was so yeah I made a mistake in the visitors.

Now I’m going to duplicate this and this is going to be Twitter and I’m just going to change this to Twitter and then I’m going to duplicate this and this is going to be Instagram. I’m going to change this to Instagram. Let’s save that and see how it looks on the front end. The next thing we want to do is to build this menu and this menu we’re going to build it using the pages but it’s going to be a custom menu. So we are going to build it and limit how many we want to have, how many pages we want to have.

So what I’m going to do is I’m going to go to Metabox and then I’m going to show you under custom fields. You’re going to see I’ve created a custom field for pages. So I already created a custom field. All that is in that field is just one field. It’s called menu item.

And then the slug is menu item. And the type is switch. I’ve already set up some pages to show up. So you can see that I’ve turned this on for some of the pages and some pages I haven’t turned it on. So I’m going to be working with that.

So I have a div here. This div is going to be my nav UL. I’m going to insert another div inside it. That div is going to be my nav LI. And then I think I’m going to drop in a text, a basic text.

So I’m going to drop in a basic text. That’s going to be my nav A. That is a link. And then I’m going to just quickly change it to a link. We’re going to choose dynamic data and then I’m going to choose a post URL or post link.

And then here I want to change this to, now this is going to be a post title. Now nothing is going to show up yet. I still need to apply this class, this nav full screen nav texts. Yep, I’ve not built the loop yet, so I have to come here, okay, the LI, where I’m going to apply my loop. So I’m going to say use query loop and then I’m just going to change this to page.

And it’s going to load up pages. Page 1, 2, 3. So that is post, but at one page. Let’s look at the front end. So the front end actually gives me pages.

So based on all these pages I have here. But I don’t want all of them to show. I want the ones that I’ve chosen. I’ve chosen to show up. So I’m going to come here to meta query and then the name of my meta box custom field.

It’s menu item. So I’m just going to copy that menu item. Now this switch returns a value of 1 or 0. So if it is 1 it means it’s true. So I’m going to come here to meta query.

I’m going to write meta query menu item. The meta value has to be 1. So now if I go to the front end, it’s already showing up here. You can see here that this already have a lot of spacing for this div. So what I’m going to do is I’m going to take away that spacing because I don’t want it to have now.

Let’s go to the front end and see how it looks. That spacing needs to go. And for this particular one, let’s see. Okay, so we still have the same problem. So I’m going to take that.

Let’s leave it as grid. No spacing. We still have a lot of spacing. So it has a default spacing. I’m going to give that spacing zero.

Now the reason I want, because I want to use the class for the text to give all of them a uniform spacing. Now, I’m going to select that class. I’m going to give it a padding. I’m going to go there and give it a padding of XS. Then here, XS.

I have that padding. Why not? We have the padding. So this. .

. Yup, so it should have that padding. So something is stopping it. I’m going to save it again. Let’s take a look.

So it’s really unfortunate that Bricks is messing me up right now. This is a very simple thing. So if I remove that. So I’m going to remove that. That just works.

I mean if I save this, you see this doesn’t have any padding. But in the builder it doesn’t have, but here it has. So I’m going to check why it has here. It’s not supposed to have. So because we’re still having the row gap, so let’s see, the row gap for this.

So you see that we have set a row gap of zero but it’s still showing this row gap. So something is definitely wrong but what I’m going to do is that I’m going to keep walking and it’s going to correct itself as we go on. So I’m going to return that padding XS to here. See, I’m going to do that. Once we start adding other stuff, it’s going to correct.

I think it’s a really serious issue that we’re having with bricks right here. You can see that we have that padding there that is not applying to these other ones. It shows that there is a padding but it’s not showing up here. Now so let’s see what the problem is. Let’s deal with it.

So what I’m going to do is to make sure I change this to UL. So I’m going to go here, change it to UL. I’m going to go into the style here. When you change this to UL, it usually gives a padding of 40 pixels. I’m going to move that in.

I’m going to change this to an LI. Now this UL also usually has a margin up and down by default. So what I’m going to do is just go in and take that out. So let’s save this and see if things are going to clear up here. So things are still not clearing up here.

So we have our paddings inter, you know, they are sort of collapsing in on each other where they are not supposed to. Now let’s go back to this. So this is our. . .

Yep. So we go back to the button here. So what we want to do is that we’re going to give. . .

Now first of all we’re going to give this full screen nav an ID. So I’m just going to deselect that and then I’m going to edit the ID. So I want to call it. . .

I want us to call it full screen-nav-wrapper. And the reason I’m giving it this ID, I want to be able to reference it easily because it’s easy to remember. Now, I want to go here for accessibility, I will want to go to this nav toggle button. And we’re going to go to the attributes. Then we want to give it an area control to show what element it controls.

And that is going to be this. Sorry, I’m not supposed to put that, the ID of the elements that it controls. Then I’m going to give it another area attribute which is the area level and then the area level is going to be open full screen navigation. So we give it an area level and area controls. We’re going to save that.

So now what I’m going to do, I’m just going to remove this and I’m going to change this to a block. So I’m going to change this to a block to see if it’s going to solve my problem. Or what I will do is I’m going to get rid of this completely. So let me insert another block. Insert a block and then I’m just going to move these in here to see if that solves my problem.

Bricks might be having some glitches there. So I have these let’s see if So I’m not having any issues there when I come here also and I’m gonna do the same thing here Okay, so I’m just gonna insert a block Then I’m gonna move these here into the block so let’s do that take away this it seems something is going wrong somewhere. So for this, the nav UL and all of them should have been blocks. So I’m just going to right click. Not that they should have been, but I’m noticing a problem with this.

So I’m just going to call this a nav UL. Then I’m going to do the same thing here, insert a block and this is going to be nav li. So I’m just going to repeat just to solve the issues I’m having. I’m going to move all this in here. But this time around what I’m going to do is, okay so let me apply that same query loop here on this.

So I’m just going to apply the query loop. I’m going to say page. I’m going to go all the way here, middle query. Let’s hope I still have what I copied and one. So I still have my stuff there and I’m gonna go ahead and check what I did here on the styling 000 on the UL.

I’m gonna go there now before I do that I have to give it a class fullscreen nav list. If we go back and come back you should be able to see. Oh have we changed the HTML tag to UL yep so you can see so i’m going to change this to that 0 0 now you can see that that is separating have you noticed? let’s see what is going on in the front end so you can see that there is a sort of a separation ok even though something is happening here i’m having we’re going to deal with that so uh. .

. that is because this is still here then for this one do we have any style on it uh. . . not really so we didn’t have any style in this.

I’m just going to take that off, take this off and save and then, yep, we should be good. All right, so you see everything is working perfectly. The spacing are here. So there seems to be a bug with the D stuff because of changing it to Flexbox and trying to change it back. I think we sorted that out.

So we have these, all of them are spaced, but there are two spaced out so what I’m going to do now is I’m going to select that and for these I want it to be a bit smaller so I’m just going to say space XS plus or not plus times I want to times it by 0. 7 and hit enter so it’s going to give me a calculated value okay calc that times 0. 7 that gives it makes it a bit smaller I could go in and dial it down to 0. 5 so I reduce this gap by let’s say 50%. Let’s see if that works well.

I’m saving that and the front end should refresh. Yup, I think that looks better. So now I think this is just too, the spacing here is just too much. I’m going to go back into that, the heading. Yup, that’s the column spacing.

I’m just going to call it content gap let’s see if it works everything that we need here we have it so i’m going to collapse everything and open them again to have my see how i’m organizing this stuff so i’m gonna go responsive mode now so at this breakpoint i want it to be grid one from here and that’s what i want from that break point all the way down to here. We have this listed on the side. I want a separation for all this on that break point. So the container, I’m going to give it a row gap of container gap. I want it to be a bit wider.

I think here it was grid gap. Over here, I just need it to move further away from each other. So by the time we get here, things look better. Alright. So let’s see and test that scrolling thing.

So I’m going to go responsive. Let’s move this like that. I’m going to click here. I’m going to select the smallest screen size. You can see that I’m scrolling if it is small.

So let me do responsive, do something very small, then bring this all the way in. You can see I’m able to scroll. Looks good. So that padding top that we gave there enables the content to stay right under the logo. So now you can see my scroll bar is not looking bad.

So now there is one problem here. Let’s say I go to another page. Okay. I’m going to open another page right now in Brics. Let’s see.

Let’s open this page. Okay. Let’s go edit with Brics. Now when I go to another page to edit, you see my full screen menu is just all over the place. So see, I’m adding an item here.

I can’t even see what I’m working with because the full screen menu covers, it’s going to be covering every page that this header applies to. Now this is the default header. I haven’t set a condition to it yet. So I’m going to go ahead and set a condition. Template settings, header, you have that header there, which is okay.

Condition, I want you to apply to entire website. I think that’s just all. I’m going to save it. Okay. So but the problem now is in other pages, it’s covering everywhere.

Now we don’t want that. So how to solve this problem? One of the ways to solve it is just to put maybe Display None but that is not effective because every time you have to go and remove that Display None, find a way to make it Display None in the builder and then you know. So there’s a better solution. Now I want to warn that this solution, we’re going to change it to a template and set it as a short code.

But what I found out that when styles are applied via the ID, they don’t quite work well with this solution. So that is why I made sure that all the stylings, if I’m going to apply style to any elements, I have to make sure that it’s on the class. So that worked very well. So what I’m going to do right now is I’m going to right-click this and then I’m going to save it as a template. I’m going to call it full screen navigation and then the template type I’m going to save it as a section and I’m going to save as template.

Now I’m going to close this and then I’m going to delete this. What I want to do is I’m going to save this and then I’m going to refresh my page okay. Then I’m going to go to the back end Brics template and here I have my full screen navigation template. I’m going to copy the short code, go back here. So where we had it was just there.

After the container, I’m going to drop in a short code and then I’m going to paste that short code here. So now my header appears right here. Now if I save this and then I go to my page, let’s say I go to a page and say Edit with Bricks, let’s go to a page and then I’m going to just say Edit with Bricks, you will see that it still shows but the beautiful thing about this is a short code so I can say don’t render in builder and it’s going to hide it in builder. So what you want is you want to go in and also set the width and the height to zero because you don’t want it to be pushing. Because it’s right here, you don’t want it to be pushing what you have here to the side.

So just the width of the short code doesn’t matter. So things are still going to work well. Now if I refresh this, you’re going to see it no longer shows in the builder, but then it still shows on the front. Now, let me, where did we do that? I’m going to refresh this.

You can see it still shows up. So now I can go ahead and preview the front end and you’re going to see that it still shows up on the front end, but it doesn’t show in the builder. Now if you want to edit it, all you need to do is to go to template and then edit the full screen navigation. We’re going to go there and edit it. So we no longer have to be in the header template to edit the full screen navigation.

So right now we are in each own template and we can edit it just the way we want to edit it. And whenever we are in the header template, click there, you can see that the header template doesn’t have any issue. We can still walk on the header without having to worry about that full screen where we can safely work with it right here. So right now we want to move to the next stage of this which is the first thing we want to do is we want to place let me delete stuff that we don’t need here. Now we want to place this here, this right here.

This is the hamburger okay it’s in the header build it’s in the header template not in the full screen so that hamburger is in the header so we’re in the header right now so I’m gonna select it make sure I select the class go to CSS so I think you know at this point you might wanna just label your CSS okay okay and then we’re gonna all come all the way down here and then I’m just gonna say place hamburger. Now before we style the hamburger, what I’m going to do is I think I’ll need to get this out of the way. So let’s get this out of the way. Everything about how the full screen works, the functionality from hiding it to showing it, I’m going to write it inside an external CSS. So I’m going to go back here to script organizer, then I’m going to add a block.

You could use WP code box or any other one you use. I’m going to call it full screen navigation code or script in the header and footer location. The header location will be my CSS and the footer location will be my JavaScript. And then I’m going to publish this. Then I’m going to start by saying hide nav by default.

That is the first thing I want to do. So I want to hide the navigation by default. And what was the class again? Selected FullscreenNavWrapper. I’m going to copy that.

The first thing I want to do is give visibility hidden. I’m going to say transform translateX and I want it to be a negative hundred percent now percent. So I’m going to do that and I’m going to go to the front end and refresh and we don’t see it. But the problem is if I come here and refresh, let’s see what is going to happen. Whether we’re going to see it inside the builder also.

We don’t see it either but we need to work with it. We need to see it. So what I’m going to do is I’m going to add a selector here. I’m going to say bricks-is front end. Okay now, so earlier we saw that when you want something to apply only in the builder, you use the attribute selector builder mode.

But now if you want something to apply only in the front end and you don’t want it to affect the builder, you’re going to use this prefix bricks is front end. That’s because if you go to the front end and you look at the body, there’s a class called bricks is front end just as we looked at the body inside the builder and we saw that builder mode. So I’m going to do this, I’m going to save this and when I refresh the front end, we’re still not going to see it but inside the builder, if I refresh the builder then we are going to see it because that is not supposed to apply to the builder. Alright, so I’m just going to go ahead and add other properties that I want. Now I want to give it a transition of one second because of the way the animation is.

Now look at this animation. See how it moves slowly and fast. Now the way we’re going to do it, we’re going to need that animation, that transition to be up to a second to give us this effect. And then to have that type of effect, we need to have, let’s just give it a transition timing function. First of all, I’m going to give it linear.

Then we’re going to create another CSS that will show full screen nav. What we want to do is when we’re using JavaScript, we want to add a class to the body. Now, we’re going to use that class to target this full screen navigation and then show it once a class is added to the body. We’re not writing a JavaScript yet, but the class I want to add to the body is going to be FullscreenIsActive. That is what I want to apply to the body.

Then I’m just going to give that class the FullscreenWrapper class. Then I’m going to basically reverse these two. This is going to be visible. The reason you use visibility hidden when you don’t have a display on is to hide it from, you know, take it out from the screen readers and also remove it from the tab index. So, you know, you can’t tab it while it is hidden.

So I’m going to go to the front end. I’m going to refresh and then I’m going to open my inspector. Now I’m going to inspect the DOM to look for that full screen. If I go to the body and add a class of full screen is active. You can see it comes in.

So let’s do that. Now I can toggle that class from here. You see? See how it moves in? Now let’s go ahead and select it and go into the timing function.

Now what happens is if I turn off this, you see how it moves slowly? Now we want to change the timing function and we’re going to select something that looks like. . . We want it to move slowly, move fast and then move slowly.

Right? So we’re going to move to see which one looks like what we want. Ok so what you want is something that comes like this. Slow but you don’t want it to be too. .

. yeah, something like that. See, slowly. Now if I turn this thing off and on. See, slow, fast.

Slow, fast. So you want something close to this, okay? But I did a bit of tweaking in my own and then I had a value and I’m going to replace that timing function with the value that I had and that gave me the feel that I needed. So I’m going to save this and then go back to the front end. So what I’m going to do is that I’m just going to copy this timing function, the whole of this with that new one to see how it looks like.

Alright, see? Another thing is that we still need to move this down here. Let’s work on that. I’m going to go to this header, select that, the nav toggle and we want to move it all the way down to the side. But now what we want to do is that we want to move it only at a certain screen point because at mobile we still want it to come back here.

If you see this, now if I go responsive like that, you can see on mobile it comes back. So you can see at this point it jumps back. Okay. It jumps back. All right.

So we don’t want to just remove it down there but we want to do it at the break point. So we want it to be at a minimum width of 767 or 68. So I’m just going to say at media, minimum width, 767 pixels. I’m going to say root, open, close. We’re going to start with a position and that position is going to be fixed.

The left is going to be zero. Now what I want to do is I want to give it a background so we can see it’s kind of hidden. Background, red. You know what? Let’s take this and just make that red here.

So I want the top to be 50% from the top. So it’s moving 50% from the top and going to do transform, translate. I’m going to move it just trying to center it using that old trick in the book, negative 50% just to center it properly. Now what I want to do is that I don’t want it to. .

. Now if I save it and then we go to the front end to check what is going on. Let’s go to the front end. Go to the front end. Okay, I’m not seeing it here but I saw it here.

Why am I not seeing it here? It means the Z-index is a problem. I’m going to come all the way up here to change the Z-index. I’m just going to do to 250 pixels. Let’s see if it’s going to show up.

It shows up. Now we want it to flush all the way here. Look at that sample height moves away from here. What I’m going to do is I’m going to come here, then I’m going to declare a width that we’re going to use because once we have that width like this, now on breakpoints, when we’re moving in, you’re going to see that the contents, they will collapse in on it. So for us to prevent that, we need to make sure that the section padding is the same as the width of this so that it does not have any issues overlapping with the content.

And also the content of the menu itself cannot go beyond the width. It always has to stay. You can see once that thing goes, it moves to where it’s supposed to be. You can see that that’s because of the transition effect. So that’s what we want to do.

We want to give it a width and that width we want to define it as a variable. So I’m going to go to this code editor and then I want to define it at a certain break point also and it’s going to be the same break point as this. So I’m just going to take the whole of this. I’m going to do that. You know what?

That variable, let’s make it available. I’m just going to say, roots. I’m going to declare that variable. I’m going to say, toggle width. I’m going to put that as a CSS variable.

I’m going to save that. I’m going to take this, this toggle width and I’m going to give it a width. So I’m just going to give it a width, toggle width. So let’s see what happens. Nothing is showing in the builder.

So we’re going to take a look at this. Let this refresh. Okay the problem is here. I did that twice. That is not supposed to be two times.

It’s supposed to be one. So, I have that and look for this stuff here, toggle button and here we have our width. So what we need to move it now, to move it, remember we gave it a height of 0 before. So that is why we can, I think that’s why we couldn’t see. So we’re going to give the height of auto and then we’re going to give it a background of red.

Okay. Let’s just give it a height of let’s say 80 pixels. Okay. So you can see it actually has the width Okay. Now so what I’m going to do is to move this to the center of it.

Just at the center here so what is gonna happen is, I’m gonna just say display grid. I’m gonna place the items center. And if I save this and we go to the front end again, you’re going to see that it moves to the center. Now what we need to do is to make sure that we don’t have this problem where the sections collapse in on it. So we’re going to make sure that all the section on the website has a left padding that is where I’m going to put it in the media query because this, you see, the positioning is only at a minimum width of 767.

So we want to make sure that that’s a minimum width or section. So sections in Brics are DRXE section and then we’re going to save that and we’re going to go to the front and now take a look at this. So you see it’s overlapping but if I refresh that, you can see that all the section automatically have that. I’m going to have to do that here with the left padding of the header. So I’m going to select the header.

Okay, I’m going to go there. What we had here was the section pad. I’m just going to call it dash dash toggle. Now here we will have to set it back on the breakpoint. section padding, section yep, so have that normal section is, but then we take this IC header class and then we come here and say IC header and then we’re going to say padding.

Actually this is wrong, no need to repeat it. I’m just gonna say comma here and say IC dash header and that should do that. So when we come here and refresh the header should also align. So I’m going to refresh here and let’s see. For some reason it is not aligning.

That means it’s being overwritten padding list. So you see that it’s being crossed out because the builder settings has preeminence over it. So let’s see how can we do that? I could just try to see if I can be a little bit more specific. We’ll just see brxcblock.

To see if I can increase the specificity without using importance. I’m going to do that and save this and I’m going to refresh it again. Let’s see. All right. That higher specificity overrode the original.

You see what is happening here? When it moves to here, everything falls back and then when it comes in, everything just gives room. So that is what we want. Okay, so that’s out of the way. Another thing we want is, let’s see now, let me come here again and then apply the class of full screen is active to the body.

The problem is that once that happens, the body is still scrolling. You can see we want to disable scrolling once the full screen is active. So what I’m going to do is I’m going to come here and then I’m going to say full screen is active. So it should be body. The full screen is active.

I’m just going to say overflow hidden. So I’m going to do that and we’re going to refresh this and we’re going to add that class to the body again. Full screen is active. You can see that the body is no longer. Now if I add that class, when I remove it, the scrolling resumes.

But once I add it, you see the scroll bar goes off and you can scroll. So that is exactly what we want to achieve. The next thing we want to do is, once the screen is active, we want this to open into a cross. Let’s go back there and what we want to style is this hamburger. I’m going to copy that but I want to put it here so everything that happens when the full screen is active.

So I’m going to say disable scroll on menu open. This is going to be expand hamburger. So what we want to do is we want it to rotate. But it’s not just the hamburger, it’s going to be the before. And we’re going to say transform.

We’re going to do translate because it already has a translate assigned to it. So it has a translate Y which is going to remain zero. We’re going to rotate 45 degrees and then we’re going to be the negative, the negative direction. I’m going to save that. Another thing we notice is that the color needs to also change.

We want the color to change to white. Let’s just put it here. Full screen, let’s just copy this. I’m going to copy that, paste here. I don’t like this pop-ups.

So I’m going to move this away and then I’m going to change this color. So the background color is going to be just change it to white. So let’s see. I’m going to refresh this and then we’re going to see what happens. So I’m going to go ahead and add that class again.

Full screen is active. that it changes to white. We need a transition on it. So we’re going to take this NavToggle hamburger and I’m just going to give it a transition of 0. 6 seconds.

Make that. Then let’s look at it. And we’re going to quickly add that class. Full screen is active. So let’s do that.

You can see we have that transition. It moves white. Another thing is when this logo, when we do it, we want the logo also to be white. But we had some styling, you know, there, right? We gave it a Z index.

Let’s just give it a class. Okay. So let’s see. So if we look at this, the SVG has, let’s see what has the field, the G, the path, all of them have the field, you can change the color from here. So what I’m going to do is I’m just going to select the logo, go into the custom CSS of the logo.

So I think everything that has to do with changes made by that navigation should be here. So I will like to give this a class. So I’m just going to call this site logo. And I will have to remove this styling from here and then put it on the class because we want to be able to override it easily. I’m going to save it and then I’m going to take this and I’m going to go back there.

I’m really idling on my commenting. Okay, so just fill it in for me. Change logo color and then that’s going to be full screen is active. site logo. Then it’s not just a side logo, we have to target the path.

Okay? The path. That’s the path. See? When we were looking at it, there’s a path that has that color.

So we’re just going to give it, it’s called feel. So what you do is you give it the right property. So feel is going to be white. And then side logo is going to have a transition and not just the site logo, the path itself is going to have a transition. Same transition of 0.

6 seconds and we want to give it a transition delay because now when it opens, see where this happens, you want it to delay a little bit, sorry, you want it to delay a little bit, just a little bit. Now the whole of this animation takes one minute. So we want to give it a transition duration of 0. 6 seconds. I give it a delay of 3.

That’s just about one minute. So we’re going to give it a transition. Then we’re going to give it a transition delay of 0. 3 seconds. And then the timing function, we’re just going to give it about the same kind of timing function that we gave this.

So let’s copy it. So we have everything in sync. And let’s see what happens. So I’m going to refresh this. What I want to do is the body, okay?

Full screen is active. So now we have full screen is active but this doesn’t change. So we have to look. So you see that the field is being canceled out. So I will need to enforce it.

So I’m just going to go back in and just add important there. Just to save that. Let’s look at it again. You just want to make sure that things are working the way they are supposed to work. Full screen.

Okay, good. The important made it to work. Sometimes if you can do it without doing the importance, see? All right, so it does that. So the timing function, everything just feels right.

So I guess we are done with the front end. So we have to start our JavaScript interaction where when we click this button, it’s going to add a class of full screen is active to the body. Then when we click it again it’s going to remove that class. The CSS takes care of every other thing. So let’s go here.

So I’m going to switch to JavaScript and we’re going to start. The first thing we want to do is that we want to wrap everything in a document loaded function. So I’m just going to say document. addEventListener and then I’m going to say DOM contents loaded. So once the DOM content is loaded we’re going to add this function and then open it.

So everything is going to be inside this function. So the first thing we want to do is we want to declare all the variables. So this will be variable declaration. Let’s just put a line there. Then we’re going to start, we want to get the body because we’re going to do the nav toggle.

This equals to document. querySelector and that is going to be. nav-toggle. Okay, I didn’t type that well. Now if you don’t want to write constant, constant, constant, you know, you could just remove it, put a comma here, okay?

Yep, and then you just be using the comma. The next one is going to be links. Now those links, we’re going to take all the links in the full. . .

Now, so we’re going to be document document dot query selector so we’re going to have a full dot full screen dash nav dash wrapper a so we’re selecting all of the then we move to the next stage which is going to say navToggle. AddEventListener. Click, function. We want to toggle the class list. Full screen is dash is dash active.

So that’s the class we want to toggle. So let’s see if it is going to work. So we’ve done that. Add event listener. So let’s go and refresh.

And then I’m going to click here. Nothing happens. So let’s see our console. So let’s go back and check that button. Yeah, it’s a button.

That means first of all, let’s check is it receiving. Yeah, it’s receiving focus. So yeah, look at the focus very small. That means I have to give it a padding. So let’s go back to that code and just give it a padding, 2rem top and 1rem to the side, top and bottom and the side.

I’m just going to refresh this. Let’s just check that. Okay, so you see that it’s. . .

Just to be on the safe side, I’m just going to take all this back and add constants to here and here. Just to be sure that I’m not having any issues as a result of that. I’m not quite sure if constant is frowned upon when you’re using that. Let’s just do all the best practices, put the colon there. And navtoggle.

addEventList. Now click function. I’m going to copy all this. And then I’m going to put in the console to troubleshoot what the problem is. So I’m going to put it here, press enter.

I’m going to see, can I get that nav toggle? Okay. Okay, I can get the mouth toggle, I can see it’s highlighting here. So what is the problem? It’s working here.

So why is it not working here? Then something must be wrong, there must be a mistake. Content. Alright, so that’s the reason it’s not working. We have the wrong spelling here.

4 1:18:51 I think this is one of the biggest issues when, and this thing is not even throwing any error so yeah 1 1:18:51

it’s working so yes we have it working there we have the class you have this yep so the class is being added and so that is it so right now what we want to do is because we’re going to be dealing with opening and closing of these things we want to be doing a lot of things when these opens and close like changing area labels and all that so the opening and closing we want to put it in a separate function. So this opening and closing, I’m just going to copy it out and then I’m going to come here and just going to say function declaration. And this is all the function we’re going to be declaring. The first function we want to declare is toggleFullScreen. So I’m just going to say function toggleFullScreen and then I’m going to put there and then I’m going to call this function when the button is clicked rather than write everything there.

So I’m just going to come here and call that function. So let’s check it out if it’s working. Let’s check that A5, body is not defined let’s see body is not defined 3 1:20:02

let’s save that, let’s do this 1 1:20:04 we need to put it here so that’s a mistake we have to put it inside there let’s refresh here so now it’s working well now everything seems ok now the next thing we want to do is to make sure that once we see this button, we want to say once we open it, we want to add an attribute, area expanded to the button. So let’s do that.

So to do that we’re going to use a function. So this is going to be a function to open nav. We’re going to create another function and we’re going to call that function to update button area level. I’m just going to call it function update area expanded. Now so that is going to take a value because that value will be changing.

It’s going to take a value. So we’re going to say nav toggle. setAttribute. That attribute will be area expanded. And then the next attribute would be the value.

We’re going to translate that value to a string. So even if that value is whatever that value is, we want to convert it to a string okay because the attribute only takes a string so we use that so when the button is click everything that is supposed to happen when the button is click is here in the toggle so we’re gonna come here and just say we’re gonna check if the menu is open or closed. So slash closed. Now this returns either true or false. So when the menu is open this returns true, when the menu is open this returns false.

We’re going to use that to set a value for the area expanded. So we’re going to say, we’re going to call this update area expanded. Okay. So I’m just going to call that. I’m going to say update, I’m going to say update area expanded.

And then I’m going to put that here. And this is going to be, is active, is going to be the value we pass. So if the menu is open, the area expanded will be true because the body contains this class. If it is closed, the area expanded will be false. So this is dynamically inserted into this based on this condition.

So let’s save that. And because everything is inside this toggle, the full screen function, which is being called by the clicking of the button, so we don’t need to bother to go back here and do it. So everything will just stay here and all this is going to happen when this function is being called. So now we have this there is no area expanded showing there. So what I’m going to do is I refresh that we see the button here I’m going to click that and it shows area expanded true when I click it it shows area expanded false.

But the problem is on load it doesn’t show any area expanded which is supposed to show. When the website loads we wanted to show the area expanded false first. I’m going to come here and just say nav toggle dot set attribute. So once the page loads we want to set the attribute of area expanded to false. Take a look at that and let’s see we’re going to have area expanded false and when we click the area expanded will be true when we click the area expanded will be false.

So I think these, I don’t know, did we set, no we didn’t set that the padding of this container so it’s overlapping. So let’s go back here and that container let’s collapse everything and let’s see it was a container so we’re going to set the padding no what we’re going to set is the full screen because that acts as a section. So we’re going to set that padding. But then let’s do it where we did the other one. So I’m just going to copy the whole of this and I’m going to go to the CSS.

Then I think I should label that properly. So I’m going to add this to the list. So let me just break this like this so it’s going to be a bit more readable. So I’m going to put that full screen. So I’m going to just write there.

brxe-block. Okay, that should take care of the specificity. Some elements are easy to, you know, because it already has a class for it. Okay so that’s good so even if no matter how we we move it you know it’s just not gonna it’s gonna respect that boundary. Beautiful!

So what we also want to do for it is to make sure that this the area label is open full screen menu okay but when it’s open it we want to change the area label to close full screen menu. So let’s go back to the JavaScript. So I’m gonna come here we’re still gonna use this condition to check. Change area label or button. Okay.

So what I’m going to do is I’m going to say if is active, nav toggle dot set attribute, area label. I’m going to set that attribute to. So if it’s active means if the menu is open, we’re going to set the attribute to close full screen menu or navigation depending on where navigation. I’m going to copy this and then I’m going to say else, I’m going to paste that. I’m going to say open here.

So if it’s active, that means if the navigation is open, then we’re going to change the level, the area level to close full screen navigation. So let’s refresh that. So you want to watch here. Okay. So right now we have area label open full screen navigation.

Once you open it, the next thing you want to have there is close. So this button has a change to the close button. Okay. And the area expanded are also walking through. False.

So we have sort that out. And that is one accessibility issue resolved. We’re going to move to the next one. So the next thing we want to do is, let’s tap, so click enter, we enter there, we can tap. So what we want to do is, we want to be able to escape, hit the escape key, okay, and close this menu on escape key.

So that’s the next thing we want to take a look at. So now, we first do that, that will come under executions, okay. So I’m going to come down here, I’m just going to call this key down event. I’m going to say document. AddEventListener KeyDown function and that function is going to close nav on escape key so we are going to say if event.

key is escape so that’s escape key then we are going to call the toggle fullscreen function so let’s do that so let’s take a look refresh I’m going to use keyboard tap tap tap click go go in I’m going to hit the escape and then so now because we are calling the toggle full screen and we don’t have to come back and redefine everything that we want to happen everything that has to happen the array expander will be updated the area levels will be updated because we are calling this that’s the power of of creating functions and now the next thing we want is when we just like this one when we tap and then we go out we want it to close so right now when I tap here and then I go out the menu is still open but I’m still you know still tapping into the page you know it’s still open so we want once we tap out it automatically closes and then so let’s say on tab key close nav if all links loses focus because we only want to close it when all the links lose focus so while you are still in it, if all the links lose focus, inside it we want to close it. So we’re going to say if event. key is equal to tab. I’m going to go ahead and open this. So we want to write a special function for it.

And that function is going to use what is called the every method to look through the links, all the links and check if any one of them still has focus or not. So if any link inside that navigation loses focus, then we want to close it. So we’re going to create a function called constant has unfocused link. We’re going to get array from the links. And then we’re going to pass in the every method to go through every of them.

Function, we’re going to pass link as a parameter. So here I’m going to just put that. So that function is going through every and then we want it to return any link, return whether no link matches the focus state. So what happens is, so if this is going to return either true or false, this goes through the links and check if any one of them does not match, it’s going to return, you know, it’s going to return, has unfocused link is going to return true because, yeah, it doesn’t match so it’s going to return true, has unfocused links. So we’re done with this and then we’re going to now set the condition and say if has unfocused links then toggle full screen.

So now we’re going to go there, we’re going to refresh. I’m still going to use the keyboard to navigate and let’s see. So once I move in, you see it closes. So the problem here is when I move in, it doesn’t wait because now why does that happen? When we are pressing the Tab key, it should check.

So immediately we hit the Tab key. The time it takes for it to jump from one link to another, between that time it has registered that it has lost focus. So what we want is a situation where it waits a little bit for it to jump to the next link, jump to the next link before checking. And when it finally jumps out of the final link, it still has enough time to check whether all the links inside here loses focus or not. So because of that, we’re going to give it a timeout.

We’re going to wrap all this in a timeout function. So now I’m going to just copy it, all of this. I’m going to cut it out. Then I’m going to just do that. In here, I want to put a comma and put 200.

That is 200 milliseconds. I want it to wait 200 milliseconds before checking to give it enough time for the focus to move from one link to another. I’m going to save that and then it’s still not working. Now it appears that, let’s increase that time out to like say 500, let’s see. Let’s see if it’s going to do?

Let’s see. The links. . . So let’s see what these links are first.

Okay? So I’m going to go to the front end. I’m going to open the console and I’m going to paste this links. It appears that this links is just one. 3

1:32:42 Okay, so the problem we have there was 1 1:32:44 we were using query selector here.

So we want to select all of them. So it actually worked but it was just one link that we selected. So you can see if I refresh now, so it works. Once the last one goes out it goes out fine and then we move to the next uh. .

. elements on the piece is focusable of course these are not yet links of the enough for possible right so let’s do that again skips gives gives gives give does not go out and you know everything just walks as it’s supposed to logos changes to uh. . . black a black you know now the reason is jumping like that is because it’s moving to the next elements okay it’s moving down to this one so let’s check the mobile breakpoint so far see what we have so far I’m gonna come here and take the smallest screen size and unfortunately we cannot see a hamburger okay you can’t see it if I do like this, it jumps there.

If I open the menu, the menu kind of covers it. So we need to give it a very good Z-index. Let’s check. Let’s open that, the button, click. So we need to give it a much higher Z-index.

Now, I say the Z-index is not working because the position static prevents it from working. So what we’re going to do is that we’re going to go back to the header and then we’re going to change the position of this. We’re going to change the position to relative because we want the Z-index to take effect. So the stacking context isn’t working for it. You know the Z-index isn’t working because the position was static.

So now if I do that, you see, so if I come here and yep, so we have what we want there. This should have had a better delay than this. Maybe at the lower break point we need to adjust the delay, you know, for it. So the nav toggle, we gave it a bit of a delay. Okay, so the nav toggle, did it have any delay?

No, we didn’t give it any delay. We should have given it a delay of 3. Okay, transition, delay of 0. 3 seconds, just like we gave the other ones. Okay, yep, just like we gave this.

And I think most of this should be grouped. We have this transition 0. 6, so we could just bring two of these, copy that, remove this and just place it here. I mean, it’s just because we want to group the CSS. Let’s just put this here.

So let’s have the same transition duration and delay. So everything should be uniform. We lost it. Something is wrong there. After.

Okay. So that works. Okay. So you can 3

1:36:14 can see that delay is just perfect. Wait a little bit before changing. The same with 1

1:36:18 the logo. I think what is left is those animation, yep, those animation that this stuff fly in. And for that we’re going to use CSS animation. There are two things.

One other thing that is left is that we want this, when we click, we want it to close like that. When you click one of the close, so that’s what I want to do right now so right now if I click this, it just stays there like I usually say, it’s never a good user experience to do for that to happen so you want to click and get a feedback by the menu sliding out after you have clicked, so I’m going to go back here and then under here I’m going to say close, close nav when links are clicked. I’m going to say links. forEach. I’m going to look through each of them.

Link with an arrow function. Then what I want to say is for each of them, addEventListener, click. I’m going to give it a function. Okay, I’m going to say toggle. So once you click the link, we’re going to toggle the full screen.

Okay, we’re going to call that function. So you see how easy it is dealing with this, making it a function. So right now if I go and refresh this and then we open it up and we click, see? It moves to another page. That’s great.

So the remaining thing is just to add those animations. So what I’m going to do is I’m going to define the animations first of all. So I’m just going to say animations. I’m going to call this class that fade in left. Maybe I should just call it fade in.

You know what I mean? Fade in left or slide in. But since it’s sliding and fading, so we just call it fade in left. I’m going to define an animation. That animation is going to be called fade in left.

That’s what I’m going to call it still. And then I’m going to give it a 0. 8 seconds of animation time. And then for the easing, I’m going to give it a cubic bezier. I’m just going to choose these values, any of these random values and just change it to what suits me.

I have my values already. This is going to be 0. 6, and this is going to remain 1. So I’m just going to leave it like that. But then I’m going to give it a delay, maybe let’s say a delay of say 0.

2 seconds, and then I’m going to write them both in transition field mode okay, so I’m just going to copy and paste so it’s just basically fading in, so it starts from negative 250 pixels and opacity of 0 and then fades and slides in okay, and then that is it. And then we’re going to have another animation so let me just, I have that animation, let me just copy that one fade out left, okay, I’m just going to copy that. So the one to fade out, this is the one that controls the fade out. If you notice that the way I edited this, you can actually edit this like this if you want it to be a bit more readable or you don’t have enough room. So take note, the first time is the animation duration.

The second one is the delay. So I have that animation. Right now if I go to the front end and refresh, open my console, open this, and then I said okay for that one I want to add a class. Let me add a class of fade in left. See?

See what is happening? So I add the class. 3 1:40:50 Okay.

1 1:40:53 Save it in left. 3 1:40:55

Alright. 1 1:40:56 So, but what we want to do is to add that class to, you know, all the text here. Now, if we go to a JavaScript, we want to add that class.

So all the text here have a class of, you know, nav, what is called full screen nav text. Okay. So we’re going to come here, I’m going to say constant, so I’m going to say link group, I’m just going to call it link group or maybe nav text, anything. querySelector all what was the class again? FullscreenNav

3 1:41:39 text. Is it txt? 1

1:41:42 It was txt. Okay. So I’m just gonna say. fullscreen.

nav__ alright, let’s just be sure one more time, that is it so I just want to be sure that I got that for the console, copy that didn’t I I’m going to paste this in the console and just say nav text 3 1:42:29 text 1

1:42:32 nav text ok so you can see that all of them are being referenced here all of them are being referenced here ok so we have this, we have the basic text there all of them, so we got all of them so now we want to add the class to them. So what I want to do is, when I click the button, we want to add the class to all of this. nav text nav text okay 3

1:43:10 okay 1 1:43:12 so we’re going to try the first one nav text dot class list dot add and we want to add there

3 1:43:19 fade in okay we want it to fade in 1 1:43:22

we’re going to have fade in 3 1:43:25 left 1

1:43:27 set in left. Okay, save that. Let’s see if that’s going to happen. So, I’m going to refresh this.

See, you can see that something is happening there. Let it delay by let’s say one second to fade in. Let’s do it like that. You can see that. Because it’s not removed, when we refresh it adds the class.

But the problem is that all of them. We need to find a way to add a delay for each of them using CSS variables, using local tokens. We want a solution where we can have style and then we have the token for the delay for each of them. We are going to use something a bit more advanced in the JavaScript. So I’m going to take that off because doing that is just not going to give us the effect we are looking for.

So I’m going to take the whole of that off. The first thing I want to do is to create a function. Let me not take that off for now. So I’m going to create a function. So I’m going to come here.

I’m going to create another function. assign CSS token based on the element index. So based on the position of the elements in the DOM, it’s going to assign a delay tokens to it. So we’re going to create a function. That function is going to take three parameters.

The first parameter is, sorry, we have to give the name. So I’m going to be the variable name or token name. So I’m just going to say, let’s use variable name. And then the third one is going to be the offset. So if one has a delay of 0.

2, the other one will have a delay of 0. 3 so that they will come in sequentially. So I’m going to say element. forEach element. We’re going to put these arguments in here also.

So we are calling the index of that element. So we’re going to say constant because the variable value is equal to the index. So what we’re doing is we’re going to say the index which is either 0, 1, 2, 3, 4, 5 and then multiplies it by a specific offset to return the delay that is reasonable like 0. 1, 0. 2 and all that.

to 6. So 6 means we want to make it just like a one decimal place because he’s going to return this number. It’s going to be multiple decimal places. We want to make it one decimal place. Then we’re going to add S there.

Which means that we want it to be in seconds. That S will represent seconds. Then we’re going to say elements. style Now this sort of looks like the tutorial that Kevin did recently, element. file.

setproperty. So we’re going to set the property, the variable name and then the variable value. Let’s hope there is no error here. So this is a function. We still need to call that function.

Assign CSS variables to nav texts. So, we have this as a nav text. So, we are going to call the function assign variables. And then that took three arguments. The first argument was the element and then the variable name and the offset.

So the first argument is the element is the links sorry the nav text and then the variable name will be a string. We’re going to call that delay and then the string the offset we’re going to give it an offset of let’s say 0. 9 so multiply it by 0. 9 will give us a decent value. So I’m going to save this and then I’m going to refresh the front.

And right now, if you take a look at this, the text, okay, these texts are links, okay? So you see that they don’t have any, you know, we’re supposed to do something like style equals to delay, you know, equals to a value because this had enough text. So I’m going to refresh this. And then you see that now we have delay. This is delay 0.

1 second. This is delay 0. 2 seconds. This is delay 0. 3 seconds.

So now if we go ahead to click this, let’s say I need to refresh this. So our, let’s see. So now we have a delay of 0. 1 so it’s okay 0. 3 and this 0.

4 okay so the reason it’s not working is because it’s supposed to come in so it’s not really coming in so we have to come here to the fitting fitting this delay we’re going to change it to var delay. So we’re going to put that value. So that is going to dynamically add that to the CSS. So when we refresh and then they are all supposed to come in one after the other. You see, coming in one after the other.

Refresh that. Okay. Doesn’t look bad. So we have to do the same to the top here but we don’t want to give it the same, you know. So I’m going to do like this.

This is a nav heading. So I’m going to just go there and just say constant nav heading or nav title 3 1:50:27 yep

1 1:50:31 nav title is fullscreen nav heading yep that should be it and then we’re gonna do the same thing here we’re gonna call this nav title it should be capital camel caps. NavTitle. setAttribute.

Sorry, that is not what we are doing. We are assigning the variable. We’re going to assign the variable to navTitle also. For navTitle, So if we check it now, the nav title, we haven’t actually, have we? Let’s see.

Something is wrong. 3 1:51:24 Nav title is not defined. 1

1:51:25 So let’s see. 3 1:51:26 This is supposed to be capital.

I changed that, didn’t I? 1 1:51:28 All right. So let’s look at it again, so yeah the nav title have the 0.

1, then let’s click to open, this has 0. 2, this has 0. 1, so we have assigned that but we haven’t assigned the animation to it. So we’re going to assign that animation to it. So how do we assign the animation?

So this assign CSS variable. This is, we have to level this. This is add animation. We have to make sure that we do it in such a way that when we click to exit it as the fade out animation also. So we’re going to take the whole of this out from here.

Okay. I’m going to cut it from here. We want everything to happen when the screen is open. So we’re going to go to that toggle full screen and we’re going to write that function. Write it inside here.

So we’re going to come here and create a function. So we’re going to call it Entrance Animation. So I’m going to call it Function. Now even though it’s going to be Entrance and Exit, but I just want to call it Entrance just to make it easy. Animation.

And that is going to take a parameter. I’m going to just call it Elements because we want to dynamically call it. We can use it on different elements. check is if the menu is active, body. classlist.

addFadeInLeft. Fade In Left. So when the menu is open, we want to add the class, Fade In Left. But we also want to remove the class list of Fade Out. So if there was a class Fade Out, because we’re going to add the Fade Out also.

So if the menu is open, we want to remove the class of Fade Out Left from it else I’m going to just copy this and reverse it this is going to be remove and this is going to be add alright so that is a function and then we’re going to create another function to call that you know to call that function so I’m going to say function I’m going to call this sorry I’m going to call this animateItems. That’s just going to be a regular function. And then I’m going to just call the entrance animation. I’m going to call this other function. And then I’m going to pass in the, you know, the element that I want to animate, in which case is going to be these elements.

Okay. So it’s going to be this nav text and nav title. I’m going to go back here. I’m going to say nav text and then I’m going to do this again. I’m just going to copy this and then I’m going to put the nav title.

So this function calls this function and pass in the element that it wants to animate. And then we are now going to call this function in the toggle menu and we want to add it right after checking whether the body is open. So I’m just going to just call that animate items yep that should work so when you open it’s going to just call it so we’re going to have to go back here and then make sure that we set this transition this the delay here to var delay and hopefully everything should work I’m going to click that alright that’s good you see it animates in it animates out, it animates in, it animates out 3 1:56:32

okay 1 1:56:37 so I think that brings an end to our tutorial so let’s go check it one more time I’m gonna refresh the page and then I’m gonna go here and then we’re gonna test everything this works escape works okay let’s try tabbing all the way out okay so that works let’s try clicking the buttons so everything works and the arial label everything should work the button you know expanded if I click here if I tab and press escape you know so everything is working as it should work. Wow!

That was a long one. I hope you stayed through till the end of this tutorial. And if you did, you could use this code, you could, you know, replicate this code for other accessible menus that you can create, custom menus. And let me know in the comment section if you like this kind of tutorial, even though it was long. Let me know if you don’t want to be writing code, you just want to build stuff in the builder.

But you know the thing is that there is no way you can create an accessible component like this without JavaScript. So this is going to help you to create other kinds of accessible components. JavaScript is very powerful and what we have done we barely scratched the surface. And I also want to point out that some of the things I wrote here, coming up with some of these things, I was able to come up with them. I got some help from chatGPT trying to solve some problems I encountered.

If you try to write JavaScript, especially if you know exactly what you’re looking for, try to use AI to also help you solve some problems. It cuts down on the time you spend trying to solve problems. Before AI came out for this kind of thing, I used to spend a longer time coming to a solution. It took me longer, but now it takes me shorter. So learn JavaScript, don’t depend on AI for everything.

Learn it to understand it because it is when you understand it that you’ll be able to use AI to the fullest because you’re now with the understanding you know exactly what you are asking it to do and exactly how to modify the prompt so that it can give you exactly what you need. So let me know in the comment section what you think. Until next time have a great let me know in the comment section what you think. Until next time have a great day. Bye