YouTube Transcript:
Framer Mega Menu Tutorial – Build Modern Website Navigation

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

Video Transcript

View:

What I want to show you today is I want

to show you how to design this amazing

drawer section where users can just open

this large drawer and uh notice when I

hover inside a particular name we have

the the color changing. We also have the

image on the left as you can see and

then it pans from right to left and this

happens across the board. So I can also

click here places and what you see is

these very nice transitions and

interactions on I hover and it also

happens on the trailer part and the

downloads and especially here we have

this nice over effect and also I can

scroll and interact with the website.

So, I think this is a very interesting

beat and if you're a designer and you

want to learn about Framer or you're

just interested about picking up a new

skill, I'm going to show you how to

design this amazing navigation section

and uh without writing a single line of

code. So, let's get this

started. Yes, my name is Joe and this is

So here I have my frame workspace and um

I have pretty much some work that I've

already done and just to be clear I did

it because so that it's much easier for

us to pick up on the most important

parts. So inside here I have my hero

image container and this hero image

container this is where I have Lucia and

JSON and Lucia and JSON is the picture

you can see and I have this play play

icon here and then I also have so inside

the desktop I have two layers which is

this menu and this hero image container

that I've just told you about. So the

menu is where we're going to do all the

work and this is where we're going to

manipulate so that we can have this uh

drawer effect. So

um inside this menu I just have my logo

on the left and the hamburger icon on

the right. And to build this hamburger

icon, it's generally you just need to

have two frames and uh you can stack

them on top of each other. And then this

hamburger icon has a no round padding of

currently mine has around 20 padding. So

that's pretty much it. And then notice

also that the menu is set to space

between and it has a padding of right of

I'm going to come to my menu and I'm

going to hold Ctrl Alt K. So hold Ctrl

Alt K on your menu. And what happens is

you get this popup uh pop-up card and it

tells you we want to create a new

component and I'm going to make I'm

going to just name it menu and I'm going

to create it. The critical part here is

I want us to you might ask why are we

creating this variant is because I want

you to come to this hamburger icon and

you can see here there's on this right

panel there's something called

interactions. So remember we want to

have this hamburger menu once we click

it there's a form of interaction that

happens. So I'm going to click this plus

icon just to add an interaction. And you

can see we have a transition and we have

a new event. So here we're going to

click new event. So then on this so I'm

going to name my event and I want this

to open just call it open overlay.

So so generally what I want is when I

click this you're going to trigger an

event called open overlay. And as you

can see here we have a click next to it.

So and that's pretty much it. And uh now

we have a menu. As you can see, it's

changed from normal layer to a

component. And so now what I'm going to

do is I'm going to go to this menu. And

uh I'm going to come here on my right

side and I'm going to click this

overlays. So I'm going to click an

overlay. And then I'm going to click the

fixed overlay, not the relative, because

we want to have an overlay that takes

the whole space of our our page. So if I

click the fixed, what you see, we have a

blue border all around this website and

uh it takes the height of 100 VH. So

this is exactly what we want. Uh so this

is the settings of the overlay. So

anything you want to change or tweak in

the overlay, how it uh what is a

trigger, what is a preset, what are the

color of the overlay, is it dismissible

or not, enter, exit C index, everything

is here. And so the first thing I want

to show you is I want to show you

remember we had created an event called

open overlay and that is why it's

appeared here. But in case we have a

click event

uh which is not what we want. Um let me

just show you what will happen so that

you can compare between the click and

the open overlay and so that you can

have a a good idea on what we mean. And

then another critical bit is I want you

to look at this zindex property and I

want you to make sure that the index

property has one. So now what we mean is

as you can see when we put one it has

this back black color and this is

actually the color that we have on our

overlay. As you can see now we can see

as we make changes. So remember we have

this currently show on click and I want

to show you. So since we have the menu

here. So if I click anywhere in the

menu, you can see the overlay comes. But

we want specifically to click this one

and not the whole menu. And that is why

we need to go back to the overlay and we

need to click make sure this is open

overlay. And then the preset. Let's just

do um we can add a small preset which

means that how do we want the overlay to

appear? We can maybe let it fade in or

fade in out or fade out. So I want it to

fade in just to give it a small uh effect.

effect.

So now if I view my website you can see

I click anywhere on the uh on the menu

nothing happens. But now when I click

this specific part we can see we have

this nice fading overlay. So that is the

most uh that is the first step. The

second step is now we need now to add

our layers. We need to add our text. We

need to add our images inside this

overlay because now so I can just start

by holding F on my keyboard and I can

draw anything. You know this is where

you can just draw anything you

want. And uh notice that it goes

underneath the overlay. This is means

this means that the frame is the child

of this overlay and um I can manipulate

it the way I want it to be and

uh and this is how it is. So when I

click this, we have this nice overlay.

So this is what we want to do. But now

instead of having this oval shape, we

want to have our menu pop up. So I'm

just going to get rid of this frame for

now. And uh I had already designed the

layers. So just for the sake of time,

I'm just going to grab my layer here,

which is this main menu. And uh it just

has an image container. And uh it's just

like two layers. So it has two main

layers. So the main one is the main

menu, which is this um blue part. And

then inside I have the image container

on the left and the menu on the right.

So, I'm just going to grab the main menu

holding Ctrl C on my keyboard and I'm

going to go back into my overlay and I'm

going to hold Ctrl +V and paste it

inside. So now the main menu is a child

of the overlay. So anything anytime we

trigger the overlay, we have this nice

main menu. So I realized that I made a

few mistakes here and I'm just going to

clean up a bit. So inside here I have an

image, but I don't need to have this

image. So I'm going to just delete it.

So I only have the image container. And

then the main menu has a white color.

That's why you see this white

background. If we get rid of the color

as you can see. Um

um so this so the image container is is

white. So we need to get rid of the

white. And also the field which is the

main menu has a white color. So we're

just going to want to get rid of that

color for now. And I'm going to go to

this image container and uh notice that

in our video or in our website we have

something like this blue um color. And

uh this is now a critical bit. And I

want to show you how we're going to

come to the image container and uh I'm

just going to add a style here. So you

can see here we have a bunch of styles.

You have the opacity, I can put a fill,

but what I want is I want to click this

plus icon and I'm going to add um a

filter and I'm going to add a background

blur. And what this does immediately it

blurs our background. And so I'm just

going to up the background a bit. And as

you can see, we're having something very

similar to our website. So again, I'm

just going to go again to my assets. So

I had already created a bunch of

components inside here. And uh I'm just

going to look for the GT logo and I'm

But now as you can see we have something

that is really coming up and about. So

but now notice when we click this

there's something wrong with this draw.

And you might ask why is it not

occupying this space? It's because we

need to tweak the width of this

um we need to tweak its width so that we

have something that stretches all the

way to this part. So I'm just going to

go back and uh I'm going to go to um my

overlay again and make sure you grab

this main menu and the width has to be

as you can see it's 1200. I'm going to

set it to a relative 100%. And now I'm

also going to make sure my height is set

to view port so that it occupies the

whole height of my viewport. So if I

open the drawer now, it should be able

website. So I want you to spot our menu

bar. As you can see, we can still see

this hamburger menu, but we need to take

it behind. We need to take it behind

this overlay because the overlay has to

come on top of everything. So, I'm just

going to come to my overlay and I'm

going to bump up the Z index to around

like five. Five is good. And

then now it should look pretty neat. So,

as you can see, we have it. But now we

also need to put the X icon here so that

when we click this X icon we can go back

to the original page. So I'm going to go

to my overlay and um again I'm going to

come to my asset and here I have my

bugger icon menu bugger icon. I'm just

going to take it and drag it

here and uh currently it's positioned

relative to these other layers. That's

why it's going just beneath this spot.

But what I want to do is I want it to be

somewhere around here. So I'm first

going to change the variant to the X. So

I'm going to make sure it's opened. Then

I'm going to make sure the position type

is set to absolute. Now we can drag it

So, I think that's pretty neat. Again,

we need to come here and do the same.

Add an event to this layer or button.

And to do that, again, we come here to

interactions. And uh I'm just going to

click here, close overlay. So, once I

click this part, it's going to close the

overlay. So, I'm going to click done. So

now as we view the page um if I click

this draw and as you can see we have

this nice then when I click X it just goes

out. I'm going to go back to my layers

and I'm going to go back to my overlay.

And now what we want to do now is we

want to add this effect where if I hover

inside we have an image coming from

right to left. And as you can see when I

hover on every character name that is

exactly what happens. So for us to do

that we need to first come to the main

menu and I'm going to convert this main

menu into a component. So I'm just going

to hold Ctrl Alt enter. Sorry I'm going

to hold Ctrl Alt K. That is a shortcut

for creating a new component. Ctrl Alt

K. And then I'm going to create and then

I'm just going to come here to um this

primary. So as you can see now we have

this primary and now we're in this uh

component editing environment.

So so the next thing I'm going to do as

you can see currently this variant has

the image container and the menu layer.

So I'm going to hold F on my keyboard.

Wait I'm not going to hold F. I'm going

to come here to my home section and I'm

going to locate this image that I want

to use first, which is this one. Going

to hold Ctrl

C, copy the image. Okay. And then I'm

just going to go back to this component,

which is this one, which is the overlay

main menu. Double click it. And then I'm

just going to hold Ctrl

+V. And as you can see, we've pasted

that image inside this. just it goes now

behind or just underneath this menu. So

I'm going to change the positioning type

to absolute positioning and I'm going to

position it to the center of our screen.

But again we also need to change the Z

index so that it goes behind our

menu and then since this is a primary

and the primary generally we don't want

to see the image I'm just going to click

right click and make sure I hide the

image so that we only see this logo.

will go here. Then I'm going to create a

new variant. And in this new variant is

where I'm going to now show this image.

So I'm going to click here, show. And

now we have the image inside

here. And now, as you can see, we have

the image. So the reason why you can see

the image after we've clicked show is

because this image container has um as

you can see it has this background blur

style. So I'm just going to minimize it

to zero. And then now, as you can see,

we have this nice image. And then I'm

going to go to the GTA logo and I'm also

going to make sure it's not visible. So

now, as you can see, we have something.

So now we just need to add an effect to

our image so that it moves from, you

know, left to right as we as we move.

now, and then now what we want to do is

come here to the effect and click this

plus icon. And I'm going to click here,

scroll transform. And then I want it to

trigger when the layer is in view. And

uh sorry, it has to be not scroll

transform, but actually scroll animate.

So let's go to scroll animate and make

sure the trigger is layer in view which

means our layer is a image. So again

start at the center of the viewport.

That is okay. And then I'm just going to

tweak the transition enter exit. So I'm

going to give it an opacity of one. And

then I need to give this um some

transition value.

So, so uh what I'm going to do here is

I'm just going to use 10 as my dumping

and stiffness as one. So, this is a

preview. As you can see, this is how the

transition will happen. And then we need

to go and make sure that we have an

offset. And uh we want to offset it

from the right side so that it now

starts to pan from this right side and

goes inside to zero. So this is

perfectly good. So now uh now the next

thing is I want to link the hover

effect. So when I hover on this name

called JSON uh we go to variant two. So

you can click this Z icon and you can

just connect it to variant two and the

trigger interaction is when mouse

enters. So what happens now if when the

mouse enter here we're going to change

to variant two and we can even preview

it and see if it works. So when my mouse

enters you can see we have this nice

transition that comes inside our page

and it comes from the right side to the

left side. So since as you can see what

happens here is that it gets to a point

where the image stops moving. So we want

to extend make sure the image gets to

somewhere like here.

Okay. And we also want to make sure when

we stop hovering the image uh goes back

to its original position. So, the first

step is I want to go back to my image

and um I want to make sure that it's

it's currently just um sorry, I'm just

going to make sure that make sure it's

only pinned to the left side and I'm

just going to drag it to this

part because eventually I want this to

be my final view. So, this is why I want

it to be um - 360. So the second thing

is I'm going to go to this um JSON one

and the layer and I'm going to add an

interaction is uh new transition. When

the mouse leaves I want it to go to

variant two. Basically when the mouse

leaves here you go back to variant two.

So when mouse leaves that is exactly

what we want.

So we can now view the page. So when I

click here adjent have this nice

transition. When I get out, as you can

see, we've achieved what we wanted. So

I'd like to challenge you and just tell

you to do the same for these other

characters. Uh you can do the same. It's

pretty much the same job and it can even

help you practice your skills and even

make you better designer and brings this

um I'm going to go back to my overlay

and uh I'm going to double click it

again to go back to this part. And uh

I'm going to click this main variant,

which is my primary. And I'm going to

click here, new variant. And I'm just

going to come here and drag this new

variant three to somehow here. So just

so it goes below this primary and then

I'm going to name this going to name

this the download. Okay.

So now this is where we want to put all

the uh information that is in the

downloads here. So the good thing is

again I had already created that part.

So I'm just going to come here to my um

menu and as you can see I have this

layer called downloads and it was

currently hidden. So I'm just going to

right click and show it so that you can

see what I have. And then I'm going to

come here to text and I'm going to hide

this because we no longer need it. So

what we have here is that we have this

uh download stack and then we have this

part which actually should come below uh

should come underneath this part. Okay.

So now inside here we have this um uh we

have this stack and inside this stack we

have the download card and these cards

are actually a component and um let me just

just

um uh let me just show this again and uh

we have now this cards and if I double

click the card it takes me now to the

component section where we can design

the cards individually and even here

What happened is that I just created a

hover hover um type and then I just

changed the colors and also on this

hover variant I just came and made sure

that it had a solid border with a width

of four and a solid type style. And now

we're going to have this um effect. And

what happens here is that since this is

a component, we can just duplicate it

and we can only need to change the the

the image inside it by changing the

image. So we can for example pick up a

random image here and just

um put it inside. So that's a good thing

about components and you'll see that um

it's going to apply the same you know

the same uh effects and the same

characteristics. But now let's go back

to our page and I want to show you

something else which is very critical is

that if you check this stack what we

have here is you can see this blue line

here. it means that this stack car has

um it kind of overflows and this stack

has a specific property that I'm going

to show you that it's called

uh um let me just show you.

This stack has a property called

overflow scroll and uh overflow visible

overflow scroll and what it means is

that whatever overflows and uh sorry

it's actually the download speed is the

one which has an overflow scroll. So let

me just get this back to overflow

hidden. So if you can see this downloads

uh layer that we've just brought in, it

has this property called overflow

scroll. And what happens here if we put

overflow hidden, you can see we can no

longer see

um the other layers because we have to

increase the size. So we can see the

other remaining layers. But notice here

we just need to work with a specific

height and we still want to be able to

see the content inside it. So to do that

that's why I'm going to use overflow

scroll here so that we can be able to

scroll as we view the other part of the

videos. So again I'm going to delete

this card which is a duplicate of it.

And now we have this nice overflow

scroll. And then of course inside here I

have this menu button. But if I go back

to my parent, which is this downloads

layer, and I show you like overflow

visible, um you won't be able to see

this button because this um this one is

set to overflow visible. But anyway, I

hope you get what I mean is that this

part is set to overflow scroll. So we

can be able to scroll it. So let me just

show you what I mean. So, as you can

see, we can now be able to scroll around

and um yeah, which is pretty

interesting. So, but now the tricky bit

is how can we make this how can we style

up this overflow scroll? Remember in our

design we have something like this. We

have this overflow scroll on the right

side. We have this nice um subtle fade

in effect here. As you can see, just

looks quite polished and professional.

and ours looks a bit of um you know

something just too rigid. So we're going

to try and fix that now. So what I'm

going to do is I'm going to go to my

layer which is this downloads layer and

I'm going to change the position in type

to absolute. And what this means is I I

don't want it to be relative to this top

layer and this bottom layer. So, I'm

going to make sure it's pinned to the

left side. And I'm just going to use a P

on the left side. I'm going to use 54. I

can come to this um menu. And um as you

can see, it has a padding of 54. So,

again, I can come back to this downloads

and make sure it's pinned to 54. And

then I'm going to change the width of

this. And I'm going to give it a

relative width.

And what happens is that it takes

100%. But that's not exactly what we

want. I want it to be somewhere around

here. And then again, this is a very

critical bit. I want us to have some

space between this um scroll bar and our

videos. So to do that, I'm going to come

here to

my downloads and I'm going to come here

to my padding. And on the right side,

I'm going to use 54 padding on the

right. Now, as you can see, we have

something that is coming very clean. So,

we have just done this 54 here and 54

here pinned to the left

side. So, the second thing is I want us

to have this effect where you can see

that there's kind of like a shadow here

or like a fade in color. And we're going

to try and trick our way into this. And

what I'm going to do is I'm going to

insert um um let me insert an

interactive slideshow. I'm going to drag it

inside. And uh I'm just going to click

this uh downloads uh layer that we've

just inserted. And I'm going to hold

Ctrl X and I'm going to drag it outside

here. Paste it here. Ctrl + V. And then

we're going to put it there. And then

what I'm going to do is I'm going to

connect this slideshow to this beat. And

as you can see, we have a slideshow

which has taken. And I'm going to hold

Ctrl X and I'm going to copy my

slideshow inside here. Going to drag it

on top of here. And then I'm going to

make sure my slideshow has a relative

And then I'm going to make sure the

height is set to

594. So now as you can see we have

something coming up. And the second

thing is

uh the slideshow is also positioned

relatively. So I need to come and change

it to absolute. And I'm going to do the

same thing as I did with this downloads

part. And I'm just going to make sure

this is pinned to the right as a width

of um uh its absolute positioned as a

width of 82%. But I'm going to drag this

and make sure it captures this part like

that. And as you can see, we have

something similar. Then I'm going to go

to my slideshow and I'm going to change

the the the direction to top to bottom.

And then I'm going to also make sure

that I remove my arrows because I don't

need no arrow. I also going to make sure

that I have a fade. And the fade is the

one which is going to add this nice

effect. And then I'm going to make sure

I don't have any dots. And now I think

it's looking pretty professional. And

so now we can even easily view it. And I

want to show you how it looks like. So

if I go back to um if I view it, as you

can see, we have this nice uh fading

effect at the bottom, which I think

actually gives it a professional look. So

um what now we're going to do is because

this is a download section, I need to

come and tweak this part here. So

because this is not the people section,

I'm just going to come here to people

and I'm going to change this variant to

nonactive. And then I'm going to change

this since this is a download bit. I'm

going to change it to active. So it means

means

that once we get to this page, this

downloads part is the one which is

active. And again, I'm going to come

back now to my main primary and I'm

going to hold this um downloads variant.

I'm going to hold L on my keyboard and

then I'm going to drag it inside here.

And I'm going to say on click, we're

going to switch to this

bit. So now when I go to my homepage, as

you can see, we can test it around. And

so when I click here, downloads, we have

this amazing amazing effect. So I think

it looks pretty good. And then um yeah,

so as you can see, we can go back. Okay,

we need to change something here so we

can be able to go back. So if I click

overlay, I right click it, I come and

click this people. So make sure that

when I click this

um when I click it so I go back to my

primary. So now when I view it again,

let me show you. So um so let me show

you when I click this people it's this

one works well but again as you can see

we need we have some space on top of

this so we need to fix it and but as you

can see when I click downloads it comes

really nice and when I click people we

go back to our original state so let me

just fix this bit

here and there just a bit of an

adjustment of the height of the image

So, I'm going to right click this and uh

I'm going to go directly to this image

here, which is the image um uh which is

this image layer. And I'm going to make

sure that it's pinned to the

top. Make sure it's pinned to the top

and put zero there so that um it's

actually make sure the image is pinned

to the top and bottom so that it can

adjust with the height of the screen.

So when I view my website, as you can

see now, if I click JSON, we have this

nice pan effect. And also when I click

this downloads, we have this nice nice

um showcased. And then again, we still

have some problem here because as you

can see, this uh scroll bar is not fully

hanging this corner. So perhaps some

some small tweaks we haven't done

correctly. Um, let's just check it

again. So, I'm going to come here and

make sure that okay, we know the problem

we have. Make sure this is set to

um make sure it's pinned to this uh end

part. Okay, so that it's always sticking

to the end. So now when I view my

website, as you can see when I come

here, which looks really nice. So, we

have this nice nice um very nice um uh

menu bar. Again, when I hover on JSON,

we have this idea. Again, I still gave

you the assignment to try and do the

same for these other names. Let's go for

these downloads. I've already done it

for you, but you can see.

And so the next thing I want you to try

is if you can try and do the same for

these places and trailers then you're

going to be quite good at your skills.

So my assignment to you is try and make

also these buttons clickable and uh it's

the same logic that we used here is that

you want to create another variant and

you want to make sure that

variant links to um the correct text or

content inside it. Luckily this layer

that I had already pasted inside has

other variants. So as you can see I have

the city text here. So you just need to

come on the city text and click visible

and it's going to appear here. And do

the same and hide this um hide this this

one for the downloads. And you're going

to do the same and create different

variants for different pages.

So, it might sound like a lot of work,

but this is something that really

separates most people is that you just

need to put in the practice and

eventually you're going to be on your

So, I think we've done the heavy lifting

and um uh everything works perfectly

good. And as you can see, we have

something nice. So again, if you want to

remix this file, you can find the remix

for free in the description below. And

um thank you for watching this far. If

you've watched till this point, it means

you're very serious about your framer

journey or your level of upskilling and

capturing new ideas, which is a

congratulations from me to you. Good

work. So thank you for watching till

this end and I will see you in the next video.

Click on any text or timestamp to jump to that moment in the video

Most transcripts ready in under 5 seconds

One-Click Copy125+ LanguagesSearch ContentJump to Timestamps

Paste YouTube URL

Enter any YouTube video link to get the full transcript

Most transcripts ready in under 5 seconds

Get Our Chrome Extension

Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.

Add to Chrome — Free

Works with YouTube, Coursera, Udemy and more educational platforms

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube

←

→

↻

https://www.youtube.com/watch?v=UF8uR6Z6KLc

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

YouTube Transcript:Framer Mega Menu Tutorial – Build Modern Website Navigation

Video Transcript

Paste YouTube URL

Transcript Extraction Form

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube Transcript:
Framer Mega Menu Tutorial – Build Modern Website Navigation