How to Build a Webflow Burger Menu with Animations
Tutorial tags
Description
How to build a Webflow burger menu with animations
Overview
How to setup a burger menu
How to animate the slide in of a menu bar in Webflow
Resources
Transcript
hello YouTube gang and welcome to the
first design direction of 2020 sorry
it's taken me some time to put some
stuff together
things have been coming in thick and
fast and you know I've got quite a lot
good news coming in obviously the the
nomination for Best independent by aw
Awards didn't actually make the cut but
just to get nominated was you know was a
surprise and also a great great
treatment to start off with and as well
as being made one of the jury members at
AAW Awards again something that I didn't
ever everything was possible but you
know great and really happy with that
and things that are in the pipeline some
of you may have seen or heard I am
potentially working on a master class
and the level that I want to go in with
this master class is going to be quite
in-depth with all the other things that
are going on I am struggling to find
time to do that as well in as well as
videos in for you guys as well so it's
coming I don't know when I really give
you I can't really give you the final
answer but just stay tuned hopefully
I'll be able to pull my finger out and
then and start to put this together but
it's in the process
today's lesson is gonna be pretty
straightforward I guess I mean quite a
few people asked about how you create
burger menus and some of the things you
can do this is just kind of gonna be me
exploring think about things playing
around with some ideas and this just see
where it goes and see what we come out
with and that's pretty much it so let's
jump straight into wit flow so now we're
in web flow let's just have a little
think about what is currently available
to us in web flow now obviously in the
panel you know we do have a navigation
which is there and it's not something
that I've used I don't think ever and
all of my navigations I do I build out
from scratch and it would be exactly the
same process with the burger menu so
let's kind of get straight into it and
what we're going to do is we go through
I'm just going to be kind of giving you
my full processes how we could we file
were advanced different elements to the
menu so what I'm going to do is I'm
going to drop in a first day and I'm
going to call this menu parents and
we're going to make this by 50 pixels by
50 pixels as you can see over here it's
all right corner
aren't you going to put this to fixed
and I'm just going to move it over at
left corner sorry well now I'm going to
move it over to my right corner and I'm
going to do 40 pixels and I'm going to
do 40 pixels
I can't currently see it right now and
so I'm gonna back up on this just so we
can see it for the purpose of this of
this demo and then I'm gonna put it on
flicks and I'm going to put it on center
center so now we've got the button area
something to think about as well
especially when you're doing burger menu
just think about that hit area that is
really important I think the guidelines
the standard guidelines is around 4045
pixels that that hip area should be
especially when you get down into mobile
devices I mean a small hip area is gonna
be tricky
for them fingers so now we've got that
menu parent let's just drop in another
div and we're gonna call this menu and
I'm going to do a width of 20 pixels and
I'm gonna I do a height of 2 pixels and
then I'm going to give it a background
color so now we've got that line little
bar in there we can pretty much just
apple see Apple V Apple see Apple B now
currently we have a line so it's very
straightforward its back to the parent
and that is because I need to change the
directions of vertical and now we have
them all sitting underneath other but we
need to put a little bit of margin on
these so I'm probably gonna put
four pixels now if we look at this it
doesn't look in the center so we're
gonna have to get back to the parent
just make a padding adjustment again by
four pixels and now we're in the middle
we're looking good that's that's the
button done relatively quickly great
going into the overlay now we're just
going to get another div we're not going
to do it in this parent this is going to
be separate and one other thing just to
think about cuz I forgot that on the
menu parent we just want to make sure
that the z-index is to the top of the
page because we always want that button
to be the highest element on the page
especially when you've got other
elements below we want to make sure that
that is and then with this we're going
to call this menu overlay so now we have
the menu over they we're going to do
pretty much the same prints cause what
we did last time we're going to do a
width 100% we'll do a height behind
review point iron we're going to put
this on fixed again because we want it
to be fixed to wherever we open this up
on the page and then we can just go
underneath that button so nine nine
eight so we know that it's bang
underneath that bar but then it's going
to be again on top of all of them
elements which we want
I'm going to give it a background color
of course probably not black let's just
touch that light a little bit more and
now we have this menu overlay now little
bit of a tip some of you may know it
some of you might may not know it took
me ages but I stumbled across it another
art that's that's how you do it so when
you put any positions on a fixed or
absolute and you start to animate by the
size you can actually control the
direction of that movement so here we
have a pin to the left so if I pin that
to the left and I did a size it would go
from left to right if I pinned it to the
right go right
it's a left if I dumb it from the bottom
it would go bottom to top if I did it
from the top it'd go top to bottom so
that's a really good thing to remember
if you want animations that coming from
different directions by size obviously
by movement you can move them any
direction it's all good but if you're
trying to do this size movement which is
a different kind of animation style to a
move move I guess more of a more of a
rigid movement where size is kind of
it's kind of a little bit more of a yeah
open and close communism that's
something to think about when you when
you're animating properties on size so
now we've got the menu overlay in we're
going to put this on flex as well
I'm not going to do sense Center because
I kind of want this to the side a little
bit and I'm what I'm going to do is I'm
going to call this nav link parent and
what I'm going to do is I'm probably
just going to give it 120 pixels we want
it to be 120 pixels off the side now
we've got this what we can do is we can
drop in a list now there's many ways
that you could pretend to build a
navigation I always use lists kind of
traditional but that's the way that I
like to build them we had the lists
which is in here and then we have our
list item and then what we can do with
that list item is we can drop a link in
and then we can call this nav link we
can size it and I'm going to use
viewpoint width again something that are
like as you know and we're gonna have to
use the height so we'll have to put the
high on and just go 105 and we're going
to change this font we're going to go
and use that font we've used before make
sure it's on the right weight and then
we're going to change it to white now
what I'm going to do now is I'm going to
you some very generic own other hats and
contact so now we have that in let's
just have a quick look at it
noise okay I think we could essentially
make the heights a bit bigger it still
feels like it needs a bit more spacing
in between each of the words and again
just a note why I use % % just seems to
keep the ratio really well when you
start to scale things down you can pump
this up to nine yeah I think I think
eight actually it's just me
krasin eight you know right boom great
that's that's perfect so now we've got
kind of a base structure of what what
we're looking for
now let's bear in mind on on what this
is it's a nav so a good little rule of
thumb make sure we change the tag to
math now again it's changed the icon up
here and we now know that this isn't
that so now we've got this structure and
there's obviously other things you could
potentially add inside and snap you
could have you know images could be
social linked could be all sorts of
stuff now a standard kind of approach
this would be well let's let's this
actually do it an approach would be like
okay go to a mouse click I'm gonna do
menu menu click and I'm going to grab my
overlay and I'm just gonna go yeah I'm
gonna set this on the initial state then
move it up and I'm gonna move it down to
0% which you know it's you know it's
kind of standard we changed these ins we
can play around with the timings a
little bit still you know it's pretty
linear it's pretty boring I'm not really
seeing any any pushing on it let's split
push so the things that we can do with
this and let's just start thinking about
the introduction of elements and really
helps bring down animation
forward so we've got these links and I
think staging them links him could be a
great way of bringing this to life so
let's just get rid of this that was just
to show you what you could potentially
start off with and now we're going to
move into what we can do with it so
we've got this nav link and what we want
to do it isn't having if we want to give
it a combo class now the reason that we
want to give it a combo class is that
when we go to target by a class it means
that when I copy this and drop it onto
another page it's still gonna read them
links and if you do it by selected and
I've seen things break because the
selected element is literally selected
by the page and you want a hard hard
make this in if anything so I'm going to
give this one first second and then
third so now we have that and go back to
our bottom do the menu flick you can now
start to play around with this now I'm
going to move this one I'm gonna go and
move and I'm going to move it down a
hundred percent now just to let you know
the list item has an overflow hidden to
this list I'm gonna move and unless you
can't see it so now we're gonna set that
to the initial so that's the initial
hurry up and we're going to do a move
zero and I'm kind of want to move with
this really like fluid and loop so let's
again remember I said play around with
these different animation types I'm
going to go for out Quint and I'm gonna
really slow it down so it feels look at
that look at that movement is just and
when you start to pair this up we can do
quick way and do a duplicate and then
when you do a duplicate I'm going to
select both of these change target on to
that second one and all we need to do is
just pump that onto that one pump that
onto that one and then
just change the delay on it and I find
this quite a nice way of doing it so I
just do duplicate the first and I
duplicate the ends I select both of them
I change and then I change the link
again just go in there change target and
then select that target and then all I
have to do now is just move them back on
to the relative places that they need to
go that's an initial stay and that's my
end state but again I need to put a bit
of timing on that and if we have a look
beautiful works really nicely already so
we're starting to move through this now
I'm thinking I don't want to do a move
I've got to move
we probably got to move a million times
let's do something more interesting at
least as I said earlier about that size
property let's do that now I want this
now to come up from the bottom I want
it's cut from the bottom and I just just
been presented it in a different way
this is try it and see what this looks
like so I'm going to go back to the
button I'm going to click the bar I'm
going to go like this I'm gonna go to
here I'm going to go size width or make
sure that you plug all of these
measurements in when you're doing
interactions now some people might leave
this blank because it's defined on the
page and again through experience I've
found sometimes that it doesn't register
and it affects it affects the way that
it may respond responsively now I
haven't got an example to show you how
that works but just go right it is a
hundred percent width and the height is
zero you went height and what I want to
do now is go to the end of that size
when they go width and received no
height hundred you point right now what
we want to do is we're gonna have to
adjust these timings now because we need
this to have a bit of time
I'm gonna I'm going to put it onto the
court was what we had for the size and
I'm going to do a 1.5 and I'm probably
just going to move these along so let's
go I recommend that one a eight this one
let's see
and this 10.4 so when we look at the
movement you see the difference or where
they let's just there's the difference
in that movement it's just so much
different and we can make it even
further we push it even further and with
difference and this is the reason why
you might want to use the side property
that only links coming too early for me
so again we're just gonna tweak and
adjust eight six great love it
now we could create a bit of a dynamic
movement on this goes up link to come
down let's try that because that could
be quite nice so let's just put these
two - - and - let's have a quick look
boom let's try that again yeah it's nice
I think what we should do is probably
just speed that up a touch one two three
beautiful I still think these need to be
a little bit long like little bit slower
like in terms of the delay of it and
feel like they just that movement kind
of gets to Easter kind of - - together
just needs a tiny bit of separation to
help that breathe beautiful love it
great so now we've got that animation
how do we push this further so if we go
to the to the menu parent and we're
going to do one thing here we're going
to choose an image obviously you know
the goonies project that I worked on and
the little Gainey's picture we all love
a bit ago unions don't we and then what
I'm going to do is I'm going to add an
overlay on this just because it is a
little bit strong and then
once you see what happens when you add
an image to this it's quite staggering
so we see that movement now you see how
that kind of opens up is it's great it
works really really well let's just have
another look beautiful right so now
we've got that built we've you know
we've gone through that process we've
really started to push it there's
obviously a lot more things that we
could do with this and that's just a
starting point to think about how you
can advance and move things forward now
one little thing that we need to just do
quickly here is do the second click and
one other thing that we need to think
about is this menu overlay now this menu
overlay potentially could be overlaying
your content which means you're not
going to be able to link Tech cetera etc
so do this get into doing a habit of
this initial state is hidden and then
what we want to do is the hide and choke
we want to show it back there straight
away so now that it won't be affecting
any of your page when you click it it
will transition and then all we need to
do is go here we need to duplicate this
I need to click this we now can just
reverse this back so we know we're in -
100 - 100 - 100 we know that that's
going to be a hired and the size is
going to be to zero and now that's done
we can get rid of all them Enosh initial
interactions that we did from the
duplication of the first click and then
all we need to do is just work out the
timings so for me I think let's go that
on zero that on point two and that on
point for this needs to go right at the
end so this it needs to be right out of
the way of of them animation and then
it's just go not eight and let's just
have a quick look boom
all that that in well that great did it
and I don't know why I didn't go up so
let's just
queeny's up and it's just it's a speed
that up on that one doesn't need to be
as slow on the way out that is strange
that's why it's on the pixels so let's
just go back sorry it should be on
percent and that now will hide them
links just this one in in two two two
beautiful and there you go I mean that
is quite a quick process but see how we
gradually just progressed it you know
ideas right now obviously we can animate
the burger menu you could potentially
make this a magnetic further menu so
when you go to it moves towards your
mouse you could bring the image in as a
different div and then you could do a
bit of a parallax movement on it there's
so many different possibilities you can
do and just with that simple process of
going from and thinking about how you
can change and the animation now you can
change them types of animations can
really go from something that's quite
linear and quite boring to something
that looks pretty snazzy so guys don't
forget if you like this tutorial please
give it a thumbs up and subscribe and
I'll see you around and I'll see you
soon
cheers guys
More from author
How to build a Webflow burger menu with animations
