DAY 02 | EPISODE 01 | QUICK CLIP 04

DRAWER MENU

Paul Davenport

  Paul Davenport  |    03:34

A Drawer Menu is a standard option and needs no customisation, it just works. Update the Pages in the Drawer Menu and they will automatically display, complicate with unlimited menu tiers. 

This is the best option for beginners and is also the best option for Mobile if you decide not to have a Menu Icon on Desktop.

   AI Website Transcript 

"Now, we're going to move on now to the second choice, which is if you have got a menu icon on a desktop, do you want it to open what we call a Menu Section or a Drawer menu? So here you can see my Menu Section, which a Menu Section is a page that we can build from scratch. We can fully customize it, or as you saw yesterday, we can drag in pre-made Layouts of our Menu Sections, which we do via this tab here. That's where we go and fully customize this page. So yesterday we changed the Colour and the gradient in here. We'll look more on this and how we go and build those from scratch later.

But now I want to show you what a menu Drawer is, what a Drawer menu is. So here you can see slide in menu type. This is the section which slides in from the top so let's go and have a look at that. Here's our Menu Section sliding in from the top. I could also choose to slide it in from the right. Let's have a look at that, so it slides in from the right. So let's see what a Drawer is now. If I change this section to a Drawer and press save and I click here now, this opens up the Drawer. Now the Drawer slides in from the right because the menu icon is on the right. If I chose a header with the menu icon on the left, it's going to open up from the left.

Now the advantages here with the Drawer, it just builds itself. As we add pages and navigation, the pages are automatically added into this Drawer. There's no custom styling at all. In fact, the only thing we need to do is choose the background Colour and the text. So if you are a beginner, a Drawer menu can be really advantageous. To style this all you need to do is jump back into the Colours area, which I'll just do here. I'm going to open it up as a new tab, and then in our header we can see here we've got a Drawer background Colour. I could change this to another Colour, so let's just change it to something like this for now, and I can change the text Colour. If I press save and look at my preview here, I can see that that Colour's updated. So I'm quite happy with the Colour that we've got here in this instance so I'm just going to press save and put that back. And that's decision number two. Would you like a Drawer menu or a Menu Section?

Now if you're a beginner, you can just start with the Drawer menu because it doesn't require any more styling than what we've got here. Or if you are more adventurous, you can choose a Menu Section and I'm going to show you how you go and upload the links for both of these now. So we'll start off with the Drawer menu, and I'm going to jump back over into the navigation area. Now you can see I've just changed my Menu Section to Drawer menu. So now I'm just going to hit refresh in my browser and you can see that it updates for us in this black Colour. This is indicating to me that I've currently got the Drawer menu selected. If I change it to Menu Section back in the header's area, this one will be indicated in the Colour black. Pretty straightforward. So let's now go and edit the Drawer menu."

More Quick Clips